You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动