C# WPF窗口中如何创建带文本标签的分隔控件?
在WPF中创建带文本标签的分隔符的几种方法
嘿,我来给你说说在WPF里怎么实现带文本标签的分隔符~你提到的<separator/>确实是基础的分隔控件,但它本身没法直接添加文本标签,不过我们可以用几种简单又灵活的方式搞定这个需求:
方案1:用Grid手动组合(最灵活易上手)
这种方式可以完全自定义样式,比如调整分隔线的粗细、颜色,标签的位置和字体样式,直接把TextBlock和两个Separator用Grid拼在一起,让标签“嵌”在分隔线中间:
<Grid Height="20" Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!-- 左侧分隔线 --> <Separator Grid.Column="0" VerticalAlignment="Center" Background="#CCCCCC"/> <!-- 标签文本 --> <TextBlock Grid.Column="1" Text="用户信息" Margin="8,0" Foreground="#666666" FontSize="12"/> <!-- 右侧分隔线 --> <Separator Grid.Column="2" VerticalAlignment="Center" Background="#CCCCCC"/> </Grid>
你可以根据需求随意调整Margin、颜色、字体这些属性,甚至给TextBlock加个浅背景色,让标签更突出。
方案2:使用HeaderedContentControl(贴合WPF控件体系)
如果想让这个带标签的分隔符更像一个标准WPF控件,可以用HeaderedContentControl,把它的Content设为Separator,Header就是你的标签文本,再自定义模板让它呈现成分隔线的样子:
<HeaderedContentControl Header="系统设置" HorizontalContentAlignment="Stretch"> <HeaderedContentControl.Template> <ControlTemplate TargetType="HeaderedContentControl"> <Grid Height="20"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Separator Grid.Column="0" VerticalAlignment="Center"/> <ContentPresenter Grid.Column="1" Content="{TemplateBinding Header}" Margin="8,0"/> <Separator Grid.Column="2" VerticalAlignment="Center"/> </Grid> </ControlTemplate> </HeaderedContentControl.Template> </HeaderedContentControl>
这种方式的好处是可以把这个模板抽出来,放到资源字典里定义成全局样式,以后需要的时候直接复用就行,不用重复写代码。
方案3:自定义控件(适合频繁复用场景)
如果你的项目里经常需要这种带标签的分隔符,不如直接封装成一个自定义控件,用起来就像普通控件一样顺手:
首先写后台C#代码:
public class LabeledSeparator : Control { public static readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string), typeof(LabeledSeparator), new PropertyMetadata(string.Empty)); public string Label { get => (string)GetValue(LabelProperty); set => SetValue(LabelProperty, value); } static LabeledSeparator() { DefaultStyleKeyProperty.OverrideMetadata(typeof(LabeledSeparator), new FrameworkPropertyMetadata(typeof(LabeledSeparator))); } }
然后在Generic.xaml里定义默认样式:
<Style TargetType="{x:Type local:LabeledSeparator}"> <Setter Property="Height" Value="20"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type local:LabeledSeparator}"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Separator Grid.Column="0" VerticalAlignment="Center" Background="{TemplateBinding Background}"/> <TextBlock Grid.Column="1" Text="{TemplateBinding Label}" Margin="8,0" Foreground="{TemplateBinding Foreground}"/> <Separator Grid.Column="2" VerticalAlignment="Center" Background="{TemplateBinding Background}"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
之后使用的时候就非常简单了:
<local:LabeledSeparator Label="高级选项" Background="#999" Foreground="#333"/>
内容的提问来源于stack exchange,提问作者Victor




