<ListBox ItemsSource="{Binding BooksCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<Viewbox>
<local:ImageTextblock
ImgUrl="{Binding DataContext.ImageUrl,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}"
TbkStr="{Binding DataContext.Name,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}"/>
</Viewbox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
![]()
//Customize control
//xaml
<UserControl x:Class="WpfApp364.ImageTextblock"
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:WpfApp364"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Image Source="{Binding ImgUrl}" Width="200" Height="500" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<TextBlock Text="{Binding TbkStr}"
HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" />
</Grid>
</UserControl>
//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 WpfApp364
{
/// <summary>
/// Interaction logic for ImageTextblock.xaml
/// </summary>
public partial class ImageTextblock : UserControl
{
public ImageTextblock()
{
InitializeComponent();
this.DataContext = this;
}
public string ImgUrl
{
get { return (string)GetValue(ImgUrlProperty); }
set { SetValue(ImgUrlProperty, value); }
}
// Using a DependencyProperty as the backing store for ImgUrl. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImgUrlProperty =
DependencyProperty.Register("ImgUrl", typeof(string),
typeof(ImageTextblock), new PropertyMetadata(null));
public string TbkStr
{
get { return (string)GetValue(TbkStrProperty); }
set { SetValue(TbkStrProperty, value); }
}
// Using a DependencyProperty as the backing store for TbkStr. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TbkStrProperty =
DependencyProperty.Register("TbkStr", typeof(string),
typeof(ImageTextblock), new PropertyMetadata(null));
}
}
<Window x:Class="WpfApp364.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:WpfApp364"
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}"
CanUserAddRows="False" AutoGenerateColumns="False"
VirtualizingPanel.VirtualizationMode="Recycling"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.IsContainerVirtualizable="True">
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Id}"/>
<DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
<DataGridTemplateColumn Header="Image">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<local:ImageTextblock ImgUrl="{Binding DataContext.ImageUrl,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGridRow}}}" Width="200" Height="500"
TbkStr="{Binding DataContext.Name,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type DataGridRow}}}"/>
--><!--<Grid>
<Image Source="{Binding ImageUrl,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Width="200" Height="500"/>
<TextBlock Text="{Binding Name,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
HorizontalAlignment="Stretch" VerticalAlignment="Center" />
</Grid>--><!--
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>-->
<ListBox ItemsSource="{Binding BooksCollection,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}">
<ListBox.ItemTemplate>
<DataTemplate>
<Viewbox>
<local:ImageTextblock
ImgUrl="{Binding DataContext.ImageUrl,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}"
TbkStr="{Binding DataContext.Name,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}"/>
</Viewbox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
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 WpfApp364
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public MainWindow()
{
InitializeComponent();
}
}
public class BookVM : INotifyPropertyChanged
{
public BookVM()
{
InitData();
}
private void InitData()
{
BooksCollection = new ObservableCollection<Book>();
var imgsList = System.IO.Directory.GetFiles(@"../../Images");
int imgsCnt = imgsList.Count();
for (int i = 0; i < 100000; i++)
{
BooksCollection.Add(new Book()
{
Id = i + 1,
Name = $"Name_{i + 1}",
ImageUrl = imgsList[i % imgsCnt]
});
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(string propName)
{
var handler = PropertyChanged;
if (handler != null)
{
handler?.Invoke(this, new PropertyChangedEventArgs(propName));
}
}
private ObservableCollection<Book> booksCollection;
public ObservableCollection<Book> BooksCollection
{
get
{
return booksCollection;
}
set
{
if (value != booksCollection)
{
booksCollection = value;
OnPropertyChanged(nameof(BooksCollection));
}
}
}
}
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 bool CanExecute(object parameter)
{
if (canExecute == null)
{
return true;
}
return canExecute(parameter);
}
public void Execute(object parameter)
{
execute(parameter);
}
}
public class Book
{
public int Id { get; set; }
public string Name { get; set; }
public string ImageUrl { get; set; }
}
}