HierarchicalDataTemplate
分层数据模板,用来定义分层数据样式的模板,一般多用于TreeViewItem。
TreeViewItem
Wpf
<HierarchicalDataTemplate x:Key="ItemNode" ItemsSource="{Binding Children}">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="{Binding IsCheck}" Tag="{Binding Node}"
Checked="ItemNode_Checked" Unchecked="ItemNode_Unchecked">
</CheckBox>
<TextBlock Grid.Column="1" Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3 0" />
<TextBlock Grid.Column="2" Text="{Binding DataVersionCacahe}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3 0" />
</Grid>
</HierarchicalDataTemplate>
Prism
<HierarchicalDataTemplate x:Key="ItemNode" ItemsSource="{Binding Children}">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
<ColumnDefinition Width="auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="0" IsChecked="{Binding IsCheck}" Tag="{Binding Node}" x:Name="TreeItemNode">
<b:Interaction.Triggers>
<b:EventTrigger EventName="Checked">
<b:InvokeCommandAction Command="{Binding DataContext.TreeItemNodeCheckedCommand, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
CommandParameter="{Binding ElementName=TreeItemNode}"/>
</b:EventTrigger>
<b:EventTrigger EventName="Unchecked">
<b:InvokeCommandAction Command="{Binding DataContext.TreeItemNodeUncheckedCommand, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
CommandParameter="{Binding ElementName=TreeItemNode}"/>
</b:EventTrigger>
</b:Interaction.Triggers>
</CheckBox>
<TextBlock Grid.Column="1" Text="{Binding Property1}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3 0" />
<TextBlock Grid.Column="2" Text="{Binding Property2}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="3 0" />
</Grid>
</HierarchicalDataTemplate>
<TreeView Name="TreeView1" ItemsSource="{Binding TreeView1Source}" ItemTemplate="{DynamicResource ItemNode}"
BorderThickness="0" Style="{DynamicResource TreeViewExpanded}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode ="Standard">
ItemsControl
与ListBox, ListView都是列表型控件,都使用ItemsPresenter来展示列表信息。
ItemsControl用于简单信息展示,不包含水平和垂直方向的滚动条。
<DataTemplate x:Key="DataTemplateKey1">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="SeparatorTextBlock" Text=";"/>
<TextBlock Text="{Binding}"/>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter Property="Visibility" TargetName="SeparatorTextBlock" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
<ItemsControl ItemsSource="{Binding DemoList}" ItemTemplate="{DynamicResource DataTemplateKey1}">
ItemTemplateSelector
设置ItemTemplateSelector的实例,可以为每项动态选择模板。
- 构建DataTemplateSelector派生类型,定义不同模板属性;
- 定义类型实例,并设计模板;
- ItemsControl引用;
public sealed class DemoDataTemplateSelector : DataTemplateSelector
{
public DataTemplate Card1DataTempalte { get; set; }
public DataTemplate Card2DataTempalte { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is DemoEntity entity)
{
if (entity.Type == 1)
{
return Card1DataTempalte;
}
return Card2DataTempalte;
}
return null;
}
}
<local:DemoDataTemplateSelector x:Key="demoDataTemplateSelector">
<local:DemoDataTemplateSelector.Card1DataTempalte>
<DataTemplate>
<Grid/>
</DataTemplate>
</local:DemoDataTemplateSelector.Card1DataTempalte>
<local:DemoDataTemplateSelector.Card2DataTempalte>
<DataTemplate>
<Grid/>
</DataTemplate>
</local:DemoDataTemplateSelector.Card2DataTempalte>
</local:DemoDataTemplateSelector>
<ItemsControl ItemsSource="{Binding }" ItemTemplateSelector="{StaticResource demoDataTemplateSelector}"/>
ListBox + Grid
ListBox 继承于ItemsControl,增加了一个Selector对象,Item支持选择;有水平和垂直方向滚动条。
wpf
<!--直接绑定单个属性 prop ObservableCollection<BitmapImage> EntityObj-->
<HierarchicalDataTemplate x:Key="ListItem" ItemsSource="{Binding}">
<Grid Background="Transparent">
<Image Source="{Binding}"/>
</Grid>
</HierarchicalDataTemplate>
<!--绑定多个属性的对象 prop ObservableCollection<EntityDto> EntityObj-->
<HierarchicalDataTemplate x:Key="ListItem" ItemsSource="{Binding}">
<Grid Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinitin Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0">
<Run Text="第"/>
<Run Text="{Binding ImageIndex}" />
<Run Text="张图:"/>
</TextBlock>
<ComboBox Grid.Column="1" SelectedValuePath="Key" DisplayMemberPath="Value" Width="100"
ItemsSource="{Binding ComboBoxDataResource}" SelectedIndex="{Binding ComboBoxIndex}"/>
<TextBox Grid.Column="2" Width="50" Text="{Binding IntervalSencond}"/>
<TextBlock Grid.Column="3" Margin="5" VerticalAlignment="Center" Text="s"/>
<Button Grid.Column="4" Content="X" Tag="{Binding Guid}" Click="ItemRemove_Click" Visibility="{Binding AddVisible}"
Width="32" Height="32" Style="{DynamicResource ButtonICOStyle}" HorizontalAlignment="Left" VerticalAlignment="Center">
<Button.Background>
<ImageBrush ImageSource="/My.Application;component/Image/Add.png"/>
</Button.Background>
</Button>
<Button Grid.Column="5" Content="+" Click="ItemAdd_Click" Visibility="{Binding RemoveVisible}"
Width="32" Height="32" Style="{DynamicResource ButtonICOStyle}" HorizontalAlignment="Left" VerticalAlignment="Center">
<Button.Background>
<ImageBrush ImageSource="/My.Application;component/Image/Delete.png"/>
</Button.Background>
</Button>
</Grid>
</HierarchicalDataTemplate>
Prism
分层数据样式的模板也支持自定义控件的属性依赖绑定。
<UserControl.Resources>
<HierarchicalDataTemplate x:Key="ListItem" ItemsSource="{Binding}">
<Grid Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5" Text="{Binding DisplayName}"/>
<comm:ProgressBarEx Grid.Row="1" PercentageVisible="False"
Value="{Binding DataContext.DisplayValue, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ListBoxItem}}}"/>
</Grid>
</HierarchicalDataTemplate>
</UserControl.Resources>
demo
<ListBox ItemsSource="{Binding EntityObj}" ItemTemplate="{DynamicResource ListItem}"
Width="{Binding Width, ElementName=GridMain}" ScrollViewer.VerticalScrollBarVisibility="Auto" FocusVisualStyle="{x:Null}" BorderThickness="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="3"/> <!--每行3列-->
<StackPanel Orientation="Vertical"/> <!--每行1列-->
<!--<WrapPanel IsItemsHost="True"/> 列数随宽度变化-->
<!--<comm:VirtualizingWrapPanel ScrollOffset="50" ChildHeight="64" ChildWidth="240"/> 大量对象虚化-->
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
如果想隐藏ListBox的样式,比如选择项的背景色,可以这样设置:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
ListBox + RadioButton
wpf
<HierarchicalDataTemplate x:Key="ListItem" ItemsSource="{Binding}">
<RadioButton x:Name="radioBtn" FontSize="14" GroupName="area">
<RadioButton.IsChecked>
<Binding Path="IsSelected" RelativeSource="{RelativeSource AncestorType=ListBoxItem}" Mode="TwoWay" />
</RadioButton.IsChecked>
<RadioButton.Content>
<Binding Path="Content" RelativeSource="{RelativeSource AncestorType=ListBoxItem}" Mode="TwoWay" />
</RadioButton.Content>
</RadioButton>
</HierarchicalDataTemplate>
prism
ListView
ListView继承于ListBox,增加了一个View依赖属性,可以展示表格形式。
<ListView ItemsSource="{Binding DemoList}">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="HeaderName1" DisplayMemberBinding="{Binding PropertyName1}" Width="*"/>
<GridViewColumn Header="HeaderName2" DisplayMemberBinding="{Binding PropertyName2}" Width="*"/>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
MenuItem