update：字体&样式

Wpf_AiSportsMicrospace/App.xaml

@@ -6,7 +6,10 @@
 
     <!--StartupUri="Views/JumpRope/GroupJumpRope.xaml">-->
     <Application.Resources>
-
+        <FontFamily x:Key="AppFont">./Resoures/Fonts/myFontFamily</FontFamily>
+        <Style TargetType="TextBlock">
+            <Setter Property="FontFamily" Value="./Resoures/Fonts/myFontFamily"/>
+        </Style>
     </Application.Resources>
 
 </Application>

Wpf_AiSportsMicrospace/MyUserControl/ImageStateToVisibilityConverter.cs

@@ -0,0 +1,24 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace Wpf_AiSportsMicrospace.MyUserControl
+{
+    public class ImageStateToVisibilityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is int state && parameter is string param && int.TryParse(param, out int target))
+            {
+                return state == target ? Visibility.Visible : Visibility.Collapsed;
+            }
+            return Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

Wpf_AiSportsMicrospace/MyUserControl/SportUserItem.xaml

@@ -0,0 +1,49 @@
+<UserControl x:Class="Wpf_AiSportsMicrospace.MyUserControl.SportUserItem"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:Wpf_AiSportsMicrospace.MyUserControl"
+             xmlns:system="clr-namespace:System;assembly=mscorlib"
+             xmlns:gif="http://wpfanimatedgif.codeplex.com"
+              Width="270" Height="560">
+    <UserControl.Resources>
+        <local:ImageStateToVisibilityConverter x:Key="ImageStateToVisibilityConverter"/>
+    </UserControl.Resources>
+    <Grid>
+        
+        <Border Background="#60000000" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"/>
+        <Image Source="/Resources/Img/test_img/one_rope/top_bg.png" Width="224" 
+        HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,0,0,0"/>
+        <TextBlock Text="{Binding DisplayText, RelativeSource={RelativeSource AncestorType=UserControl}}"
+                   FontSize="26"
+                   Foreground="#fff"
+                   FontWeight="Bold"
+                   FontStyle="Italic"
+                   Margin="-17,4,0,0"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Top"/>
+        <TextBlock Text="{Binding NumberText, RelativeSource={RelativeSource AncestorType=UserControl}}"
+           FontSize="36"
+           Foreground="#000"
+           FontWeight="Bold"
+           FontStyle="Italic"
+           Margin="0,45,0,0"
+           HorizontalAlignment="Center"
+           VerticalAlignment="Top"/>
+
+        <Image Source="/Resources/Img/test_img/one_rope/out_user.png" Width="250" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,131,0,0"
+           Visibility="{Binding ImageState, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource ImageStateToVisibilityConverter}, ConverterParameter=3}" />
+        <Image Source="/Resources/Img/test_img/one_rope/pre_user.png" Width="270" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,131,0,0"
+           Visibility="{Binding ImageState, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource ImageStateToVisibilityConverter}, ConverterParameter=1}" />
+        <Image Source="/Resources/Img/test_img/one_rope/nopeople.png" Width="270" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,131,0,0"
+   Visibility="{Binding ImageState, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource ImageStateToVisibilityConverter}, ConverterParameter=0}" />
+        <Image gif:ImageBehavior.AnimatedSource="/Resources/Img/test_img/one_rope/jump_rope.gif"
+           gif:ImageBehavior.RepeatBehavior="Forever"
+           HorizontalAlignment="Center"
+           VerticalAlignment="Top"
+           Width="270"
+           Margin="0,131,0,0"
+           Visibility="{Binding ImageState, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource ImageStateToVisibilityConverter}, ConverterParameter=2}" />
+    </Grid>
+</UserControl>

Wpf_AiSportsMicrospace/MyUserControl/SportUserItem.xaml.cs

@@ -0,0 +1,62 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
+using System.Linq;
+using System.Runtime.CompilerServices;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Animation;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+using System.Windows.Threading;
+
+namespace Wpf_AiSportsMicrospace.MyUserControl
+{
+    /// <summary>
+    /// CoverFlowControl.xaml 的交互逻辑
+    /// </summary>
+    /// ST
+    public partial class SportUserItem : UserControl
+    {
+        public SportUserItem()
+        {
+            InitializeComponent();
+        }
+
+        public string DisplayText
+        {
+            get => (string)GetValue(DisplayTextProperty);
+            set => SetValue(DisplayTextProperty, value);
+        }
+
+        public static readonly DependencyProperty DisplayTextProperty =
+            DependencyProperty.Register(nameof(DisplayText), typeof(string), typeof(SportUserItem), new PropertyMetadata("??"));
+
+        public string NumberText
+        {
+            get => (string)GetValue(NumberTextProperty);
+            set => SetValue(DisplayTextProperty, value);
+        }
+
+        public static readonly DependencyProperty NumberTextProperty =
+            DependencyProperty.Register(nameof(NumberText), typeof(string), typeof(SportUserItem), new PropertyMetadata("??"));
+
+        public string ImageState
+            //0 没有人 1 准备中 2 运动中 3 出圈了
+        {
+            get => (string)GetValue(ImageStateProperty);
+            set => SetValue(ImageStateProperty, value);
+        }
+
+        public static readonly DependencyProperty ImageStateProperty =
+            DependencyProperty.Register(nameof(NumberText), typeof(string), typeof(SportUserItem), new PropertyMetadata("0"));
+    }
+}

Wpf_AiSportsMicrospace/Views/JumpRope/GroupJumpRope.xaml

@@ -3,14 +3,23 @@
         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:Wpf_AiSportsMicrospace.Views"
+        xmlns:local="clr-namespace:Wpf_AiSportsMicrospace.MyUserControl"
         mc:Ignorable="d"   Height="1080" Width="1920" Loaded="UserControl_Loaded" Unloaded="UserControl_Unloaded">
     <Grid >
         <Grid.Background>
-            <ImageBrush ImageSource="/Resources/Img/Album/home_bg.png" Stretch="UniformToFill"/>
+            <ImageBrush ImageSource="/Resources/Img/test_img/test_home_bg.png" Stretch="UniformToFill"/>
         </Grid.Background>
         <Grid>
-            <Canvas x:Name="overlayCanvas" IsHitTestVisible="False" Height="1080" Width="1920"/>
+            <Image 
+               Source="/Resources/Img/test_img/one_rope/title.png"
+               HorizontalAlignment="Center"
+               VerticalAlignment="Top"
+               Width="615"
+               Margin="0,0,0,0"
+               />
+            <local:SportUserItem DisplayText="一号位" NumberText="100000" ImageState="0" />
+            <!-- title -->
+            <Canvas x:Name="overlayCanvas" IsHitTestVisible="False" Height="1080" Width="1920" Margin="0,10,0,-10"/>
         </Grid>
     </Grid>
 </UserControl>

Wpf_AiSportsMicrospace/Wpf_AiSportsMicrospace.csproj

@@ -9,6 +9,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <None Remove="Resources\Font\myFontFamily.ttf" />
     <None Remove="Resources\Img\Album\1.gif" />
     <None Remove="Resources\Img\Album\1.jpg" />
     <None Remove="Resources\Img\Album\2.gif" />
@@ -43,6 +44,14 @@
     <None Remove="Resources\Img\play_img\play_jump.png" />
     <None Remove="Resources\Img\play_img\play_music.png" />
     <None Remove="Resources\Img\play_img\play_vs.png" />
+    <None Remove="Resources\Img\test_img\one_rope\jump_rope.gif" />
+    <None Remove="Resources\Img\test_img\one_rope\nopeople.png" />
+    <None Remove="Resources\Img\test_img\one_rope\out_user.png" />
+    <None Remove="Resources\Img\test_img\one_rope\pre_people.png" />
+    <None Remove="Resources\Img\test_img\one_rope\pre_user.png" />
+    <None Remove="Resources\Img\test_img\one_rope\test_home_bg.png" />
+    <None Remove="Resources\Img\test_img\one_rope\title.png" />
+    <None Remove="Resources\Img\test_img\one_rope\top_bg.png" />
     <None Remove="Resources\Img\test_img\test_home_bg.png" />
     <None Remove="Resources\Img\test_img\test_home_title.png" />
     <None Remove="Resources\Img\test_img\test_jump.png" />
@@ -102,6 +111,9 @@
   </ItemGroup>
 
   <ItemGroup>
+    <Resource Include="Resources\Font\myFontFamily.ttf">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\Album\1.gif">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
@@ -195,6 +207,30 @@
     <Resource Include="Resources\Img\play_img\play_vs.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\jump_rope.gif">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\nopeople.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\out_user.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\pre_people.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\pre_user.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\test_home_bg.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\title.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\test_img\one_rope\top_bg.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
     <Resource Include="Resources\Img\test_img\test_home_bg.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>