WPF ControlTemplate Trigger with animation

2019-08-01 18:24发布

问题:

I have below code which gives me an error: 'meBorder' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'.

     <Border Height="20" x:Name="meBorder" Margin="0,200,0,0" Grid.Row="0" Background="Red">
        <Button x:Name="btn1" Height="125" Width="30" Content="Dipsa" VerticalAlignment="Top">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Grid>
                                    <Border>
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                          Margin="{TemplateBinding Padding}" VerticalAlignment="Top" RecognizesAccessKey="True"/>
                                    </Border>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver"  Value="True">
                                        <Trigger.EnterActions>
                                            <BeginStoryboard>
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="meBorder" Storyboard.TargetProperty="Height" To="125" Duration="0:0:.3" />
                                                </Storyboard>
                                            </BeginStoryboard>
                                        </Trigger.EnterActions>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
   </Border>

Pls help

回答1:

It's basically saying that it can't see past the control template in to the object that's being templated: try this

  <Border Height="20" x:Name="meBorder" Margin="0,200,0,0" Grid.Row="0" Background="Red">
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Height" To="125" Duration="0:0:.3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Button x:Name="btn1" Height="125" Width="30" Content="Dipsa" VerticalAlignment="Top">
            <Button.Style>
                <Style TargetType="{x:Type Button}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Button}">
                                <Grid>
                                    <Border>
                                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                                      Margin="{TemplateBinding Padding}" VerticalAlignment="Top" RecognizesAccessKey="True"/>
                                    </Border>
                                </Grid>                                  
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Style>
        </Button>
    </Border>