C# 发生事件时在DataTemplate内运行情节提要
我有一个ToggleButton和一个ItemsControl。ItemsControl的项具有数据模板。当ToggleButton的检查状态更改时，如何设置每个ItemsControl项的动画 代码 在下面的代码中，您可以看到当用户单击ToggleButton时，V形符号会旋转。我希望ItemsControl中的项目也可以设置动画。我添加了一个带有“ItemAnimation”键的故事板。我认为它应该在用户点击按钮时触发C# 发生事件时在DataTemplate内运行情节提要,c#,.net,wpf,animation,storyboard,C#,.net,Wpf,Animation,Storyboard,我有一个ToggleButton和一个ItemsControl。ItemsControl的项具有数据模板。当ToggleButton的检查状态更改时，如何设置每个ItemsControl项的动画 代码 在下面的代码中，您可以看到当用户单击ToggleButton时，V形符号会旋转。我希望ItemsControl中的项目也可以设置动画。我添加了一个带有“ItemAnimation”键的故事板。我认为它应该在用户点击按钮时触发 <Window x:Class="WinClient.M
<Window x:Class="WinClient.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:WinClient"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<DataTemplate x:Key="ShortcutButton">
<DataTemplate.Resources>
<Storyboard x:Key="ItemAnimation" AutoReverse="False">
<DoubleAnimation Storyboard.TargetName="Trans" Storyboard.TargetProperty="Y" Duration="0:0:0.25" From="-100" To="0" EasingFunction="{StaticResource AnimationEase}" />
</Storyboard>
</DataTemplate.Resources>
<Border Width="100" Height="100" Background="White" CornerRadius="50" x:Name="ContainerBorder">
<Border.RenderTransform>
<TranslateTransform x:Name="Trans"/>
</Border.RenderTransform>
<TextBlock Text="{Binding Name}" FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Window.Resources>
<StackPanel VerticalAlignment="Top" Margin="50">
<Border Width="150" Height="150" CornerRadius="75" Background="White" BorderBrush="#FFC12121">
<Grid>
<Image Source="Resources/logo.png" />
<ToggleButton Width="40" Height="40" VerticalAlignment="Bottom" IsChecked="True" Command="{Binding ClickCommand}">
<Image x:Name="chevron" Source="Resources/chevron-down.png" Width="32" Height="32">
<Image.RenderTransform>
<RotateTransform CenterX="16" CenterY="16"/>
</Image.RenderTransform>
</Image>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="chevron" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="0" To="180" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="chevron" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Shortcuts}"
RenderTransform="{Binding Transform}"
ItemTemplate="{StaticResource ShortcutButton}"/>
</StackPanel>
</Window>
跨控件（和数据模板）边界使用
EventTrigger使用System.ComponentModel；
使用System.Runtime.CompilerServices；
名称空间WinClient
{
公共类MainViewModel:INotifyPropertyChanged
{
公共主视图模型（）
{
IsChecked=true；
}
检查私人住宅；
公共场所被检查
{
设置
{
_isChecked=值；
OnPropertyChanged（）；
}
得到
{
返回-已检查；
}
}
#区域inotifyproperty已更改
公共事件属性更改事件处理程序属性更改；
受保护的虚拟void OnPropertyChanged（[CallerMemberName]字符串propertyName=null）
{
PropertyChanged？.Invoke（这是新的PropertyChangedEventArgs（propertyName））；
}
#endregion InotifyProperty已更改
}
}
1.
2.
3.
该示例使用回退属性标记。
将初始值写入其中，然后设置动画。
ItemsControl项的转换绑定到此属性。
因此，它们也都是同步动画
<Window x:Class="WinClient.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:WinClient" xmlns:specialized="clr-namespace:System.Collections.Specialized;assembly=System" xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="650" Width="800">
<Window.Resources>
<specialized:StringCollection x:Key="source">
<sys:String>First</sys:String>
<sys:String>Second</sys:String>
</specialized:StringCollection>
<DataTemplate x:Key="ShortcutButton">
<Border Width="100" Height="100" Background="White" CornerRadius="50" x:Name="ContainerBorder">
<Border.RenderTransform>
<TranslateTransform Y="{Binding Tag, ElementName=itemsControl}" />
</Border.RenderTransform>
<TextBlock Text="{Binding}" FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
</Window.Resources>
<StackPanel VerticalAlignment="Top" Margin="50">
<Border Width="150" Height="150" CornerRadius="75" Background="White" BorderBrush="#FFC12121">
<Grid>
<Image Source="Resources/logo.png"/>
<ToggleButton Width="40" Height="40" VerticalAlignment="Bottom" IsChecked="True" >
<Image x:Name="chevron" Source="Resources/chevron-down.png" Width="32" Height="32">
<Image.RenderTransform>
<RotateTransform CenterX="16" CenterY="16"/>
</Image.RenderTransform>
</Image>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="chevron" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="0" To="180" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="itemsControl" Storyboard.TargetProperty="Tag" Duration="0:0:0.25" From="-100" To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="chevron" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
<ItemsControl x:Name="itemsControl"
ItemsSource="{DynamicResource source}"
ItemTemplate="{StaticResource ShortcutButton}">
<ItemsControl.Tag>
<sys:Double>10</sys:Double>
</ItemsControl.Tag>
</ItemsControl>
</StackPanel>
</Window>
using System;
using System.Globalization;
using System.Windows;
using System.Windows.Data;
using System.Windows.Markup;
namespace WinClient
{
public class MultiplicationConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
if (values == null || values.Length == 0)
return DependencyProperty.UnsetValue;
double product = 1;
foreach (var value in values)
{
if (double.TryParse(value.ToString(), out double number))
product *= number;
if (product == 0)
break;
}
return product;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
public static MultiplicationConverter Instance { get; } = new MultiplicationConverter();
}
public class MultiplicationConverterExtension : MarkupExtension
{
public override object ProvideValue(IServiceProvider serviceProvider)
=> MultiplicationConverter.Instance;
}
}
<Window x:Class="WinClient.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:WinClient"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
Title="MainWindow" Height="650" Width="800">
<Window.Resources>
<sys:String x:Key="source">12345</sys:String>
<DataTemplate x:Key="ShortcutButton">
<Border Width="100" Height="100" Background="White" CornerRadius="50" x:Name="ContainerBorder">
<TextBlock Text="{Binding}" FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>
<sys:Double x:Key="zero">0</sys:Double>
<ItemsPanelTemplate x:Key="canvasTemplate">
<Canvas/>
</ItemsPanelTemplate>
<Style x:Key="itemContainerStyle" TargetType="ContentPresenter">
<Setter Property="Canvas.Top">
<Setter.Value>
<MultiBinding Converter="{local:MultiplicationConverter}">
<Binding Path="(ItemsControl.AlternationIndex)" RelativeSource="{RelativeSource Self}"/>
<Binding Path="Tag" ElementName="itemsControl"/>
</MultiBinding>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid VerticalAlignment="Top" Margin="50" HorizontalAlignment="Center">
<Border x:Name="border" Width="150" Height="150" CornerRadius="75" Background="White" BorderBrush="#FFC12121"
Panel.ZIndex="10">
<Grid>
<Image Source="Resources/logo.png"/>
<ToggleButton Width="40" Height="40" VerticalAlignment="Bottom">
<Image x:Name="chevron" Source="Resources/chevron-down.png" Width="32" Height="32">
<Image.RenderTransform>
<RotateTransform CenterX="16" CenterY="16"/>
</Image.RenderTransform>
</Image>
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="chevron" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="0" To="180" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="itemsControl" Storyboard.TargetProperty="Tag" Duration="0:0:2" To="0" From="100" />
<DoubleAnimation Storyboard.TargetName="itemsControlXY" Storyboard.TargetProperty="Y" Duration="0:0:2" To="0" From="{Binding ActualHeight, ElementName=border}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="chevron" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" From="180" To="0" Duration="0:0:0.3">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="itemsControl" Storyboard.TargetProperty="Tag" Duration="0:0:2" From="0" To="100" />
<DoubleAnimation Storyboard.TargetName="itemsControlXY" Storyboard.TargetProperty="Y" Duration="0:0:2" From="0" To="{Binding ActualHeight, ElementName=border}" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
</Grid>
</Border>
<ItemsControl x:Name="itemsControl"
AlternationCount="{x:Static sys:Int32.MaxValue}"
ItemsSource="{DynamicResource source}"
ItemTemplate="{DynamicResource ShortcutButton}"
Tag="{StaticResource zero}"
ItemsPanel="{DynamicResource canvasTemplate}"
ItemContainerStyle="{DynamicResource itemContainerStyle}" RenderTransformOrigin="0.5,0.5">
<ItemsControl.RenderTransform>
<TranslateTransform x:Name="itemsControlXY" Y="0"/>
</ItemsControl.RenderTransform>
</ItemsControl>
</Grid>
</Window>
12345
0
<Window.Resources>
<sys:String x:Key="source">12345</sys:String>
<sys:Double x:Key="percent">0.01</sys:Double>
<DataTemplate x:Key="ShortcutButton">
<Border Width="100" Height="100" Background="AliceBlue" CornerRadius="50" x:Name="ContainerBorder">
<Border.Opacity>
<MultiBinding Converter="{local:MultiplicationConverter}">
<Binding Path="Tag" ElementName="itemsControl"/>
<Binding Source="{StaticResource percent}"/>
</MultiBinding>
</Border.Opacity>
<TextBlock Text="{Binding}" FontSize="60" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</DataTemplate>