Vertical alignment of ContentControl in styled ListBox - wpf

Question

I am using this answer to style a ListBox as RadioButton in order to simplify my MVVM code by driving the selection of the checked radio button via an enum - rather than having a bunch of bools that I have to manually map back and forth to the enum.
This works really well when the ListBoxItem content is a simple line of text. The radio button aligns with the text and all is happy. But when I change the content to be a UserControl, the radio button for that choice gets rendered at the vertical mid-point of the UserControl rather than at the top (where I want it).
Here is some code and an image that better explains what I am trying to do (Note that a bunch of stuff has been left out for clarity):
The UserControl that I am inserting as content into one of the choices
<UserControl x:Class="TestCtl">
<StackPanel Orientation="Vertical" >
<Label Margin="-5,0,0,0" Content="Choice #2"/>
<CheckBox Margin="10,0,0,5">Option 1</CheckBox>
<CheckBox Margin="10,0,0,5">Option 2</CheckBox>
<CheckBox Margin="10,0,0,0">Option 3</CheckBox>
</StackPanel>
</UserControl>
The ListBox (with the aforementioned style defined elsewhere)
<StackPanel Orientation="Vertical">
<ListBox SelectedValuePath="Tag"
Style="{StaticResource RadioButtonList}"
SelectedValue="{Binding Blah Blah"}>
<ListBoxItem Tag="Choice1" Content="Choice #1" />
<ListBoxItem Tag="Choice2">
<ContentControl>
<subf:TestCtl />
</ContentControl>
</ListBoxItem>
<ListBoxItem Tag="Choice3" Content="Choice #3"/>
<ListBoxItem Tag="Choice4" Content="Choice #4" />
</ListBox>
<ComboBox blah blah/>
</StackPanel>
What it looks like when rendered:
I have tried setting both the VerticalAlignment and VerticalContentAlignment as well as playing with Margin and Padding in every location I can think of in both my xaml code and the style that I linked to, but no matter what I set I can't get the radio button and user control to align at their tops.
Is there anyway to achieve what I want by modifying either the style I am using or my code? Or am I just flat out doing this wrong?

Answer 1

In the RabioButtonList style change this:
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ListBoxItem}" >
<Setter Property="Margin" Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border BorderThickness="0" Background="Transparent">
<!-- CHANGE THIS -->
<StackPanel Orientation="Horizontal">
<RadioButton
Focusable="False"
IsHitTestVisible="False"
IsChecked="{TemplateBinding IsSelected}"/>
<ContentPresenter />
</StackPanel>
<!------------------>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
In the user control set the label Padding to 5,0,0,0 (Thanks to mm8)
<StackPanel Orientation="Vertical" >
<Label Margin="-5,0,0,0" Content="Choice #2" Padding="5,0,0,0"/>
<CheckBox Margin="10,0,0,5">Option 1</CheckBox>
<CheckBox Margin="10,0,0,5">Option 2</CheckBox>
<CheckBox Margin="10,0,0,0">Option 3</CheckBox>
</StackPanel>

Answer 2

Set the Padding of the Label to 0:
<ListBoxItem Tag="Choice1" Content="Choice #1" />
<ListBoxItem Tag="Choice2">
<UserControl>
<StackPanel Orientation="Vertical" >
<Label Content="Choice #2" Padding="0"/>
<CheckBox Margin="10,0,0,5">Option 1</CheckBox>
<CheckBox Margin="10,0,0,5">Option 2</CheckBox>
<CheckBox Margin="10,0,0,0">Option 3</CheckBox>
</StackPanel>
</UserControl>
</ListBoxItem>
<ListBoxItem Tag="Choice3" Content="Choice #3"/>
<ListBoxItem Tag="Choice4" Content="Choice #4" />
This should fix the vertical alignment issue. But you shouldn't have to use a ListBox in the first place to be able to bind a RadioButton to a single source property:
WPF + MVVM + RadioButton : Handle binding with single property