Question

I’m fairly new to WPF custom controls and have started by playing with a basic “LabelEdit” – basically a Label control and a TextBox. I have binding for 4 properties – Text, Label, TextWidth and LabelWidth (perhaps not what you would name them in a production environment, but this is just so that I can educate myself!).

All seems to work well. I also have an event which fires when the size of the label changes and causes an “ActualLabelWidth” DependencyProperty to change, so that a series of LabelEdit controls can all have the same Label Width. Here’s the XAML for the LabelEdit:

<Grid DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl}}">
    <Grid.RowDefinitions >
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{Binding LabelWidth}" />
        <ColumnDefinition Width="{Binding TextWidth}" />
    </Grid.ColumnDefinitions>

    <Label Grid.Column="0" Grid.Row="0" Content="{Binding Label, FallbackValue=LabelEdit}" SizeChanged="Label_SizeChanged" />
    <TextBox Grid.Column="1" Grid.Row="0" Text="{Binding Text}" />
</Grid>

…and for the MainWindow using it:

<ajdata:LabelEdit Text="{Binding Title}" Label="Title:" LabelWidth="{Binding ElementName=lblForename, Path=ActualLabelWidth}" TextWidth="100" />
                        <ajdata:LabelEdit Text="{Binding Surname}" Label="Surname:" LabelWidth="{Binding ElementName=lblForename, Path=ActualLabelWidth}" TextWidth="300" />
                        <ajdata:LabelEdit Text="{Binding Forename}" Label="Forename(s):" LabelWidth="Auto" TextWidth="300" Name="lblForename" />

So the label with the largest piece of text sets the width for the others.

The problem occurs when I give the Label a margin (“0,0,5,0”) to space it from the TextBox element. In this situation, the LabelEdit with the “Auto” width seems to work fine. The bound versions, however, appear not to honour the margins. This means the TextBox part of the element appears positioned left of where it should be.

Does anyone know what I need to do so that all the Labels end up the same width with margins taken in to account? I realise I could probably insert an extra piece of code in my event handler, but would rather make the XAML do its job, if possible. Many thanks.

Answer 1

I have now solved this (but am still perhaps unsure why). Instead of setting margins of “0,0,5,0” on the label, I have set margins of “5,0,0,0” on the TextBox. This way, everything remains nicely lined up, whatever the label width.