CODEWITHSUNDEEP
c#wpf
Victor
Victor

Reputation: 23972

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

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

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.

Upvotes: 6

Views: 9619

Answers (4)

medasocles
medasocles

Reputation: 76

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.

Upvotes: 0

KelvynRisso
KelvynRisso

Reputation: 82

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

Upvotes: 0

gcores
gcores

Reputation: 12656

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

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

Upvotes: 2

Aleksandar
Aleksandar

Reputation: 266

Try this,

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

Upvotes: 5

Related Questions