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: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中定义源码如下

1 2 3 4 5 6 7 8 9 10

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