ListBox與控件模板
- 一、 ListBox默認控件模板詳解
- 二、ItemsPresenter集合數據呈現
- 1. 概述
- 2. 示例
- 三、 ListView默認控件模板詳解
- 1. 概述
- 2. 示例
一、 ListBox默認控件模板詳解
WPF 中的大多數控件都有默認的控件模板。
這些模板定義了控件的默認外觀和行為,包括控件的布局、背景、前景、邊框、內容等。
官方文檔:https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/listbox-styles-and-templates
在工具箱拖入Button控件,鼠標右鍵→編輯模板→編輯副本
更改此模板來定制列表框的一些顯示,比如一直顯示水平垂直滾動條,可以直接更改Auto為 Visible:
演示效果如下:
二、ItemsPresenter集合數據呈現
1. 概述
ltemsPresenter類在控件模板中顯示集合數據的一個占位符,以便在運行時將其替換為所有集合數據。
而ContentPresenter則只能顯示單一內容。
官方文檔:https://learn.microsoft.com/zh-cn/dotnet/api/system.windows.controls.itemspresenter?view=netframework-4.8
2. 示例
代碼和運行結果如下
<Grid><ListBox x:Name="listBox" d:ItemsSource="{d:SampleData ItemCount=5}" Width="300" Height="200"><ListBox.Template><ControlTemplate TargetType="ListBox"><Border BorderBrush="Aqua" BorderThickness="2" CornerRadius="50"><!--如果要多次呈現內容,需要使用布局--><StackPanel><ItemsPresenter/><Rectangle Width="auto" Height="10" Fill="Red"/><ItemsPresenter/></StackPanel></Border></ControlTemplate></ListBox.Template></ListBox></Grid>
public class Stu{public int Id { get; set; }public string Name { get; set; }public int Score { get; set; }public Stu(int id, string name, int score){Id = id;Name = name;Score = score;}}public partial class MainWindow : Window{public MainWindow(){InitializeComponent();List<Stu> list = new List<Stu>{new Stu(1, "張三",100),new Stu(2, "李四", 80),new Stu(3, "王五", 75)};listBox.DisplayMemberPath = "Name";listBox.ItemsSource = list;}}
三、 ListView默認控件模板詳解
1. 概述
官方文檔:https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/controls/listview-styles-and-templates
在工具箱拖入ListView控件,刪除<ListView.View></ListView.View>內的所有內容,鼠標右鍵→編輯模板→編輯副本
2. 示例
參照官方文檔中示例:
<!--創建標題和內容模板--><Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}" TargetType="ScrollViewer"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ScrollViewer"><Grid Background="{TemplateBinding Background}" ShowGridLines="True"><!--第二行,第二列為滾動條,可設置Visibility屬性為True--><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="Auto" /></Grid.RowDefinitions><DockPanel Margin="{TemplateBinding Padding}"><!--頭部標題--><ScrollViewer DockPanel.Dock="Top"HorizontalScrollBarVisibility="Hidden"VerticalScrollBarVisibility="Hidden"Focusable="false"><GridViewHeaderRowPresenter Margin="2,0,2,0"Columns="{Binding Path=TemplatedParent.View.Columns, RelativeSource={RelativeSource TemplatedParent}}"ColumnHeaderContainerStyle="{Binding Path=TemplatedParent.View.ColumnHeaderContainerStyle, RelativeSource={RelativeSource TemplatedParent}}"ColumnHeaderTemplate="{Binding Path=TemplatedParent.View.ColumnHeaderTemplate,RelativeSource={RelativeSource TemplatedParent}}"ColumnHeaderTemplateSelector="{Binding Path=TemplatedParent.View.ColumnHeaderTemplateSelector, RelativeSource={RelativeSource TemplatedParent}}"AllowsColumnReorder="{Binding Path=TemplatedParent.View.AllowsColumnReorder, RelativeSource={RelativeSource TemplatedParent}}"ColumnHeaderContextMenu="{Binding Path=TemplatedParent.View.ColumnHeaderContextMenu, RelativeSource={RelativeSource TemplatedParent}}"ColumnHeaderToolTip="{Binding Path=TemplatedParent.View.ColumnHeaderToolTip, RelativeSource={RelativeSource TemplatedParent}}"SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" /></ScrollViewer><!--滾動內容--><ScrollContentPresenter Name="PART_ScrollContentPresenter"KeyboardNavigation.DirectionalNavigation="Local"CanContentScroll="True"CanHorizontallyScroll="False"CanVerticallyScroll="False" /></DockPanel><!--定義水平滾動條--><ScrollBar Name="PART_HorizontalScrollBar"Orientation="Horizontal"Grid.Row="1"Maximum="{TemplateBinding ScrollableWidth}"ViewportSize="{TemplateBinding ViewportWidth}"Value="{TemplateBinding HorizontalOffset}"Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" /><!--定義垂直滾動條--><ScrollBar Name="PART_VerticalScrollBar"Grid.Column="1"Maximum="{TemplateBinding ScrollableHeight}"ViewportSize="{TemplateBinding ViewportHeight}"Value="{TemplateBinding VerticalOffset}"Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" /></Grid></ControlTemplate></Setter.Value></Setter></Style><Color x:Key="ControlLightColor">White</Color><Color x:Key="BorderMediumColor">#FF888888</Color><Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color><Style x:Key="{x:Type ListView}"
TargetType="ListView"><Setter Property="SnapsToDevicePixels" Value="true" /><Setter Property="OverridesDefaultStyle" Value="true" /><Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /><Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /><Setter Property="ScrollViewer.CanContentScroll" Value="true" /><Setter Property="VerticalContentAlignment" Value="Center" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListView"><Border Name="Border" BorderThickness="1"><Border.Background><SolidColorBrush Color="{StaticResource ControlLightColor}" /></Border.Background><Border.BorderBrush><SolidColorBrush Color="{StaticResource BorderMediumColor}" /></Border.BorderBrush><ScrollViewer Style="{DynamicResource{x:Static GridView.GridViewScrollViewerStyleKey}}"><ItemsPresenter /></ScrollViewer></Border><ControlTemplate.Triggers><Trigger Property="IsGrouping" Value="true"><Setter Property="ScrollViewer.CanContentScroll" Value="false" /></Trigger><Trigger Property="IsEnabled" Value="false"><Setter TargetName="Border" Property="Background"><Setter.Value><SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" /></Setter.Value></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style>
下面為簡潔模式,不含標題行
<Style x:Key="myCT" TargetType="ListView"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListView"><Border Name="Border" BorderBrush="red" BorderThickness="1"><ScrollViewer><ItemsPresenter /></ScrollViewer></Border></ControlTemplate></Setter.Value></Setter>
</Style>