WPF ListView控件布局自定义示例

正文

    如何布局是在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模块来源于下面的网址
                        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,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>