Horizontal separator with a line and a label in C# WPF window

Question

In a C# WPF window, what control can I use to create a separator with a text label, for example:

Note: I am aware of <separator/> (as in the answer to the alleged duplicate question), but I couldn't find how to add a text label to it.

score 6 · Accepted Answer · answered Feb 08 '18 at 20:18

6

Try this,

    <DockPanel Height="25">
        <Label DockPanel.Dock="Left" Content="SomeText"/>
        <Separator/>
    </DockPanel>

answered Feb 08 '18 at 20:18

Aleksandar

276
1
10

Do you know why this seems to work well with `DockPanel` but not so much with `StackPanel` (specifically horizontal StackPanel)? – Sudsy1002 Feb 08 '18 at 20:21
@Sudsy1002 You can't stretch items in StackPanel while in DockPanel if you don't define items Dock location it will be stretched across whole DockPanel. – Aleksandar Feb 08 '18 at 20:22

score 2 · Answer 2 · answered Feb 08 '18 at 20:22

2

I would use a groupbox and then style it to only show the top border

<GroupBox Header="Margins" BorderThickness="0,1,0,0">

answered Feb 08 '18 at 20:22

gcores

12,376
2
49
45

score 0 · Answer 3 · answered Feb 08 '18 at 20:27

<separator/> doesn't support text. So, some options are, use a grid to separate you text and your separator, like this:

<Grid Height="15">
     <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>
     <TextBlock
        Grid.Column="0"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Margin="5 0"
        Text="Your text"/>
     <Separator
        Grid.Column="1"
        VerticalAlignment="Center"/>
  </Grid>

or, write your own component:

<Style TargetType="{x:Type local:TextSeparator}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:TextSeparator}">
                <Grid Height="{TemplateBinding Height}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" 
                        VerticalAlignment="Center" Margin="5 0" 
                        Text="{TemplateBinding Header}"/>
                    <Separator Grid.Column="1" VerticalAlignment="Center"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Your control:

public class TextSeparator : Control
{
    public static DependencyProperty HeaderProperty =
        DependencyProperty.Register("Header",
        typeof(string), typeof(TextSeparator));

    public string Header
    {
        get { return (string)GetValue(HeaderProperty); }
        set { SetValue(HeaderProperty, value); }
    }
}

And use it:

<local:TextSeparator Height="15" Header="Your Text"/>

score 0 · Answer 4 · answered Feb 09 '18 at 09:02

You could simply use a Border with a Label as child element:

<Border>
    <Label Content="SomeText" />
</Border>

Setting the borders styling properties properly, you can get a nice custom separator.

I personally don't see the need of extra controls or styles and stuff for this simple task.

Horizontal separator with a line and a label in C# WPF window

4 Answers4