首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > .NET > C# >

wpf中为什么按钮移动下去动画变大,上面的倒影不放大

2013-03-01 
wpf中为什么按钮移动上去动画变大,下面的倒影不放大Window x:ClassTEST.MainWindowxmlnshttp://sche

wpf中为什么按钮移动上去动画变大,下面的倒影不放大

<Window x:Class="TEST.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="700">
    <Window.Resources>
        <Style x:Key="buttonType"  TargetType="Button">
            <Style.Triggers>
                <Trigger Property="IsPressed" Value="true">
                    <Setter Property = "Foreground" Value="Green"/>
                    <Setter Property = "Height" Value="100"/>
                </Trigger>
                <EventTrigger RoutedEvent="Button.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)" To="1.3"
                                                             Duration="0:0:0.1" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" To="1.3"
                                                             Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>


                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.1" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
            <Setter Property="Height" Value="50"></Setter>
            <Setter Property="Width" Value="50"></Setter>
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Setter Property="RenderTransformOrigin" Value="0.5,1" />
        </Style>
    </Window.Resources>
    <Grid Height="300" Width="500">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Style="{StaticResource buttonType}" x:Name="btn" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Bottom" >

        </Button>


        <Rectangle Grid.Row="1" Opacity="0.7"  Height="{Binding ElementName=btn, Path=ActualHeight}" 
            Width="{Binding ElementName=btn, Path=ActualWidth}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=btn}"/>
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
                <ScaleTransform ScaleY="-0.7"/>
            </Rectangle.LayoutTransform>
            <Rectangle.OpacityMask>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Offset="0" Color="Transparent"/>
                    <GradientStop Offset="1" Color="#77000000"/>
                </LinearGradientBrush>
            </Rectangle.OpacityMask>
        </Rectangle>
    </Grid>
</Window>



为什么点击时候更改按钮大小,倒影随之变化。
但是移动上去的时候按钮发生一个动画,倒影不随之变化呢?


                                                             Duration="0:0:0.1" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" To="1.3"
                                                             Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Button.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleX)" Duration="0:0:0.1" />
                                <DoubleAnimation Storyboard.TargetProperty="LayoutTransform.(ScaleTransform.ScaleY)" Duration="0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
            <Setter Property="Height" Value="50"></Setter>
            <Setter Property="Width" Value="50"></Setter>


            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Setter Property="RenderTransformOrigin" Value="0.5,1" />
        </Style>
    </Window.Resources>
    <Grid Height="300" Width="500">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Button Style="{StaticResource buttonType}" x:Name="btn" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Bottom" >

        </Button>
        
        
        <Rectangle Grid.Row="1" Opacity="0.7" Name="aa"  Height="{Binding ElementName=btn, Path=ActualHeight}" 
            Width="{Binding ElementName=btn, Path=ActualWidth}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=btn}"/>
            </Rectangle.Fill>
            <Rectangle.LayoutTransform>
                <ScaleTransform ScaleY="{Binding ElementName=btn, Path=LayoutTransform.(ScaleTransform.ScaleY)}" 
                                ScaleX="{Binding ElementName=btn, Path=LayoutTransform.(ScaleTransform.ScaleX)}"/>
            </Rectangle.LayoutTransform>
            <Rectangle.OpacityMask>
                <LinearGradientBrush EndPoint="0,1">
                    <GradientStop Offset="0" Color="#77000000"/>
                    <GradientStop Offset="1" Color="Transparent"/>
                </LinearGradientBrush>
            </Rectangle.OpacityMask>


        </Rectangle>
    </Grid>

热点排行