How to align controls in WPF custom user controls? - wpf

Question

So I programmed a WPF custom user control like this:
XAML:
<UserControl x:Class="PEINC.LableWithText"
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"
xmlns:local="clr-namespace:PEINC"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="label" Content="{Binding Beschriftung, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
<TextBox Grid.Column="1" x:Name="feld"/>
</Grid>
</UserControl>
cs:
public partial class LableWithText : UserControl
{
public string Beschriftung
{
get => (string)GetValue(BeschriftungProperty);
set => SetValue(BeschriftungProperty, value);
}
public static readonly DependencyProperty BeschriftungProperty = DependencyProperty.Register(nameof(Beschriftung), typeof(string), typeof(LableWithText), new PropertyMetadata(string.Empty));
public LableWithText()
{
InitializeComponent();
}
}
I use them in solutionDlg.xaml like this:
<control:LableWithText Grid.Row="2" Beschriftung="Bezeichnung:"/>
<control:LableWithText Grid.Row="3" Beschriftung="Projektnummer:"/>
My problem is that the TextBoxes don't align. It looks like this:
But it should look like this:
It would be cool if the user control would be able to adjust onto a grid - or some other kind of reference line - which is provided by solutionDlg.xaml.
I tried:
I could work with a fixed Width for the column the label is in. This is my fallback option, but it removes a lot of the flexibility of my custom control + I have to set it for every instance of LableWithText.
I tried to work with Grid.ColumnSpan, but this didn't work

Answer 1

I worked with the SharedSizeGroup-Feature:
This is the xaml I used in my UserControl:
<UserControl x:Class="RadBaseGUIElements.LabelWithText"
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"
xmlns:local="clr-namespace:RadBaseGUIElements"
mc:Ignorable="d"
d:DesignHeight="30" d:DesignWidth="300">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="{Binding LabelSizeGroup, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="label" Content="{Binding Beschriftung, RelativeSource={RelativeSource AncestorType=UserControl}}" Style="{DynamicResource FeldLabel}"/>
<TextBox Grid.Column="1" x:Name="feld" Style="{DynamicResource Feld}" Text="{Binding Inhalt, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
</Grid>
</UserControl>
And this is the code I use:
public partial class LabelWithText : UserControl
{
public string Beschriftung
{
get => (string)GetValue(BeschriftungProperty);
set => SetValue(BeschriftungProperty, value);
}
public static readonly DependencyProperty BeschriftungProperty = DependencyProperty.Register(nameof(Beschriftung),
typeof(string),
typeof(LabelWithText),
new PropertyMetadata("Beschriftung:"));
public string Inhalt
{
get => (string)GetValue(InhaltProperty);
set => SetValue(InhaltProperty, value);
}
public static readonly DependencyProperty InhaltProperty = DependencyProperty.Register(nameof(Inhalt),
typeof(string),
typeof(LabelWithText),
new FrameworkPropertyMetadata(
null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
public string LabelSizeGroup
{
get => (string)GetValue(LabelSizeGroupProperty);
set => SetValue(LabelSizeGroupProperty, value);
}
public static readonly DependencyProperty LabelSizeGroupProperty = DependencyProperty.Register(nameof(LabelSizeGroup),
typeof(string),
typeof(LabelWithText),
new PropertyMetadata("Labelspalte"));
public LabelWithText()
{
LabelSizeGroup = "Labelspalte";
InitializeComponent();
}
}
So I can use my User Control like this:
<Grid Grid.IsSharedSizeScope="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" SharedSizeGroup="Labelspalte"/>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
...
<control:LabelWithText Grid.Row="1" Beschriftung="SVN-Trunk-Pfad:" Grid.ColumnSpan="2" Inhalt="{Binding SvnTrunkFolder}"/>
</Grid>