如何在xaml中多次动画元素的宽度？答案

【问题标题】：How to animate the width of an element multiple times in xaml?如何在xaml中多次动画元素的宽度？
【发布时间】：2017-01-19 08:46:54
【问题描述】：

我正在尝试在我的 WPF 应用程序上添加一个拆分视图控件，它看起来像 UWP 应用程序。但是当我点击“展开菜单按钮”（汉堡包按钮）三次时，它就不再起作用了。

第一次单击时，它会扩展为 358 像素。（好的）
在第二次单击时，它返回到 48px (Ok)
在第三次单击时，它什么也不做......它应该再次将面板扩展到 358px，但它没有。

我没有任何 C# 代码，只有这个用于动画的 XAML 代码：

            <Style TargetType="StackPanel" x:Key="expand">
            <Style.Triggers>
                <!--TO EXPAND-->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                        <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="48"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" To="358" Duration="0:00:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.EnterActions>
                </MultiDataTrigger>
                <!--TO CLOSE-->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                        <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="358"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" To="48" Duration="0:00:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.EnterActions>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

这里是完整的 XAML 代码：

<Window x:Class="LojaDeEletronicos.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LojaDeEletronicos"
        mc:Ignorable="d"
        Title="MainWindow" Height="438" Width="640">
    <Grid>
        <Grid.Resources>
            <Style TargetType="StackPanel" x:Key="expand">
                <Style.Triggers>
                    <!--TO EXPAND-->
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                            <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="48"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Width" To="358" Duration="0:00:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                    </MultiDataTrigger>
                    <!--TO CLOSE-->
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                            <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="358"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Width" To="48" Duration="0:00:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="CleanButton" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Opacity" Value="0.8"/>
                        <Setter Property="Cursor" Value="Hand"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="menuButton" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>

                </Setter>
                <Setter Property="Background" Value="#eee"/>

                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#ddd"/>
                        <Setter Property="Cursor" Value="Hand"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=btnHome3}" Value="True" >
                        <Setter Property="Background" Value="#ddd" />
                    </DataTrigger>

                </Style.Triggers>
            </Style>
            <Style x:Key="menuButtonExpanded" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Left" Margin="20,0,0,0" VerticalAlignment="Center"/>
                            </Border>

                        </ControlTemplate>
                    </Setter.Value>

                </Setter>
                <Setter Property="Background" Value="#eee"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#ddd"/>
                        <Setter Property="Cursor" Value="Hand"/>

                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="48" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <!--START OF RELEVANT CONTENT-->




        <StackPanel Name="menuLateral"  Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Width="48"  Grid.ColumnSpan="2" HorizontalAlignment="Left" Background="#eee" Style="{StaticResource expand}">
            <!--#region Home Button -->
            <Button Name="btnHome" HorizontalAlignment="Left" FontSize="21" Foreground="#333" Style="{StaticResource menuButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="48" Height="44" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"/>
            <!--#endregion-->
            <Separator  Width="30"  Height="5" Margin="9,0,0,0" HorizontalAlignment="Left"  VerticalAlignment="Top"/>
            <!--#region Products Button -->
            <Button Name="btnProdutos"  HorizontalAlignment="Left" Style="{StaticResource menuButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="48" Height="44" VerticalAlignment="Top">
                <Image x:Name="product_icon_png"  Tag="fdsf" Source="product_icon.png" RenderOptions.BitmapScalingMode="HighQuality" Width="25" Height="25" Stretch="Fill" />
            </Button>
            <!--#endregion-->
        </StackPanel>

        <Rectangle Grid.Column="1" Fill="#FF7B7BFF" Grid.Row="0" />

        <Button Name="btnExpandirMenu" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="20" Foreground="White" Background="#333" Style="{StaticResource CleanButton}" Click="btnExpandirMenu_Click"/>

        <StackPanel Name="MenuExpandido" Grid.Column="1" Background="#eee" Width="310" Visibility="Collapsed" Style="{StaticResource expand}" HorizontalAlignment="Left" Grid.Row="0" Grid.RowSpan="2">
            <Button Name="btnHome3" Margin="0,48,0,0" Content="Página Inicial"  Foreground="#444" FontSize="16" Style="{StaticResource menuButtonExpanded}" Height="44"/>
        </StackPanel>

    </Grid>
</Window>

【问题讨论】：

也许你有双精度问题？ en.wikipedia.org/wiki/Double-precision_floating-point_format
@Mat 有办法治愈吗？
您可以使用 LIveVisualTree 内置的 snoop 或 Visual Studio 来探索 Width 的真正价值。也许它不准确 49。如果您绑定到 ActualWidth，也许它也有帮助......

标签： c# wpf xaml

【解决方案1】：

可能它确实需要以某种浮动精度来做某事。

我能想到的最简单的解决方法如下：

<Style TargetType="StackPanel" x:Key="expand">
    <Setter Property="Width" Value="48"></Setter>

    <Style.Triggers>

        <!--TO EXPAND-->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu,PresentationTraceSources.TraceLevel=High}" Value="True" />
                <Condition Binding="{Binding Width, ElementName=menuLateral,PresentationTraceSources.TraceLevel=High, UpdateSourceTrigger=PropertyChanged}" Value="48" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="OUT"/>
                <BeginStoryboard Name="IN">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="358" Duration="0:00:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.EnterActions>
        </MultiDataTrigger>
        <!--TO CLOSE-->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                <Condition Binding="{Binding ActualWidth, ElementName=menuLateral}" Value="358"/>
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="IN"/>
                <BeginStoryboard Name="OUT">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="48" Duration="0:00:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.EnterActions>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

如您所见，我刚刚命名为StoryBoards，并且在开始下一个之前还使用了StopStoryboard。

这应该可以解决您的问题。

【讨论】：