Custom border for UserControl

Question

I know too little about design to pull this off.

I am trying to make a UserControl with a special border. The border should look like this: Border of Container

The header is a label (or textblock if is a must) with the content set at init time.

The border must stop before the header and start again after the header with a margin like described. The border will house a frame or grid which must confrom to the border shape (probably with a mask) The entire background must be transparent or alpha-ed (Color #000000XX) which is important because the header cant just "hide" the rectangle by being on top.

I'd appreciate directions to achieve this. Blend from visual studio 2012 is available.

Thank you

Looks like you can just use the standard `GroupBox`, creating a UserControl like this seems to be useless. — King King, Jul 18 '14 at 01:20
@KingKing There will be more controls and functionality added which might change the border shape. If I know how to do it with this simple shape I'll learn how to do it with any other irregualr shaped border — SteelSoul, Jul 18 '14 at 01:46

pushpraj · Accepted Answer · 2014-07-20T06:41:42.543

here you go

I made use of HeaderedContentControl which allows you to have a header and a content which you can further use in a template of your preference

<HeaderedContentControl x:Class="CSharpWPF.MyUserControl"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        mc:Ignorable="d"
                        d:DesignHeight="300"
                        d:DesignWidth="300"
                        Header="Header">
    <HeaderedContentControl.Template>
        <ControlTemplate TargetType="HeaderedContentControl">
            <Grid>
                <Border BorderBrush="Black"
                        BorderThickness="4"
                        CornerRadius="10"
                        Padding="4"
                        Margin="10">
                    <ContentPresenter />
                </Border>
                <TextBlock Text="{TemplateBinding Header}"
                           Background="White"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Top"
                           FontSize="13"
                           Margin="25,0,0,0"
                           Padding="10,0"/>
            </Grid>
        </ControlTemplate>
    </HeaderedContentControl.Template>
    <Grid>
        <TextBlock Text="content" />
    </Grid>
</HeaderedContentControl>

result

Update

try this template, I did try to achieve by pure xaml

    <HeaderedContentControl.Template>
        <ControlTemplate TargetType="HeaderedContentControl">
            <DockPanel x:Name="root"
                       LastChildFill="True"
                       Margin="10">
                <DockPanel.Resources>
                    <Style TargetType="Border">
                        <Setter Property="BorderBrush"
                                Value="Black" />
                        <Setter Property="Width"
                                Value="30" />
                        <Setter Property="Height"
                                Value="30" />
                        <Setter Property="CornerRadius"
                                Value="10" />
                    </Style>
                </DockPanel.Resources>
                <Grid DockPanel.Dock="Top"
                      Height="20">

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20" />
                        <ColumnDefinition Width="auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="20" />
                    </Grid.ColumnDefinitions>
                    <Border BorderThickness="4,4,0,0" />
                    <Border BorderThickness="0,4,0,0"
                            Grid.Column="2"
                            Width="auto"
                            CornerRadius="0" />
                    <Border BorderThickness="0,4,4,0"
                            Grid.Column="3"
                            HorizontalAlignment="Right" />
                    <TextBlock Text="{TemplateBinding Header}"
                               FontSize="13"
                               Grid.Column="1"
                               Margin="10,-10"
                               VerticalAlignment="Top" />
                </Grid>
                <Grid Height="20"
                      DockPanel.Dock="Bottom">
                    <Border BorderThickness="4,0,4,4"
                            Width="auto"
                            VerticalAlignment="Bottom" />
                </Grid>
                <Border BorderThickness="4,0,0,0"
                        DockPanel.Dock="Left"
                        Height="auto"
                        Width="20"
                        CornerRadius="0" />
                <Border BorderThickness="0,0,4,0"
                        DockPanel.Dock="Right"
                        Width="20"
                        Height="auto"
                        CornerRadius="0" />
                <ContentPresenter Margin="-10" />
            </DockPanel>
        </ControlTemplate>
    </HeaderedContentControl.Template>

other approach might include some code behind if this is not suitable

result

Thank you. I wasn't aware of this element at all. I guess there are some things that aren't described in Apress books :) Can you tell me what is the purpose of in the Border element? — SteelSoul, Jul 18 '14 at 02:16
[ContentPresenter](http://msdn.microsoft.com/en-us/library/system.windows.controls.contentpresenter) will display the content of the control eg `Grid` element containing the `TextBlock` in this example. you can choose to place content of your choice in the above example or while declaring a new instance of the control eg. `` — pushpraj, Jul 18 '14 at 02:25
Arequirement from the original question is missing from the solution. As stated, the background must be transparent or alpha-ed. I set the Header's background to transparent you can see the border underneath. — SteelSoul, Jul 20 '14 at 01:21

Custom border for UserControl

1 Answers1