我正在尝试基于MouseEnter / MouseLeave触发器复制此颜色动画 - https://www.youtube.com/watch?v=4kih1BSRYxY
我使用Blend创建了一个Storyboard，但是我找不到最好的（正确！）控件/效果，所以我在网格中使用多Canvas创建它。正如你所看到的那样，它远不如视频那么顺畅。我究竟做错了什么？我应该调整时间，还是应该使用另一种控制？我可以将膨胀机用于这种类型的东西吗？
我想使用纯XAML实现这一点，没有代码。
<Window x:Class="ColourAnimation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="MenuAnimation">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas">
<EasingColorKeyFrame KeyTime="0:0:0.0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas1">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas2">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas3">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas4">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas5">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas6">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas7">
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas8">
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas9">
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas10">
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas11">
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas12">
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuAnimation2">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas13">
<EasingColorKeyFrame KeyTime="0:0:0.0" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas14">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas15">
<EasingColorKeyFrame KeyTime="0:0:0.1" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas16">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas17">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas18">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas19">
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas20">
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas21">
<EasingColorKeyFrame KeyTime="0:0:0.4" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas22">
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas23">
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas24">
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas25">
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="Green"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuAnimationReversed">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas">
<SplineColorKeyFrame KeyTime="0:0:0.0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas1">
<SplineColorKeyFrame KeyTime="0:0:1.0" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas2">
<SplineColorKeyFrame KeyTime="0:0:1.0" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas3">
<SplineColorKeyFrame KeyTime="0:0:0.8" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas4">
<SplineColorKeyFrame KeyTime="0:0:0.8" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas5">
<SplineColorKeyFrame KeyTime="0:0:0.6" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas6">
<SplineColorKeyFrame KeyTime="0:0:0.6" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas7">
<SplineColorKeyFrame KeyTime="0:0:0.4" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas8">
<SplineColorKeyFrame KeyTime="0:0:0.4" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas9">
<SplineColorKeyFrame KeyTime="0:0:0.2" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas10">
<SplineColorKeyFrame KeyTime="0:0:0.2" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas11">
<SplineColorKeyFrame KeyTime="0:0:0.0" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas12">
<SplineColorKeyFrame KeyTime="0:0:0.0" Value="Red"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuAnimationReversed2">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas13">
<SplineColorKeyFrame KeyTime="0:0:0.0" Value="Green"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas14">
<SplineColorKeyFrame KeyTime="0:0:1.0" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas15">
<SplineColorKeyFrame KeyTime="0:0:1.0" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas16">
<SplineColorKeyFrame KeyTime="0:0:0.8" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas17">
<SplineColorKeyFrame KeyTime="0:0:0.8" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas18">
<SplineColorKeyFrame KeyTime="0:0:0.6" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas19">
<SplineColorKeyFrame KeyTime="0:0:0.6" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas20">
<SplineColorKeyFrame KeyTime="0:0:0.4" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas21">
<SplineColorKeyFrame KeyTime="0:0:0.4" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas22">
<SplineColorKeyFrame KeyTime="0:0:0.2" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas23">
<SplineColorKeyFrame KeyTime="0:0:0.2" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas24">
<SplineColorKeyFrame KeyTime="0:0:0.0" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="canvas25">
<SplineColorKeyFrame KeyTime="0:0:0.0" Value="Green"/>
<SplineColorKeyFrame KeyTime="0:0:1" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger
SourceName="btnCraig"
RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource MenuAnimation}"/>
</EventTrigger>
<EventTrigger
SourceName="btnCraig"
RoutedEvent="MouseLeave">
<BeginStoryboard Storyboard="{StaticResource MenuAnimationReversed}"/>
</EventTrigger>
<EventTrigger
SourceName="btnCraig2"
RoutedEvent="MouseEnter">
<BeginStoryboard Storyboard="{StaticResource MenuAnimation2}"/>
</EventTrigger>
<EventTrigger
SourceName="btnCraig2"
RoutedEvent="MouseLeave">
<BeginStoryboard Storyboard="{StaticResource MenuAnimationReversed2}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Canvas x:Name="canvas" HorizontalAlignment="Left" Height="26" Margin="10,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas1" HorizontalAlignment="Left" Height="26" Margin="12,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas2" HorizontalAlignment="Left" Height="26" Margin="14,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas3" HorizontalAlignment="Left" Height="26" Margin="16,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas4" HorizontalAlignment="Left" Height="26" Margin="18,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas5" HorizontalAlignment="Left" Height="26" Margin="20,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas6" HorizontalAlignment="Left" Height="26" Margin="22,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas7" HorizontalAlignment="Left" Height="26" Margin="24,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas8" HorizontalAlignment="Left" Height="26" Margin="26,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas9" HorizontalAlignment="Left" Height="26" Margin="28,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas10" HorizontalAlignment="Left" Height="26" Margin="30,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas11" HorizontalAlignment="Left" Height="26" Margin="32,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas12" HorizontalAlignment="Left" Height="26" Margin="34,72,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Button x:Name="btnCraig" Content="Button1" HorizontalAlignment="Left" Margin="53,76,0,0" VerticalAlignment="Top" Width="68" Background="Transparent" BorderBrush="Transparent" BorderThickness="0,0,0,0"/>
<Canvas x:Name="canvas13" HorizontalAlignment="Left" Height="26" Margin="10,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas14" HorizontalAlignment="Left" Height="26" Margin="12,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas15" HorizontalAlignment="Left" Height="26" Margin="14,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas16" HorizontalAlignment="Left" Height="26" Margin="16,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas17" HorizontalAlignment="Left" Height="26" Margin="18,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas18" HorizontalAlignment="Left" Height="26" Margin="20,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas19" HorizontalAlignment="Left" Height="26" Margin="22,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas20" HorizontalAlignment="Left" Height="26" Margin="24,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas21" HorizontalAlignment="Left" Height="26" Margin="26,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas22" HorizontalAlignment="Left" Height="26" Margin="28,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas23" HorizontalAlignment="Left" Height="26" Margin="30,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas24" HorizontalAlignment="Left" Height="26" Margin="32,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Canvas x:Name="canvas25" HorizontalAlignment="Left" Height="26" Margin="34,95,0,0" VerticalAlignment="Top" Width="5" Background="White"/>
<Button x:Name="btnCraig2" Content="Button2" HorizontalAlignment="Left" Margin="53,95,0,0" VerticalAlignment="Top" Width="59" Background="Transparent" BorderBrush="Transparent"/>
</Grid>
答案 0 :(得分：0)
对不起延迟 - 我以为我早些发布了这个。
我的主窗口标记
Title="MainWindow" Height="450" Width="800">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ListBox Name="ViewSelect"
ItemsSource="{Binding ViewChoices}"
SelectedItem="{Binding SelectedViewChoice, Mode=TwoWay}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="{Binding Brush}">
<Rectangle.RenderTransform>
<ScaleTransform ScaleX=".1" ScaleY="1"/>
</Rectangle.RenderTransform>
<Rectangle.Style>
<Style TargetType="Rectangle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
From="0.1" To=".9" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="(Rectangle.RenderTransform).(ScaleTransform.ScaleX)"
From="0.9" To=".1" Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Rectangle.Style>
</Rectangle>
<Button Content="{Binding Name}"
Grid.Column="1"
Background="Transparent"
Command="{Binding ChoiceCommand}"
BorderThickness="0"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
请注意，我正在将数据模板化为listboxitem，其中包含一个矩形和按钮。这里的按钮在我的代码中什么都不做，因为我没有为它们设置任何命令。但是他们已经准备好了......
using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Media;
namespace wpf_AnimatedMenu
{
public class MainWindowViewModel : INotifyPropertyChanged
{
public ObservableCollection<ViewChoice> ViewChoices { get; set; }
= new ObservableCollection<ViewChoice>
{
new ViewChoice{ Name="Page One", Brush=Brushes.Green},
new ViewChoice{ Name="Page Two", Brush=Brushes.Yellow},
};
private ViewChoice selectedViewChoice;
public ViewChoice SelectedViewChoice
{
get { return selectedViewChoice; }
set { selectedViewChoice = value; RaisePropertyChanged(); }
}
public event PropertyChangedEventHandler PropertyChanged;
private void RaisePropertyChanged([CallerMemberName] String propertyName = "")
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
和ViewChoice。
public class ViewChoice
{
public string Name { get; set; }
public SolidColorBrush Brush { get; set; }
public ICommand ChoiceCommand { get; set; }
}
这是onedrive上的压缩解决方案：