WPF ListView控件布局自定义示例

kagula 2012-04-12

概要

     以源码的形式贴出，免得忘记后，再到网上查资料。在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">
                <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模块来源于下面的网址
                        http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html
                        -->
                        <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" 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"   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/