C# 如何在xaml中多次设置元素宽度的动画?
我正在尝试在我的WPF应用程序上添加一个类似UWP的拆分视图控件。 但是当我点击“扩展菜单按钮”(汉堡按钮)三次时,它就不再工作了 第一次单击时,它将扩展到358px。(好的)C# 如何在xaml中多次设置元素宽度的动画?,c#,wpf,xaml,C#,Wpf,Xaml,我正在尝试在我的WPF应用程序上添加一个类似UWP的拆分视图控件。 但是当我点击“扩展菜单按钮”(汉堡按钮)三次时,它就不再工作了 第一次单击时,它将扩展到358px。(好的) 第二次单击时,它返回到48px(确定) 在第三次单击时,它什么也不做。。。它应该再次将面板扩展到358px,但它没有 我没有任何C#代码,只有用于动画的XAML代码: <Style TargetType="StackPanel" x:Key="expand">
第二次单击时,它返回到48px(确定)
在第三次单击时,它什么也不做。。。它应该再次将面板扩展到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=""/>
<!--#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="" 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>
可能它真的需要某种浮点精度 我能想到的最简单的修复方法如下:
<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>
如您所见,我刚刚命名了情节提要
,并且在开始下一个之前使用了停止情节提要
这应该可以解决您的问题。也许您有双精度问题@你可以使用snoop或内置于LIveVisualTree中的Visual studio来探索宽度的真正价值。也许不完全正确。如果您绑定到实际宽度,可能也会有所帮助。。。