如何在ItemsControl绑定内容之外添加标签？附Channel模型相关代码

嘿，我来给你几个实用的方案，帮你在ItemsControl绑定的Channels内容之外添加额外标签：

方案1：用布局容器直接包裹（最简单） #

如果只是需要在集合内容的前后固定位置加标签，直接把ItemsControl和额外的TextBlock（或其他标签控件）放在同一个布局容器里就行，比如StackPanel：

<StackPanel Orientation="Horizontal">
    <!-- 前置标签 -->
    <TextBlock Text="频道列表：" Margin="0 0 10 0" FontWeight="Bold"/>
    <!-- 原有的ItemsControl -->
    <ItemsControl ItemsSource="{Binding Path=Channels}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <!-- 你的Channel项模板 -->
            <DataTemplate>
                <Border Margin="5" Padding="3" BorderBrush="Gray" BorderThickness="1">
                    <StackPanel>
                        <TextBlock Text="{Binding ChannelString}"/>
                        <CheckBox IsChecked="{Binding IsSet}" Content="已设置"/>
                    </StackPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
    <!-- 后置标签 -->
    <TextBlock Text="全部加载完成" Margin="10 0 0 0" Foreground="Gray"/>
</StackPanel>

这个方案的优势是零额外复杂度，完全贴合你的现有代码结构。

方案2：利用ItemsControl原生的Header/Footer属性 #

WPF的ItemsControl自带Header和Footer属性，可以直接用来添加前后的标签内容，还能通过HeaderTemplate和FooterTemplate自定义样式：

<ItemsControl ItemsSource="{Binding Path=Channels}"
              Header="我的频道"
              Footer="共 {Binding Channels.Count} 个频道">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <!-- 自定义Header样式 -->
    <ItemsControl.HeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" FontWeight="Bold" Margin="0 0 10 0" FontSize="14"/>
        </DataTemplate>
    </ItemsControl.HeaderTemplate>
    <!-- 自定义Footer样式 -->
    <ItemsControl.FooterTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" Margin="10 0 0 0" Foreground="DarkGray"/>
        </DataTemplate>
    </ItemsControl.FooterTemplate>
    <ItemsControl.ItemTemplate>
        <!-- 你的Channel项模板 -->
        <DataTemplate>
            <Border Margin="5" Padding="3" BorderBrush="Gray" BorderThickness="1">
                <StackPanel>
                    <TextBlock Text="{Binding ChannelString}"/>
                    <CheckBox IsChecked="{Binding IsSet}" Content="已设置"/>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

这个方案更符合WPF控件的设计规范，Header和Footer会自动融入ItemsControl的布局，比如如果后续给ItemsControl加滚动容器，Header/Footer还能设置为固定显示。

方案3：用CompositeCollection混合集合项和额外元素 #

如果需要把额外标签插入到集合内容的中间（比如在第N个频道后加标签），可以用CompositeCollection，它能把绑定的集合和单个元素组合在一起：

<ItemsControl>
    <ItemsControl.ItemsSource>
        <CompositeCollection>
            <!-- 插入在最前面的标签 -->
            <TextBlock Text="热门频道：" FontWeight="Bold" Margin="0 0 10 0"/>
            <!-- 绑定原有的Channels集合 -->
            <CollectionContainer Collection="{Binding Path=Channels}"/>
            <!-- 插入在最后的标签 -->
            <TextBlock Text="查看更多频道 →" Margin="10 0 0 0" Foreground="Blue"/>
        </CompositeCollection>
    </ItemsControl.ItemsSource>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <!-- 因为混合了不同类型的元素，需要用触发器区分模板 -->
        <DataTemplate>
            <ContentControl>
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <!-- 针对Channel类型的项模板 -->
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding}" Value="{x:Type local:Channel}">
                                <Setter Property="ContentTemplate">
                                    <Setter.Value>
                                        <DataTemplate>
                                            <Border Margin="5" Padding="3" BorderBrush="Gray" BorderThickness="1">
                                                <StackPanel>
                                                    <TextBlock Text="{Binding ChannelString}"/>
                                                    <CheckBox IsChecked="{Binding IsSet}" Content="已设置"/>
                                                </StackPanel>
                                            </Border>
                                        </DataTemplate>
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                            <!-- 直接显示添加的TextBlock元素 -->
                            <DataTrigger Binding="{Binding}" Value="{x:Type TextBlock}">
                                <Setter Property="Content" Value="{Binding}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

注意：这里需要把local替换成你的Channel类所在的命名空间，比如xmlns:local="clr-namespace:YourAppNamespace"。

你可以根据自己的需求选择最合适的方案：只是前后加固定标签选方案1或2，要和集合项混合排列选方案3。

内容的提问来源于stack exchange，提问作者Areeb Qaisar