We Keep Coding

ListView Virtualization with FlowDocument as DataTemplate

As a self-set himself the task of writing the messenger (like Telegram, Viber, etc). To display the messages in the chat, I use ListView with FlowDocument as ItemTemplate . This control was chosen because:
1) It is necessary to display images (emoticons);
2) Hyperlinks;
3) It should be possible to select text to copy.
But the application consumes lots of memory, a feeling that FlowDocument not deleted from the memory.
It's my View:
<CollectionViewSource x:Key="ItemListViewSource"
IsLiveSortingRequested="True"
Source="{Binding RelativeSource={RelativeSource AncestorType=UserControl},
Path=Tag.Messages}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="date" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<Style x:Key="lvItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="White" />
<Setter Property="Padding" Value="0" />
<Setter Property="Focusable" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
BorderThickness="0"
Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="lvStyle" TargetType="{x:Type ListView}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="White" />
<Setter Property="SelectionMode" Value="Multiple" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="VirtualizingPanel.IsVirtualizing" Value="True" />
<Setter Property="VirtualizingPanel.ScrollUnit" Value="Pixel" />
<Setter Property="Margin" Value="0" />
<Setter Property="ItemContainerStyle" Value="{StaticResource lvItemStyle}" />
<Setter Property="Padding" Value="0" />
</Style>
<DataTemplate x:Key="MessageTemplate">
<Grid Margin="0,7,0,7">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="40"
Height="40"
Margin="5,0,10,0"
VerticalAlignment="Top"
Source="{Binding Converter={StaticResource getAvatarForChat},
Path=fromId,
Mode=OneWay,
ConverterParameter=40}">
<Image.Clip>
<EllipseGeometry Center="20,20"
RadiusX="20"
RadiusY="20" />
</Image.Clip>
</Image>
<TextBlock Grid.Row="0"
Grid.Column="1"
Margin="0"
VerticalAlignment="Top"
FontSize="13"
FontWeight="SemiBold"
Padding="0"
Text="{Binding chatTitle, Mode=OneWay" />
<TextBlock Grid.Row="0"
Grid.Column="2"
Margin="10,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="13"
FontWeight="ExtraLight"
Padding="0"
Text="{Binding Path=date,
Converter={StaticResource dateConverter},
ConverterParameter=HH:mm,
Mode=OneWay}" />
<FlowDocumentScrollViewer Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="0,3,0,0"
Document="{Binding message,
Converter={StaticResource documentConverter},
Mode=OneWay}"
Padding="0"/>
</Grid>
</DataTemplate>
<ListView x:Name="listView"
Grid.Row="0"
ItemsSource="{Binding Source={StaticResource ItemListViewSource},
NotifyOnTargetUpdated=True}""
ItemTemplate="StaticResource MessageTemplate"
Style="{StaticResource lvStyle}">
</ListView>
Please help me understand this problem, and I'm sorry for my english!

How to style the top-left corner of a WPF Toolkit DataGrid in XAML?

Related to this question: How to style the top-left corner of a DataGrid in XAML?
How to customize style for top-left corner of WPF-Toolkit's DataGrid
XAML:
<Window x:Class="Matrix_WPFToolkit_Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
Title="MainWindow" Height="350" Width="525">
<Grid>
<toolkit:DataGrid x:Name="dataGrid" IsReadOnly="True" HeadersVisibility="All" GridLinesVisibility="All" CanUserAddRows="False" CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserResizeRows="False" CanUserSortColumns="False" SelectionMode="Single" SelectionUnit="Cell" RowDetailsVisibilityMode="Visible" SelectionChanged="dataGrid_SelectionChanged" Margin="-1,0,1.4,0.4" SelectedCellsChanged="dataGrid_SelectedCellsChanged">
<toolkit:DataGrid.RowHeaderTemplate>
<DataTemplate>
<TextBlock Text="1"/>
</DataTemplate>
</toolkit:DataGrid.RowHeaderTemplate>
<toolkit:DataGrid.ColumnHeaderStyle>
<Style TargetType="toolkit:DataGridColumnHeader">
<Setter Property="Background" Value="Gray"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Black"/>
</Style>
</toolkit:DataGrid.ColumnHeaderStyle>
<toolkit:DataGrid.RowHeaderStyle>
<Style TargetType="toolkit:DataGridRowHeader">
<Setter Property="Background" Value="Gray"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</toolkit:DataGrid.RowHeaderStyle>
<toolkit:DataGrid.CellStyle>
<Style TargetType="toolkit:DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="LightGray" />
<Setter Property="Foreground" Value="Black" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</toolkit:DataGrid.CellStyle>
<toolkit:DataGrid.RowStyle>
<Style TargetType="toolkit:DataGridRow">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</toolkit:DataGrid.RowStyle>
</toolkit:DataGrid>
</Grid>
Here I have customized the row header template, column heade style, cell selection style. How to style top-left corner cell in the data-grid (WPF Toolkit's)

Try this, changing Fill color on IsMouseOver:
<Window
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:WpfApplication2"
xmlns:Custom="http://schemas.microsoft.com/wpf/2008/toolkit"
x:Class="WpfApplication2.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<ControlTemplate x:Key="SelectAllButtonTemplate" TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="Border"
Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"
SnapsToDevicePixels="True" />
<Polygon x:Name="Arrow"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="8,8,3,3"
Opacity="0.15"
Fill="Black"
Stretch="Uniform"
Points="0,10 10,10 10,0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Stroke" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
<Setter TargetName="Border" Property="Fill" Value="Red" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Border" Property="Fill" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Arrow" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="DataGridStyle1" TargetType="{x:Type Custom:DataGrid}">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderBrush" Value="#FF688CAF" />
<Setter Property="BorderThickness" Value="1" />
<!-- This is needed to force DG to have a non-default value. Otherwise the DGR.DetailsVisibility cannot have a value of VisibleWhenSelected by default. -->
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Custom:DataGrid}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True"
Padding="{TemplateBinding Padding}">
<ScrollViewer Focusable="false"
Name="DG_ScrollViewer">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--Left Column Header Corner -->
<Button Command="{x:Static Custom:DataGrid.SelectAllCommand}"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=CellsPanelHorizontalOffset}"
Template="{StaticResource SelectAllButtonTemplate}"
Focusable="false"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=HeadersVisibility, Converter={x:Static Custom:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static Custom:DataGridHeadersVisibility.All}}" />
<!--Column Headers-->
<Custom:DataGridColumnHeadersPresenter Grid.Column="1"
Name="PART_ColumnHeadersPresenter"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=HeadersVisibility, Converter={x:Static Custom:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static Custom:DataGridHeadersVisibility.Column}}"/>
<!--DataGrid content-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="1" Grid.ColumnSpan="2" CanContentScroll="{TemplateBinding CanContentScroll}" />
<ScrollBar Grid.Row="1" Grid.Column="2" Name="PART_VerticalScrollBar"
Orientation="Vertical"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{Binding Path=VerticalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<Grid Grid.Row="2" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=NonFrozenColumnsViewportHorizontalOffset}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollBar Grid.Column="1"
Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{Binding Path=HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Window.DataContext>
<local:MyViewModel/>
</Window.DataContext>
<Grid>
<Custom:DataGrid x:Name="dataGrid1" Margin="0" ItemsSource="{Binding Data}" Style="{StaticResource DataGridStyle1}"/>
</Grid>

Style ListBoxItem to use complete width of parent element [duplicate]

I have a grid as the datatemplate for items in a listbox and it's not filling the whole width of the control. I have tried the suggestions in the other questions but they are not working:
This is the listbox xaml
<ListBox ItemsSource="{Binding AccessControl.Credentials}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0">Name</Label>
<Label Grid.Column="0" Grid.Row="1">Attribute</Label>
<Label Grid.Column="2" Grid.Row="1">Value</Label> </Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and I am using a theme file from the following project: http://wpfthemes.codeplex.com/ here is the relevant part:
<Style TargetType="{x:Type ListBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Background="{DynamicResource ControlBackgroundBrush}">
<ScrollViewer Margin="1" Focusable="false" Foreground="{TemplateBinding Foreground}">
<StackPanel Margin="2" IsItemsHost="true" />
</ScrollViewer>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Background="#A5FFFFFF" BorderBrush="#66FFFFFF" BorderThickness="1" Opacity="0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="DisabledVisualElement" Value="1" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Did I miss something?

You need to make the ListBoxItems stretch their content, either by changing the respective property on the ListBox:
<ListBox HorizontalContentAlignment="Stretch" ...>
...or by setting it on the items via the ItemContainerStyle:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
By default both will work as the ListBoxItem default style binds the HorizontalContentAlignment property to the owning ListBox's property.

WPF Textbox and Label are overlapping

I am learning WPF (Windows Presentation Foundation) on Visual Studio 2013. I have an issue with the layout of elements. I am using stackpanel and grid for element layout. Here is the simple layout which i have created:
... code omitted....
<StackPanel Style="{StaticResource ersStackPanel}">
<Grid Style="{StaticResource ersGrid}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="497*"/>
</Grid.ColumnDefinitions>
<Label Content="Elector's record scrapper" Style="{StaticResource ersHeadLabel}" />
</Grid>
<Grid Style="{StaticResource ersGrid}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="347*"/>
</Grid.ColumnDefinitions>
<Label Content="VS" Style="{StaticResource ersLabel}"/>
<TextBox x:Name="VS" Grid.Column="1" Style="{StaticResource ersTextBox}" />
<Label Content="EV" Grid.Row="1" Style="{StaticResource ersLabel}"/>
<TextBox x:Name="EV" Grid.Row="1" Grid.Column="1" Style="{StaticResource ersTextBox}" />
<Label Content="ENo." Grid.Row="2" Style="{StaticResource ersLabel}"/>
<TextBox x:Name="ENo" Grid.Row="2" Grid.Column="1" Style="{StaticResource ersTextBox}" />
<Label Content="Select" Grid.Row="3" Style="{StaticResource ersLabel}"/>
<ComboBox Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="120" FontFamily="Verdana" FontSize="10" Background="White"/>
</Grid>
</StackPanel>
... code omitted...
Style Resource
<Window.Resources>
<Style x:Key="ersTextBox" BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="FontFamily" Value="Verdana"></Setter>
<Setter Property="FontWeight" Value="Medium"></Setter>
<Setter Property="Width" Value="250"></Setter>
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="Height" Value="23"></Setter>
<Setter Property="TextWrapping" Value="Wrap"></Setter>
</Style>
<Style x:Key="ersLabel" BasedOn="{StaticResource {x:Type Label}}" TargetType="{x:Type Label}">
<Setter Property="FontFamily" Value="Verdana"></Setter>
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}"></Setter>
<Setter Property="HorizontalAlignment" Value="Right"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="Width" Value="auto"></Setter>
</Style>
<Style x:Key="ersHeadLabel" BasedOn="{StaticResource ResourceKey=ersLabel}" TargetType="{x:Type Label}">
<Setter Property="FontSize" Value="20"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
</Style>
<Style x:Key="ersStackPanel" TargetType="{x:Type StackPanel}">
<Setter Property="Width" Value="497"></Setter>
<Setter Property="Height" Value="44"></Setter>
<Setter Property="VerticalAlignment" Value="Top"></Setter>
<Setter Property="HorizontalAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,10,0,0"></Setter>
</Style>
<Style x:Key="ersGrid" TargetType="{x:Type Grid}">
<Setter Property="Height" Value="44"></Setter>
</Style>
</Window.Resources>
The problem is that all elements (Label, TextBox ..) are overlapping each other, Why they are not positioning like a stack (one after another) ??

If you are using grid layout you need to define rows and columns. If u don't define them, XAML will stack them one over the other. The last element defined will be the visible one.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="A"/> // The first is assumed that it is Grid.Row="0" Grid.Column="0"
<TextBlock Grid.Row="0" Grid.Column="1" Text="B"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="C"/>
<TextBlock Grid.Row="1" Grid.Column="1" Text="D"/>
</Grid>
This will look like this:
A B
C D
In your code the problem is that you are setting elements to the second, third and fourth row, but you didn't defined the rows in the first place.
Also remember that enumeration is Zero-based (First row is actually 0).

How to make WPF ListView horizontal with contained image stretched to fit the height?

I want a gallery that shows images with labels in a horizontal ListView.
Each list item is merely an image with a label:
<DataTemplate x:Key="ImageItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="{Binding Title}" />
</Grid>
</DataTemplate>
To make the ListView horizontal, I replace the ListView.ItemsPanel with a horizontal StackPanel:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Now I got something like this:
But I want each image to stretch to take the full height of the ListView (minus enough height for the label), while maintaining the aspect ratio, so I replace the ListView.ItemContainerStyle:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
But I have no idea why the width of each item is not stretched but instead cut:
Please help, thanks!
EDIT:
The whole xaml is shown as follows:
<UserControl x:Class="Test.ImageGalleryControl"
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"
mc:Ignorable="d">
<UserControl.Resources>
<DataTemplate x:Key="ImageItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="{Binding Title}" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListView x:Name="MyImageList" ItemTemplate="{StaticResource ImageItemTemplate}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</UserControl>

Try this
by setting ListView height to Itemtemplate (grid).
<ListView x:Name="MyImageList">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="fghfgh" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Update
by setting VerticalScrollBarVisibility="Hidden" or disabled and adding margin you can solve this problem but proper solution is below
this verticalscrollbar is coming due to default margin and padding in Listview and ListviewItem default style..you can achieve desired result by editing style of listview and listviewItem
working sample(without vertical scrollbar)
Resource
<Window.Resources>
<Style TargetType="{x:Type ListView}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="#FFABADB3"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" Height="{TemplateBinding Height}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="0" SnapsToDevicePixels="True">
<ScrollViewer Focusable="False" Padding="0" >
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="Bd" Value="White"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFD9D9D9"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="True"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" Margin="0,-1,5,-1" SnapsToDevicePixels="True">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="#1F26A0DA"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#A826A0DA"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="#3DDADADA"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFDADADA"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
window
<ListView x:Name="MyImageList">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="fghfgh"/>
</Grid>
<Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="fghfgh"/>
</Grid>
</ListView>

Try now to change the stretch property. Hmm, can't add the code somewhy...
try setting Stretch="Uniform" to the image
<Image Grid.Row="0" Source="{Binding Image}" Stretch="Uniform" />

<Image Grid.Row="0" Source="{Binding Image}" Stretch="Fill" />
but, it will not maintain the aspect ratio of the image, Use Stretch="Uniform" to keep the aspect ratio regardless the size of the image control.
You can statically specify the Height of the image control and use Stretch="Uniform" to adjust both aspect ratio and the size of the image control.

a simple solution using ItemsControl
<Grid>
<Grid.Resources>
<DataTemplate x:Key="ImageItemTemplate">
<Grid Height="{Binding ActualHeight,RelativeSource={RelativeSource FindAncestor,AncestorType=ItemsControl}}"
Margin="2,2,2,-25"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="{Binding Title}" />
</Grid>
</DataTemplate>
</Grid.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Hidden">
<ItemsControl x:Name="MyImageList"
ItemTemplate="{StaticResource ImageItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>

"a simple solution using ItemsControl" by #pushpraj really helped me after a prolonged search for a similar feature. I'm new to WPF but still tried with ListView and Ribbon with ItemsControl templates, but didnt get the result that I wanted. A small alteration to fit my requirement, I made the Image stretch to uniform, Stretch="Uniform". Thanks for the blog.