主要代码实现

动画部分

武将名称进入动画

定义

<Storyboard x:Key="roleNameIn"><DoubleAnimationStoryboard.TargetName="roleName"Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"From="-300"To="0"Duration="0:0:0.35"><DoubleAnimation.EasingFunction><CubicEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction></DoubleAnimation><DoubleAnimationStoryboard.TargetName="roleName"Storyboard.TargetProperty="Opacity"From="0"To="1"Duration="0:0:0.35" /></Storyboard>

武将图片进入动画

<Storyboard x:Key="protraitIn"><DoubleAnimationStoryboard.TargetName="protraitPic"Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"From="400"To="100"Duration="0:0:0.35"><DoubleAnimation.EasingFunction><CubicEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction></DoubleAnimation><DoubleAnimationStoryboard.TargetName="protraitPic"Storyboard.TargetProperty="Opacity"From="0"To="1"Duration="0:0:0.35" />
</Storyboard>

调用

  <!--  选中角色立绘事件  --><i:EventTrigger EventName="SelectionChanged"><i:InvokeCommandAction Command="{Binding DataContext.SelectProtraitCommand, RelativeSource={RelativeSource AncestorType=ListBox, AncestorLevel=2}}" CommandParameter="{Binding SelectedItem, ElementName=charListBox}" /><!--  启动在Resources定义的动画  --><i:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource protraitIn}" /><i:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource roleNameIn}" /></i:EventTrigger>

角色头像未选中灰色显示

Converter部分

public class ImageToGrayImage : IValueConverter
{public object Convert(object value,Type targetType,object parameter,System.Globalization.CultureInfo culture){BitmapImage image = value as BitmapImage;if (image != null){FormatConvertedBitmap grayBitmapSource = new FormatConvertedBitmap();grayBitmapSource.BeginInit();grayBitmapSource.Source = image;grayBitmapSource.DestinationFormat = PixelFormats.Gray8;grayBitmapSource.EndInit();return grayBitmapSource;}return value;}public object ConvertBack(object value,Type targetType,object parameter,System.Globalization.CultureInfo culture){throw new NotImplementedException();}
}

使用

 <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" Value="False"><Setter TargetName="roleIcon" Property="Source" Value="{Binding Icon, Converter={StaticResource convGrayImage}}" /></DataTrigger>