时间戳

首页 > 解决方案 > 基于 WPF 中的绑定开始 Storyboard

wpf - 基于 WPF 中的绑定开始 Storyboard

问题描述

我正在尝试在我的 wpf 应用程序中创建一个类似汉堡包的 Windows 10 按钮。现在一切都很好，但我找不到不使用后面的代码来启动动画的方法。到目前为止，这是我的 XAML：

<UserControl.Resources>
    <Storyboard x:Key="OpenMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                       Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="43.5" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                       Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="-43.5" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                       Storyboard.TargetName="rectangle2">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="1" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="0" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                       Storyboard.TargetName="GridMenu">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="40" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="200" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                       Storyboard.TargetName="Title">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="1" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="CloseMenu">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                       Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="43.5" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="0" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
                                       Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="-43.5" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="0" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
                                       Storyboard.TargetName="rectangle2">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="0" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="1" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)"
                                       Storyboard.TargetName="GridMenu">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="200" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="40" />
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Opacity)"
                                       Storyboard.TargetName="Title">
            <EasingDoubleKeyFrame KeyTime="0"
                                  Value="1" />
            <EasingDoubleKeyFrame KeyTime="0:0:0.3"
                                  Value="0" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<Grid Name="GridMenu"
      Width="40"
      HorizontalAlignment="Left"
      Background="LightGray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="40" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid Height="40"
          Background="White"
          VerticalAlignment="Top">
        <TextBlock Text="Tabs"
                   Name="Title"
                   Opacity="0"
                   FontWeight="Bold"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontFamily="Roboto Bk"
                   FontSize="17" />
    </Grid>
    <ToggleButton x:Name="ButtonMenu"
                  HorizontalAlignment="Right"
                  VerticalAlignment="Top"
                  Grid.Column="1"
                  IsChecked="{Binding Expanded}"
                  BorderBrush="{x:Null}"
                  Width="40"
                  Height="40"
                  Click="ButtonMenu_Click">
        <Grid HorizontalAlignment="Center"
              VerticalAlignment="Center">
            <Rectangle x:Name="rectangle"
                       Width="30"
                       Height="5"
                       Margin="0 0 0 0"
                       Fill="#FF515151"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       RenderTransformOrigin="0.1,1.5">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="rectangle1"
                       Width="30"
                       Height="5"
                       Margin="0 20 0 0 "
                       Fill="#FF515151"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Top"
                       RenderTransformOrigin="0.1,-0.6">
                <Rectangle.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform />
                    </TransformGroup>
                </Rectangle.RenderTransform>
            </Rectangle>
            <Rectangle x:Name="rectangle2"
                       Width="30"
                       Height="5"
                       Margin="0 10 0 0"
                       Fill="#FF515151"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Top" />
        </Grid>
    </ToggleButton>
    <ListView ItemsSource="{Binding Tabs}"
              Grid.Row="1"
              Background="Transparent"
              DisplayMemberPath="ControlName" />
</Grid>

但我只能使用点击事件来制作动画

bool stateClosed = true;

    private void ButtonMenu_Click(object sender, RoutedEventArgs e)
    {
        if (stateClosed)
        {
            Storyboard sb = FindResource("OpenMenu") as Storyboard;
            sb.Begin();
        }
        else
        {
            Storyboard sb = FindResource("CloseMenu") as Storyboard;
            sb.Begin();
        }
        stateClosed = !stateClosed;
    }

有什么方法可以绑定到 ViewModel 中的任何属性或使用触发器来实现这一点？

标签： wpfxamlmvvmdata-bindingstoryboard

解决方案

如果您想用 XAML 代码替换您的代码，您可以使用 RoutedEvents 扩展您的 ToggelBButton。请看下面的代码：

<ToggleButton x:Name="ButtonMenu"
              HorizontalAlignment="Right"
              VerticalAlignment="Top"
              Grid.Column="1"
              IsChecked="{Binding Expanded}"
              BorderBrush="{x:Null}"
              Width="40"
              Height="40">
    <ToggleButton.Triggers>
        <EventTrigger RoutedEvent="ToggleButton.Checked"  SourceName="ButtonMenu">
            <BeginStoryboard Storyboard="{Binding Source={StaticResource OpenMenu}}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="ToggleButton.Unchecked"  SourceName="ButtonMenu">
            <BeginStoryboard Storyboard="{Binding Source={StaticResource CloseMenu}}"/>
        </EventTrigger>
    </ToggleButton.Triggers>
    ...
</ToggleButton>

推荐阅读