WPF的ListView控件自定义布局用法实例

本文实例讲述了WPF的ListView控件自定义布局用法。分享给大家供大家参考，具体如下：

概要：

以源码的形式贴出，免得忘记后，再到网上查资料。在VS2008+SP1环境下调试通过

引用的GrayscaleEffect模块，可根据参考资料《Grayscale Effect...》中的位置下载。

正文：

如何布局是在App.xaml中定义源码如下

<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的布局模板-->
   <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的布局模板-->
   <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>
   <!--下面这段代码不用，选中的时候边框有些边会变成蓝色（不是你希望的颜色）-->
   <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>

如何引用在Windows1.xaml中定义源码如下

<ListView x:Name="listView1" ItemTemplate="{StaticResource myLVItemTemplate}"
    Template="{StaticResource myLVTemplate}" ItemContainerStyle="{StaticResource ItemContainerStyle}"
    Margin="0,4,0,4"  MouseDoubleClick="OnLocalFSOpen" Grid.Row="2">
 <!--下面定义WarpPanel，使Item项在容器里从左到右从上到下排列-->
 <ItemsControl.ItemsPanel>
   <ItemsPanelTemplate>
     <WrapPanel/>
   </ItemsPanelTemplate>
 </ItemsControl.ItemsPanel>
</ListView>

参考资料：

>>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/

希望本文所述对大家C#程序设计有所帮助。