WPF datagrid datagridtemplatecolumn image mouseenter show the image in big window
<DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding ImgUrl}" Width="200" Height="500"> <behavior:Interaction.Triggers> <behavior:EventTrigger EventName="MouseEnter"> <behavior:InvokeCommandAction Command="{Binding DataContext.MECmd,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}" CommandParameter="{Binding ImgUrl}"/> </behavior:EventTrigger> </behavior:Interaction.Triggers> </Image> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> private void MECmdExecuted(object obj) { string fullPath = System.IO.Path.GetFullPath(obj?.ToString()); if(System.IO.File.Exists(fullPath)) { ImageTbk img = new ImageTbk(); img.ImgSource=fullPath; img.ImgSourceStr=fullPath; img.ShowDialog(); } }
//usercontrol <Window x:Class="WpfApp350.ImageTbk" 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:WpfApp350" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800"> <Grid> <Image Source="{Binding ImgSource,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/> <TextBlock Text="{Binding ImgSourceStr,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Panel.ZIndex="2" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontSize="30" FontWeight="ExtraBold"/> </Grid> </Window> //cs using System; using System.Collections.Generic; using System.Linq; 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.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApp350 { /// <summary> /// Interaction logic for ImageTbk.xaml /// </summary> public partial class ImageTbk : Window { public ImageTbk() { InitializeComponent(); this.DataContext = this; } public string ImgSource { get { return (string)GetValue(ImgSourceProperty); } set { SetValue(ImgSourceProperty, value); } } // Using a DependencyProperty as the backing store for ImgSource. This enables animation, styling, binding, etc... public static readonly DependencyProperty ImgSourceProperty = DependencyProperty.Register("ImgSource", typeof(string), typeof(ImageTbk), new PropertyMetadata("")); public string ImgSourceStr { get { return (string)GetValue(ImgSourceStrProperty); } set { SetValue(ImgSourceStrProperty, value); } } // Using a DependencyProperty as the backing store for ImgSourceStr. This enables animation, styling, binding, etc... public static readonly DependencyProperty ImgSourceStrProperty = DependencyProperty.Register("ImgSourceStr", typeof(string), typeof(ImageTbk), new PropertyMetadata("")); } }
//xaml <Window x:Class="WpfApp350.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:behavior="http://schemas.microsoft.com/xaml/behaviors" xmlns:local="clr-namespace:WpfApp350" mc:Ignorable="d" WindowState="Maximized" Title="MainWindow" Height="450" Width="800"> <Window.DataContext> <local:BookVM/> </Window.DataContext> <Grid> <DataGrid ItemsSource="{Binding BooksCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" SelectedItem="{Binding SelectedBk,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" VirtualizingPanel.CacheLength="100" EnableRowVirtualization="True" EnableColumnVirtualization="True" CanUserAddRows="False" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="Id" Width="150" Binding="{Binding Id}"/> <DataGridTextColumn Header="Name" Width="150" Binding="{Binding Name}"/> <DataGridTemplateColumn> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Image Source="{Binding ImgUrl}" Width="200" Height="500"> <behavior:Interaction.Triggers> <behavior:EventTrigger EventName="MouseEnter"> <behavior:InvokeCommandAction Command="{Binding DataContext.MECmd,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Window}}}" CommandParameter="{Binding ImgUrl}"/> </behavior:EventTrigger> </behavior:Interaction.Triggers> </Image> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> </Grid> </Window> //cs using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.ComponentModel; using System.Linq; 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.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WpfApp350 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void CallMethodAction_DpiChanged(object sender, DpiChangedEventArgs e) { } } public class BookVM : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private void OnPropertyChanged(string propertyName) { var handler = PropertyChanged; if(handler!=null) { handler?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } public BookVM() { InitData(); InitCommands(); } private void InitCommands() { MECmd = new DelCmd(MECmdExecuted); } private void MECmdExecuted(object obj) { string fullPath = System.IO.Path.GetFullPath(obj?.ToString()); if(System.IO.File.Exists(fullPath)) { ImageTbk img = new ImageTbk(); img.ImgSource=fullPath; img.ImgSourceStr=fullPath; img.ShowDialog(); } } private void InitData() { BooksCollection = new ObservableCollection<Book>(); var imgsList = System.IO.Directory.GetFiles(@"../../Images"); int imgsCnt = imgsList.Count(); for(int i=0;i<10000;i++) { BooksCollection.Add(new Book() { Id = i + 1, Name = $"Name_{i + 1}", ImgUrl = imgsList[i % imgsCnt] }); } } private ObservableCollection<Book> booksCollection; public ObservableCollection<Book> BooksCollection { get { return booksCollection; } set { if (value != booksCollection) { booksCollection = value; OnPropertyChanged(nameof(BooksCollection)); } } } public void Image_MouseEnter(object sender, MouseEventArgs e) { } public DelCmd MECmd { get; set; } } public class Book { public int Id { get; set; } public string Name { get; set; } public string ImgUrl { get; set; } } public class DelCmd : ICommand { public event EventHandler CanExecuteChanged { add { CommandManager.RequerySuggested += value; } remove { CommandManager.RequerySuggested -= value; } } private Action<object> execute; private Predicate<object> canExecute; public DelCmd(Action<object> executeValue,Predicate<object> canExecuteValue) { execute= executeValue; canExecute= canExecuteValue; } public DelCmd(Action<object> executeValue):this(executeValue,null) { } public bool CanExecute(object parameter) { if(canExecute==null) { return true; } return canExecute(parameter); } public void Execute(object parameter) { execute(parameter); } } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现