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">

ListBox + Grid

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"/> 列数随宽度变化-->
        </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

MenuItem