多等待

Wpf_AiSportsMicrospace/Home.xaml

@@ -1,9 +1,85 @@
-<Page x:Class="Wpf_AiSportsMicrospace.Home"
+<Window x:Class="Wpf_AiSportsMicrospace.Home"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="clr-namespace:Wpf_AiSportsMicrospace.MyUserControl"
-      Title="Home">
+        Title="CoverFlow Demo" Height="400" Width="800">
+    <Window.Resources>
+        <!-- Bool 到 Visibility Converter -->
+        <BooleanToVisibilityConverter x:Key="BoolToVisibilityConverter"/>
+
+        <!-- 主图片边框样式 -->
+        <Style x:Key="ImageBorderStyle" TargetType="Border">
+            <Setter Property="BorderThickness" Value="3"/>
+            <Setter Property="Margin" Value="10"/>
+            <Setter Property="Cursor" Value="Hand"/>
+            <Setter Property="BorderBrush" Value="Transparent"/>
+            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
+            <Setter Property="RenderTransform">
+                <Setter.Value>
+                    <ScaleTransform ScaleX="0.8" ScaleY="0.8"/>
+                </Setter.Value>
+            </Setter>
+            <Style.Triggers>
+                <DataTrigger Binding="{Binding IsSelected}" Value="True">
+                    <DataTrigger.EnterActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <!-- 放大 -->
+                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
+                                                 To="1.2" Duration="0:0:0.3"/>
+                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
+                                                 To="1.2" Duration="0:0:0.3"/>
+                                <!-- 红色边框 -->
+                                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color"
+                                                To="Red" Duration="0:0:0.3"/>
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.EnterActions>
+                    <DataTrigger.ExitActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <!-- 缩小 -->
+                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleX"
+                                                 To="0.8" Duration="0:0:0.3"/>
+                                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.ScaleY"
+                                                 To="0.8" Duration="0:0:0.3"/>
+                                <!-- 边框透明 -->
+                                <ColorAnimation Storyboard.TargetProperty="BorderBrush.Color"
+                                                To="Transparent" Duration="0:0:0.3"/>
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.ExitActions>
+                </DataTrigger>
+            </Style.Triggers>
+        </Style>
+    </Window.Resources>
+
     <Grid>
-        <local:CoverFlowControl x:Name="MyCo" HorizontalAlignment="Center" VerticalAlignment="Center" Width="1000"/>
+        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
+            <ItemsControl x:Name="VisibleImagesControl">
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <StackPanel Orientation="Horizontal"/>
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <Grid>
+                            <!-- 主图片 -->
+                            <Border Style="{StaticResource ImageBorderStyle}" MouseLeftButtonDown="Image_MouseLeftButtonDown">
+                                <Image Source="{Binding Path}" Width="150" Height="200"/>
+                            </Border>
+
+                            <!-- 小徽章 logo -->
+                            <Image Source="{Binding BadgePath}" Width="50" Height="50"
+                                   HorizontalAlignment="Center" VerticalAlignment="Top"
+                                   Margin="0,-25,0,0"
+                                   Visibility="{Binding IsSelected, Converter={StaticResource BoolToVisibilityConverter}}"/>
+                        </Grid>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+        </StackPanel>
     </Grid>
-</Page>
+</Window>

Wpf_AiSportsMicrospace/Home.xaml.cs

@@ -1,5 +1,7 @@
 using System;
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.ComponentModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -18,12 +20,85 @@ namespace Wpf_AiSportsMicrospace
     /// <summary>
     /// Home.xaml 的交互逻辑
     /// </summary>
-    public partial class Home : Page
-    {
+    public partial class Home : Window
+    { 
+        // 所有图片
+        public ObservableCollection<CoverImage> AllImages { get; set; } = new ObservableCollection<CoverImage>();
+        public ObservableCollection<CoverImage> VisibleImages { get; set; } = new ObservableCollection<CoverImage>();
+
+        private int selectedIndex = 0;
+
         public Home()
         {
             InitializeComponent();
-            MyCo.SelectedIndex = 0;
+
+            // 示例图片路径
+            string projectRoot = System.IO.Path.Combine(AppContext.BaseDirectory, @"..\..\..");
+            string albumPath = System.IO.Path.Combine(projectRoot, "Resources", "Img", "Album"); 
+            
+            string badgePath = System.IO.Path.Combine(projectRoot, "Resources", "Img", "Badge");
+
+            AllImages.Add(new CoverImage(System.IO.Path.Combine(albumPath, "1.jpg"), System.IO.Path.Combine(badgePath, "1.jpg")));
+            AllImages.Add(new CoverImage(System.IO.Path.Combine(albumPath, "2.jpg"), System.IO.Path.Combine(badgePath, "2.jpg")));
+            AllImages.Add(new CoverImage(System.IO.Path.Combine(albumPath, "3.jpg"), System.IO.Path.Combine(badgePath, "3.jpg")));
+            AllImages.Add(new CoverImage(System.IO.Path.Combine(albumPath, "4.jpg"), System.IO.Path.Combine(badgePath, "4.jpg")));
+            AllImages.Add(new CoverImage(System.IO.Path.Combine(albumPath, "5.jpg"), System.IO.Path.Combine(badgePath, "5.jpg")));
+
+            VisibleImagesControl.ItemsSource = VisibleImages;
+
+            // 默认选中中间图片
+            selectedIndex = 2;
+            UpdateVisibleImages();
+        }
+        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
+        {
+            if (sender is Border border && border.DataContext is CoverImage img)
+            {
+                int index = AllImages.IndexOf(img);
+                if (index >= 0)
+                {
+                    selectedIndex = index;
+                    UpdateVisibleImages();
+                }
+            }
+        }
+
+        private void UpdateVisibleImages()
+        {
+            VisibleImages.Clear();
+            for (int offset = -1; offset <= 1; offset++)
+            {
+                int idx = selectedIndex + offset;
+                if (idx >= 0 && idx < AllImages.Count)
+                {
+                    var img = AllImages[idx];
+                    img.IsSelected = offset == 0;
+                    VisibleImages.Add(img);
+                }
+            }
         }
     }
+
+    public class CoverImage : INotifyPropertyChanged
+    {
+        public string Path { get; set; }      // 主图路径
+        public string BadgePath { get; set; } // 小徽章路径
+
+        private bool _isSelected;
+        public bool IsSelected
+        {
+            get => _isSelected;
+            set { _isSelected = value; OnPropertyChanged(nameof(IsSelected)); }
+        }
+
+        public CoverImage(string path, string badgePath = null)
+        {
+            Path = path;
+            BadgePath = badgePath;
+        }
+
+        public event PropertyChangedEventHandler PropertyChanged;
+        protected void OnPropertyChanged(string name) =>
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
+    }
 }

Wpf_AiSportsMicrospace/MyUserControl/CoverFlowControl.xaml

@@ -4,54 +4,9 @@
              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:_3DTools="clr-namespace:_3DTools;assembly=3DTools"
-             Background="Black"  x:Name="Root">
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
     <Grid>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="50"/>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="50"/>
-        </Grid.ColumnDefinitions>
-
-        <!-- 左按钮 -->
-        <Button Content="&lt;" Grid.Column="0" Click="BtnPrev_Click" FontSize="24"/>
-
-        <!-- 图片滚动区域 -->
-        <ScrollViewer x:Name="Scroller" Grid.Column="1" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Disabled">
-            <ItemsControl x:Name="ItemsPanelImages" ItemsSource="{Binding Images, RelativeSource={RelativeSource AncestorType=UserControl}}">
-                <ItemsControl.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"/>
-                    </ItemsPanelTemplate>
-                </ItemsControl.ItemsPanel>
-                <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                        <Border Margin="10" Width="300" Height="500"
-                                BorderThickness="0" BorderBrush="Transparent"
-                                Cursor="Hand">
-                            <Border.Style>
-                                <Style TargetType="Border">
-                                    <Style.Triggers>
-                                        <DataTrigger Binding="{Binding IsSelected}" Value="True">
-                                            <Setter Property="BorderBrush" Value="Yellow"/>
-                                            <Setter Property="BorderThickness" Value="4"/>
-                                        </DataTrigger>
-                                    </Style.Triggers>
-                                </Style>
-                            </Border.Style>
-                            <Image Source="{Binding Path}" Stretch="UniformToFill"/>
-                            <Border.InputBindings>
-                                <MouseBinding MouseAction="LeftClick"
-                                              Command="{Binding DataContext.SelectImageCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                                              CommandParameter="{Binding Index}"/>
-                            </Border.InputBindings>
-                        </Border>
-                    </DataTemplate>
-                </ItemsControl.ItemTemplate>
-            </ItemsControl>
-        </ScrollViewer>
-
-        <!-- 右按钮 -->
-        <Button Content="&gt;" Grid.Column="2" Click="BtnNext_Click" FontSize="24"/>
+            
     </Grid>
 </UserControl>

Wpf_AiSportsMicrospace/MyUserControl/CoverFlowControl.xaml.cs

@@ -1,9 +1,5 @@
-using _3DTools;
-using System;
+using System;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
-using System.ComponentModel;
-using System.IO;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
@@ -13,170 +9,20 @@ 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.Media.Media3D;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 
 namespace Wpf_AiSportsMicrospace.MyUserControl
 {
+    /// <summary>
+    /// CoverFlowControl.xaml 的交互逻辑
+    /// </summary>
     public partial class CoverFlowControl : UserControl
     {
-        public ObservableCollection<ImageItem> Images { get; set; } = new ObservableCollection<ImageItem>();
-
-        private int selectedIndex;
-        public int SelectedIndex
-        {
-            get => selectedIndex;
-            set
-            {
-                if (value < 0) value = 0;
-                if (value >= Images.Count) value = Images.Count - 1;
-                selectedIndex = value;
-                UpdateSelectedItem();
-                ScrollToSelected();
-            }
-        }
-
-        // 设置默认显示图片
-        public int DefaultIndex { get; set; } = 1;
-
-        private const double NormalWidth = 300;
-        private const double NormalHeight = 500;
-        private const double SelectedWidth = 360;
-        private const double SelectedHeight = 600;
-
         public CoverFlowControl()
         {
             InitializeComponent();
-            LoadImages();
         }
-
-        private void LoadImages()
-        {
-            var paths = GetUserImages();
-            for (int i = 0; i < paths.Count; i++)
-            {
-                Images.Add(new ImageItem { Path = paths[i], Index = i });
-            }
-
-            SelectedIndex = DefaultIndex; // 默认选中
-        }
-        private List<string> GetUserImages()
-        {// 相对路径，基于可执行文件所在目录
-            string relativePath = @"..\..\..\Resources\Img\Album";
-            string path = System.IO.Path.GetFullPath(relativePath); // 转为绝对路径
-
-
-            if (!Directory.Exists(path))
-                return new List<string>();
-
-            var files = new DirectoryInfo(path).GetFiles("*.jpg", SearchOption.TopDirectoryOnly);
-            return files.Select(f => f.FullName).ToList();
-        }
-
-
-        private void UpdateSelectedItem()
-        {
-            for (int i = 0; i < Images.Count; i++)
-            {
-                if (i == SelectedIndex)
-                {
-                    Images[i].IsSelected = true;
-                    Images[i].BorderBrush = Brushes.Red;
-                    Images[i].BorderThickness = 4;
-                    Images[i].ImageWidth = SelectedWidth;
-                    Images[i].ImageHeight = SelectedHeight;
-                }
-                else
-                {
-                    Images[i].IsSelected = false;
-                    Images[i].BorderBrush = Brushes.Transparent;
-                    Images[i].BorderThickness = 0;
-                    Images[i].ImageWidth = NormalWidth;
-                    Images[i].ImageHeight = NormalHeight;
-                }
-            }
-        }
-
-        private void ScrollToSelected()
-        {
-            var container = ItemsPanelImages.ItemContainerGenerator.ContainerFromIndex(SelectedIndex) as FrameworkElement;
-            if (container == null) return;
-
-            double offset = container.TransformToAncestor(Scroller).Transform(new Point(0, 0)).X;
-            double scrollTarget = offset + container.ActualWidth / 2 - Scroller.ActualWidth / 2;
-
-            DoubleAnimation anim = new DoubleAnimation(scrollTarget, TimeSpan.FromMilliseconds(300));
-            Scroller.BeginAnimation(ScrollViewerBehavior.HorizontalOffsetProperty, anim);
-        }
-
-        private void BtnPrev_Click(object sender, RoutedEventArgs e) => SelectedIndex--;
-        private void BtnNext_Click(object sender, RoutedEventArgs e) => SelectedIndex++;
-    }
-
-    public class ImageItem : INotifyPropertyChanged
-    {
-        public string Path { get; set; }
-        public int Index { get; set; }
-
-        private bool isSelected;
-        public bool IsSelected
-        {
-            get => isSelected;
-            set { isSelected = value; OnPropertyChanged(nameof(IsSelected)); }
-        }
-
-        private Brush borderBrush;
-        public Brush BorderBrush
-        {
-            get => borderBrush;
-            set { borderBrush = value; OnPropertyChanged(nameof(BorderBrush)); }
-        }
-
-        private double borderThickness;
-        public double BorderThickness
-        {
-            get => borderThickness;
-            set { borderThickness = value; OnPropertyChanged(nameof(BorderThickness)); }
-        }
-
-        private double imageWidth;
-        public double ImageWidth
-        {
-            get => imageWidth;
-            set { imageWidth = value; OnPropertyChanged(nameof(ImageWidth)); }
-        }
-
-        private double imageHeight;
-        public double ImageHeight
-        {
-            get => imageHeight;
-            set { imageHeight = value; OnPropertyChanged(nameof(ImageHeight)); }
-        }
-
-        public event PropertyChangedEventHandler PropertyChanged;
-        private void OnPropertyChanged(string prop) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(prop));
-    }
-    public class ScrollViewerBehavior
-    {
-        public static readonly DependencyProperty HorizontalOffsetProperty =
-            DependencyProperty.RegisterAttached("HorizontalOffset", typeof(double), typeof(ScrollViewerBehavior),
-                new PropertyMetadata(0.0, OnHorizontalOffsetChanged));
-
-        private static void OnHorizontalOffsetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            if (d is ScrollViewer scroll)
-            {
-                scroll.ScrollToHorizontalOffset((double)e.NewValue);
-            }
-        }
-
-        public static void SetHorizontalOffset(DependencyObject element, double value)
-            => element.SetValue(HorizontalOffsetProperty, value);
-
-        public static double GetHorizontalOffset(DependencyObject element)
-            => (double)element.GetValue(HorizontalOffsetProperty);
     }
 }

Wpf_AiSportsMicrospace/Wpf_AiSportsMicrospace.csproj

@@ -14,6 +14,12 @@
     <None Remove="Resources\Img\Album\3.jpg" />
     <None Remove="Resources\Img\Album\4.jpg" />
     <None Remove="Resources\Img\Album\5.jpg" />
+    <None Remove="Resources\Img\Badge\1.jpg" />
+    <None Remove="Resources\Img\Badge\2.jpg" />
+    <None Remove="Resources\Img\Badge\3.png" />
+    <None Remove="Resources\Img\Badge\4.png" />
+    <None Remove="Resources\Img\Badge\5.jpg" />
+    <None Remove="Resources\Img\Badge\logo.png" />
   </ItemGroup>
 
   <ItemGroup>
@@ -78,6 +84,21 @@
     <Resource Include="Resources\Img\Album\5.jpg">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </Resource>
+    <Resource Include="Resources\Img\Badge\1.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\Badge\2.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\Badge\3.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\Badge\4.png">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
+    <Resource Include="Resources\Img\Badge\5.jpg">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Resource>
   </ItemGroup>
 
 </Project>