如何从样式中的父控件动画子控件?

时间:2016-07-04 21:41:13

标签: c# wpf

我试图为按钮内的图像设置动画。然而,经过尝试和许多错误后,我似乎无法自己解决这个问题。

我发现有几个线程与我的解决方案很接近,比如这个线程,这类似于我正在做的事情: How to affect child control properties from a style

但是,我试图为图像添加动画效果。

这是我的xaml设计:

<Button Name="dbButton" Style="{StaticResource imgButton}" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Click="DatabaseButton_Click" HorizontalAlignment="Center" Margin="300,0,0,0" VerticalAlignment="Bottom" ToolTip="View Database">
        <Image Source="{StaticResource img_database}" Height="100" Width="100"/>
</Button>

这就是我试图建立的风格:

<Style x:Key="imgButton" TargetType="{x:Type Button}">
    <!--start of image child style-->
    <Style.Resources>
        <Style TargetType="{x:Type Image}">
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform 
                        x:Name="imgScale" 
                        CenterX="50" 
                        CenterY="50" 
                        ScaleX="1" 
                        ScaleY="1"/>
                </Setter.Value>
            </Setter>
        </Style>
    </Style.Resources>
    <!--end of image child style-->
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate x:Name="tmpltButton">
                <Grid>                        
                    <ContentPresenter x:Name="ButtonContent" 
                                      Opacity=".7" 
                                      Content="{Binding Path=Content, 
                                      RelativeSource={RelativeSource TemplatedParent}}" 
                                      HorizontalAlignment="center" 
                                      VerticalAlignment="center">
                    </ContentPresenter>
                </Grid>

                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Button.MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOut}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverIn}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.LostFocus">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOut}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.GotFocus">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverIn}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>

这是HoverIn和HoverOut动画:

<Storyboard x:Key="HoverOut" Duration="00:00:00.250">
    <DoubleAnimation 
        BeginTime="00:00:00"
        To="1" 
        Storyboard.TargetName="imgScale"
        Storyboard.TargetProperty="ScaleX"/>
    <DoubleAnimation 
        BeginTime="00:00:00"
        To="1" 
        Storyboard.TargetName="imgScale" 
        Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
<Storyboard x:Key="HoverIn" Duration="00:00:00.250">
    <DoubleAnimation 
        BeginTime="00:00:00" 
        To="1.5" 
        Storyboard.TargetName="imgScale" 
        Storyboard.TargetProperty="ScaleX"/>
    <DoubleAnimation 
        BeginTime="00:00:00" 
        To="1.5" 
        Storyboard.TargetName="imgScale" 
        Storyboard.TargetProperty="ScaleY"/>
</Storyboard>

我正在关注这个学习风格的资源: http://www.codeproject.com/Articles/85896/WPF-Customize-your-Application-with-Styles-and-C

0 个答案:

没有答案