Fieldset in Winrt/XAML

Question

I need to create something in WinRT/XAML similar to an HTML fielset. http://jsfiddle.net/Sf2Vy/

Basically, I have a border and there is some text on top of the border. Where the text covers the border, I need the border to not show under the text. The background behind the border isn't a solid color so I can't just set the background color of the text. The text length is variable also.

Is there an easy way to do this?

don't you have GroupBox in WinRT? ([see here](http://stackoverflow.com/questions/1889979/borders-with-captions-in-wpf)) — TimTIM Wong, May 03 '16 at 10:37

score 1 · Accepted Answer · answered Jun 03 '14 at 15:18

Yeah, so, the answer is no. There is no FieldSet.

Having said that, I think you could work out a similar effect simple enough. The code below shows you a solution that could easily be wrapped in a custom user control called fieldset.

<Grid Width="500" VerticalAlignment="Center">

    <!-- top fieldset thing -->
    <Grid VerticalAlignment="Top">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="35" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.Resources>
            <Style TargetType="Border">
                <Setter Property="VerticalAlignment" Value="Top" />
                <Setter Property="BorderThickness" Value="0,5,0,0" />
                <Setter Property="BorderBrush" Value="white" />
                <Setter Property="Margin" Value="0,-2,0,0" />
            </Style>
            <Style TargetType="TextBlock">
                <Setter Property="Margin" Value="10,-15,10,0" />
                <Setter Property="FontSize" Value="30" />
            </Style>
        </Grid.Resources>
        <Border Grid.Column="0" />
        <TextBlock Grid.Column="1" Text="User Info" />
        <Border Grid.Column="2" />
    </Grid>

    <!-- regular form fields -->
    <Border BorderBrush="White" BorderThickness="5,0,5,5">
        <StackPanel Margin="20">
            <TextBox Header="Salutation" />
            <TextBox Header="First Name" />
            <TextBox Header="Middle Name" />
            <TextBox Header="Last Name" />
            <Button Margin="0,5,-3,0" HorizontalAlignment="Right">Save Data</Button>
        </StackPanel>
    </Border>

</Grid>

It looks something like this:

enter image description here

It's not 100% perfect - or, maybe... it is.

Best of luck!

I figured I'd have to do a few lines or something instead of a single border, but wasn't sure if I could do it in a simple fashion like this. Thanks! — Josh Close, Jun 07 '14 at 01:55

Fieldset in Winrt/XAML

1 Answers1