WPF制作《三国志幻想大陆》的武将浏览列表

利用WPF制作游戏《三国志幻想大陆》的武将浏览列表，思路参考https://github.com/BYJRK/GenshinCharacterBrowser

源码见github

主要代码实现

动画部分

武将名称进入动画

定义

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

</Storyboard>

武将图片进入动画

<Storyboard x:Key="protraitIn">
    <DoubleAnimation
        Storyboard.TargetName="protraitPic"
        Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)"
        From="400"
        To="100"
        Duration="0:0:0.35">
        <DoubleAnimation.EasingFunction>
            <CubicEase EasingMode="EaseInOut" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
    <DoubleAnimation
        Storyboard.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>

爬虫部分

这部分都是发请求和json解析，具体看源码