WPF listbox ListboxItem Image MouseEnter expand and MouseLeave shrink

<Window x:Class="WpfApp19.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:WpfApp19"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">   
    <Grid>
        <ListBox x:Name="lbx"
                ItemsSource="{Binding BooksCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
            <ListBox.Resources>              
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid Height="500">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Border Grid.Column="0"
                                x:Name="border">
                            <Image 
                               Width="50"
                               Height="50"
                               Source="{Binding DataContext.ImgSource,RelativeSource={RelativeSource 
                            Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}">
                                <Image.Triggers>
                                    <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"
                                                             To="500"
                                                             Duration="0:0:1"/>
                                                <DoubleAnimation Storyboard.TargetProperty="Height"
                                                             To="500"
                                                             Duration="0:0:1"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="Width"
                                                             To="50"
                                                             Duration="0:0:1"/>
                                                <DoubleAnimation Storyboard.TargetProperty="Height"
                                                             To="50"
                                                             Duration="0:0:1"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </EventTrigger>
                                    <EventTrigger RoutedEvent="Mouse.MouseDown">

                                    </EventTrigger>
                                </Image.Triggers>
                            </Image> 
                        </Border>

                        <TextBlock Grid.Column="1"
                                   Text="{Binding DataContext.ISBN,RelativeSource={RelativeSource 
                            Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}">
                            <TextBlock.Resources>
                                <Style TargetType="{x:Type TextBlock}">
                                    <Setter Property="FontSize" Value="50"/>
                                    <Setter Property="HorizontalAlignment" Value="Center"/>
                                    <Setter Property="VerticalAlignment" Value="Center"/>
                                    <Setter Property="TextWrapping" Value="WrapWithOverflow"/>
                                    <Style.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Foreground" Value="Red"/>
                                            <Setter Property="FontWeight" Value="ExtraBold"/>
                                            <Setter Property="FontStretch" Value="ExtraExpanded"/>
                                            <Setter Property="FontSize" Value="100"/>
                                        </Trigger>
                                    </Style.Triggers>
                                </Style>
                            </TextBlock.Resources>
                        </TextBlock>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>


//cs
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Runtime.CompilerServices;
using System.Text;
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.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp19
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            var vm = new MainVM();
            this.DataContext = vm;
        }
    }

    public class MainVM : INotifyPropertyChanged
    {
        public MainVM()
        {
            InitBooksCollection();
        }

        private void InitBooksCollection()
        {
            var imgsDir = @"../../../Images";
            if (Directory.Exists(imgsDir))
            {
                var imgs = Directory.GetFiles(imgsDir);
                int imgsCount = imgs.Count();
                BooksCollection = new ObservableCollection<Book>();
                for (int i = 0; i < 100; i++)
                {
                    BooksCollection.Add(new Book()
                    {
                        ImgSource = GetImgSourceViaUrl(imgs[i % imgsCount]),
                        ISBN = $"{i + 1}_{Guid.NewGuid().ToString("N")}"
                    });
                }
            }
        }

        private ImageSource GetImgSourceViaUrl(string imgUrl)
        {
            if (!File.Exists(imgUrl))
            {
                return null;
            }

            BitmapImage bmi = new BitmapImage();
            bmi.BeginInit();
            bmi.UriSource = new Uri(imgUrl, UriKind.RelativeOrAbsolute);
            bmi.EndInit();
            if (bmi.CanFreeze)
            {
                bmi.Freeze();
            }
            return bmi;
        }

        public event PropertyChangedEventHandler? PropertyChanged;
        public void OnPropertyChanged([CallerMemberName]string propertyName="")
        {
            var handler = PropertyChanged;
            if(handler!=null)
            {
                handler?.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        private ObservableCollection<Book> booksCollection;
        public ObservableCollection<Book> BooksCollection
        {
            get
            {
                return booksCollection;
            }
            set
            {
                if(value!= booksCollection)
                {
                    booksCollection = value;
                    OnPropertyChanged(nameof(BooksCollection));
                }
            }
        }
    }

    public class Book
    {
        public ImageSource ImgSource { get; set; }
        public string ISBN { get; set; }
    }
}

 

 

 

 

 

 

 

 

posted @ 2025-05-17 21:24  FredGrit  阅读(5)  评论(0)    收藏  举报