Stretch Items in an ItemsControl in XAML - xaml

Question

SOLUTION
The shortest Code to archieve the desired result was for me:
<ItemsControl ItemsSource="{Binding GeneralBoolSettings}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleSwitch IsOn="{Binding IsOn, Mode=TwoWay}" OffContent="{Binding OffContent}" OnContent="{Binding OnContent}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
ORIGINAL QUESTION
I'm having trouble with something as easy as stretching the Items of an ItemControl horizontally. As I'm working with XAML, I dont have things like SharedSizeGroupas in WPF.
The solutioon presented here: Horizontally Stretch Content in an ItemsControl does unfortunately not work for me.
My Code:
<ItemsControl ItemsSource="{Binding GeneralBoolSettings}" HorizontalContentAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleSwitch IsOn="{Binding IsOn, Mode=TwoWay}" OffContent="{Binding OffContent}" OnContent="{Binding OnContent}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
Some Screenshots from the Designer:
ItemControl has the correct (stretched) Size
DataTemplate is already too small
I would like to avoid binding to a parent width; in my previous attempts, the width was sometimes (re-)set to 0, and I would have had to remove the binding and add it again. Also: Please no code and / or event catcher, there must be an elegant solution to this rather basic problem!
Honestly, I'm a bit surprised I can't get this to work. Mabye you can recommend a good book / website to learn a systematic approach of the basics of XAML (while we're at it)?

Answer 1

You also need to set the horizontal alignment of each item container to stretch using ItemContainerStyle property of ItemsControl.
<ItemsControl ItemsSource="{Binding GeneralBoolSettings}" HorizontalContentAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<ToggleSwitch IsOn="{Binding IsOn, Mode=TwoWay}" OffContent="{Binding OffContent}" OnContent="{Binding OnContent}" />
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="HorizontalAlignment" Value="Stretch"/>
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>