WPF的ListView控件自定義布局用法實例

2020-01-24 01:03:54

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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/