WPF_侧边栏区域动画展开和隐藏

最新推荐文章于 2024-08-24 09:15:56 发布

zxy644492473

最新推荐文章于 2024-08-24 09:15:56 发布

阅读量970

点赞数

文章标签： wpf

本文链接：https://blog.csdn.net/qq_31461977/article/details/129927928

版权

该文章展示了如何利用WPF中的ToggleButton控件的IsChecked属性来控制Storyboard，从而实现图形的切换和宽度动画效果。代码示例中，定义了两个Geometry资源用于左右方向的图标，并在ToggleBuutton的ControlTemplate中设置触发器，根据IsChecked的状态改变图标数据。同时，通过EventTrigger触发了宽度变化的动画。

摘要由CSDN通过智能技术生成

先上效果图：

1.这里使用的是ToggleButton，利用其IsChecked属性控制Storyboard，代码如下：

 <UserControl.Resources>
        <Geometry x:Key="Icon_Left_Desgin">M797.152 172l-303.424 303.424 303.424 303.424q10.848 10.848 10.848 25.728t-10.848 25.728l-94.848 94.848q-10.848 10.848-25.728 10.848t-25.728-10.848l-424-424q-10.848-10.848-10.848-25.728t10.848-25.728l424-424q10.848-10.848 25.728-10.848t25.728 10.848l94.848 94.848q10.848 10.848 10.848 25.728t-10.848 25.728z</Geometry>
        <Geometry x:Key="Icon_Right_Desgin">M778.857143 501.142857l-424 424q-10.857143 10.857143-25.714286 10.857143t-25.714286-10.857143l-94.857143-94.857143q-10.857143-10.857143-10.857143-25.714286t10.857143-25.714286l303.428571-303.428571-303.428571-303.428571q-10.857143-10.857143-10.857143-25.714286t10.857143-25.714286l94.857143-94.857143q10.857143-10.857143 25.714286-10.857143t25.714286 10.857143l424 424q10.857143 10.857143 10.857143 25.714286t-10.857143 25.714286z</Geometry>
        <Style x:Key="PathToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <Border Name="bg" Background="{TemplateBinding Background}" Opacity="0.25" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"/>
                            <Path x:Name="icon" Width="10" Height="10" Data="{StaticResource Icon_Left_Desgin}"  Fill="{TemplateBinding Foreground}" SnapsToDevicePixels="True" Stretch="Uniform"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter TargetName="icon" Property="Data" Value="{StaticResource Icon_Right_Desgin}" />
                            </Trigger>
                            
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Storyboard x:Key="OnChecked">
            <DoubleAnimation Storyboard.TargetName="DataBorder" Storyboard.TargetProperty="Width"
                                         Duration="0:0:0.3"  To="300"/>
        </Storyboard>
        <Storyboard x:Key="OnUnchecked">
            <DoubleAnimation Storyboard.TargetName="DataBorder" Storyboard.TargetProperty="Width"
                                         Duration="0:0:0.3" To="0"/>
        </Storyboard>
    </UserControl.Resources>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="2">
            <Border x:Name="DataBorder" Width="0" Background="Black" Opacity="0.6"/>
            <ToggleButton Width="26" Height="60" HorizontalAlignment="Left" Foreground="White" Style="{StaticResource PathToggleButtonStyle}" Cursor="Hand">
                <ToggleButton.Triggers>
                    <EventTrigger RoutedEvent="ToggleButton.Checked">
                        <BeginStoryboard Storyboard="{StaticResource OnChecked}"/>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                        <BeginStoryboard Storyboard="{StaticResource OnUnchecked}"/>
                    </EventTrigger>
                </ToggleButton.Triggers>
            </ToggleButton>
        </Grid>
    </Grid>