运行 事件发生时 DataTemplate 中的 Storyboard
Run Storyboard inside DataTemplate when an event occurs
我有一个 ToggleButton 和一个 ItemsControl。 ItemsControl 的项目有一个 DataTemplate。当 ToggleButton 的检查状态发生变化时，如何为 ItemsControl 的每个项目设置动画？
代码
在下面的代码中，您可以看到当用户单击 ToggleButton 时，人字形会旋转。我希望 ItemsControl 中的项目也具有动画效果。我添加了一个带有键“ItemAnimation”的故事板。我认为它应该以某种方式在用户单击按钮时触发。
<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>
更新
我希望图标从徽标后面移动到它们的位置。这意味着第一个将移动 100 个像素，第二个 200，第三个 300，依此类推。
这是我想要的图片：
您提供的代码不完整：没有 AnimationEase 资源，没有 DataContext (ViewModel) 代码。
因此，实现示例不准确。
该示例使用后备 属性 标记。
写入一个初始值，然后动画。
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>
添加了以下说明：
The problem is that when I "uncheck" the toggle button, the circles don't go back to the top. Also, I want the icons to move from behind the logo to their positions. Meaning the first one would move 100 pixels, the second 200, the third 300 and so on.
用于乘法的MultiConverter:
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;
}
}
XAML 示例：
<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>
Ответ дополнен в связи с дополнительным вопросом:
I tried using the Tag for it like this: Opacity="{Binding Path=Tag, ElementName=itemsControl, Converter={StaticResource tagToOpacityConverter}}" but the problem is, I only get the start and the end values of the Tag. Meaning I only get 0 and 100 not the values in between. So the control appears and disappears
实现示例（对之前代码的改动）：
<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>
我有一个 ToggleButton 和一个 ItemsControl。 ItemsControl 的项目有一个 DataTemplate。当 ToggleButton 的检查状态发生变化时，如何为 ItemsControl 的每个项目设置动画？
代码
在下面的代码中，您可以看到当用户单击 ToggleButton 时，人字形会旋转。我希望 ItemsControl 中的项目也具有动画效果。我添加了一个带有键“ItemAnimation”的故事板。我认为它应该以某种方式在用户单击按钮时触发。
<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>
更新
我希望图标从徽标后面移动到它们的位置。这意味着第一个将移动 100 个像素，第二个 200，第三个 300，依此类推。
这是我想要的图片：
您提供的代码不完整：没有 AnimationEase 资源，没有 DataContext (ViewModel) 代码。
因此，实现示例不准确。
该示例使用后备 属性 标记。
写入一个初始值，然后动画。
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>
添加了以下说明：
The problem is that when I "uncheck" the toggle button, the circles don't go back to the top. Also, I want the icons to move from behind the logo to their positions. Meaning the first one would move 100 pixels, the second 200, the third 300 and so on.
用于乘法的MultiConverter:
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;
}
}
XAML 示例：
<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>
Ответ дополнен в связи с дополнительным вопросом:
I tried using the Tag for it like this: Opacity="{Binding Path=Tag, ElementName=itemsControl, Converter={StaticResource tagToOpacityConverter}}" but the problem is, I only get the start and the end values of the Tag. Meaning I only get 0 and 100 not the values in between. So the control appears and disappears
实现示例（对之前代码的改动）：
<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>