WPF的ListView控件自定義布局用法實例
阿新 • • 發佈：2017-05-24
color xaml center control highlight auto 顏色 ble sca
本文實例講述了WPF的ListView控件自定義布局用法。分享給大家供大家參考，具體如下：
概要：
以源碼的形式貼出，免得忘記後，再到網上查資料。在VS2008+SP1環境下調試通過
引用的GrayscaleEffect模塊，可根據參考資料《Grayscale Effect...》中的位置下載。
正文：
如何布局是在App.xaml中定義源碼如下
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<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>
|
WPF的ListView控件自定義布局用法實例