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的实例，可以为每项动态选择模板。

1. 构建DataTemplateSelector派生类型，定义不同模板属性；
2. 定义类型实例，并设计模板；
3. 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