ListView Control Custom Layout Usage Example for WPF
- 2021-11-01 04:20:52
- OfStack
This article illustrates the custom layout usage of ListView control in WPF. Share it for your reference, as follows:
Summary:
Post it in the form of source code, so as not to forget it and check the information on the Internet. Debugging passed under VS2008+SP1 environment
The referenced GrayscaleEffect module can be downloaded from the location in Resources "Grayscale Effect...".
Text:
How the layout is defined in App. xaml source code is as follows
<Application x:Class="CWebsSynAssistant.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:effect="clr-namespace:GrayscaleEffect;assembly=GrayscaleEffect"
StartupUri="Window1.xaml">
<Application.Resources>
<!-- ListView Layout template of -->
<ControlTemplate x:Key="myLVTemplate" TargetType="{x:Type ListView}">
<Grid>
<ScrollViewer x:Name="ScrollViewerElement"
Background="White"
VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Disabled">
<ItemsPresenter>
</ItemsPresenter>
</ScrollViewer>
</Grid>
</ControlTemplate>
<!-- ListViewItem Layout template of -->
<DataTemplate x:Key="myLVItemTemplate">
<Grid Name="myGrid" Width="70" Margin="8,8,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Name="img" Source="{Binding Path=ISource}" HorizontalAlignment="Center"
Width="32" Height="32" Stretch="UniformToFill"
ToolTip="{Binding Path=FullFileName}" >
<Image.Effect>
<effect:GrayscaleEffect x:Name="grayscaleEffect" DesaturationFactor="1.0"/>
</Image.Effect>
</Image>
<TextBlock Name="imgTitle" Text="{Binding Path=FileName}" Grid.Row="1" HorizontalAlignment="Center"
FontSize="10" FontFamily="Arial"
ToolTip="{Binding Path=FullFileName}" Margin="4,4,4,4" TextTrimming="CharacterEllipsis" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="True">
<Setter TargetName="myGrid" Property="Background" Value="White"/>
<Setter TargetName="imgTitle" Property="Background" Value="CadetBlue"/>
<Setter TargetName="imgTitle" Property="Foreground" Value="White"/>
<Setter TargetName="img" Property="Effect">
<Setter.Value>
<effect:GrayscaleEffect DesaturationFactor="0.5"/>
</Setter.Value>
</Setter>
<!--
<Setter TargetName="img" Property="Opacity" Value=".5"></Setter>
-->
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<!-- The following code is not used. When selected, some edges of the border will turn blue (not the color you want) -->
<Style TargetType="{x:Type ListViewItem}" x:Key="ItemContainerStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0" >
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
How to reference that source code define in Windows1.xaml as follows
<ListView x:Name="listView1" ItemTemplate="{StaticResource myLVItemTemplate}"
Template="{StaticResource myLVTemplate}" ItemContainerStyle="{StaticResource ItemContainerStyle}"
Margin="0,4,0,4" MouseDoubleClick="OnLocalFSOpen" Grid.Row="2">
<!-- The following definitions WarpPanel , make Item Items are arranged from left to right and top to bottom in the container -->
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ListView>
References:
>
>
WPF ListBox Tutorial
http://www.c-sharpcorner.com/uploadfile/mahesh/listbox-in-wpf/
>
>
Drag and drop, cut/copy and paste files with Windows Explorer
http://www.codeproject.com/Articles/14059/Drag-and-drop-cut-copy-and-paste-files-with-Window
>
>
Data Templating Overview
http://msdn.microsoft.com/en-us/library/ms742521.aspx
>
>
WPF ListBox Selection Color
http://stackoverflow.com/questions/794792/wpf-listbox-selection-color
>
>
WPF Tutorial - Using The ListView, Part 3 - In Place Edit
http://www.switchonthecode.com/tutorials/wpf-tutorial-using-the-listview-part-3-in-place-edit
>
>
Creating a Custom Markup Extension in WPF (and soon, Silverlight)
http://10rem.net/blog/2011/03/09/creating-a-custom-markup-extension-in-wpf-and-soon-silverlight
>
>
More WPF Custom Effects: Motion Blur and Grayscale Samples
http://windowsclient.net/wpf/wpf35/wpf-35sp1-more-effects.aspx
>
>
WPF Tutorial - Controls and Layout
http://www.mini.pw.edu.pl/~mossakow/materials/presentations/wpf.3.5/controls_layout/index.html
>
>
Grayscale Effect - A Pixel Shader Effect in WPF
http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html
>
>
ShaderPad - WPF ShaderEffects
http://shaderpad.codeplex.com/
More readers interested in C # can check the topic of this site: "C # Form Operation Skills Summary", "C # Common Control Usage Tutorial", "WinForm Control Usage Summary", "C # Programming Thread Use Skills Summary", "C # Operating Excel Skills Summary", "XML File Operation Skills Summary in C #", "C # Data Structure and Algorithm Tutorial", "C # Array Operation Skills Summary" and "C # Object-Oriented Programming Introduction Tutorial"
I hope this article is helpful to everyone's C # programming.