本文实例讲述了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: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
>
|