Why aren't my WPF radio buttons vertically aligned to the center?

Question

I have a WPF project where I'm trying to use radio buttons to determine which TextBox input to use. When I run it, though, the radio button itself is aligned to the top of the container, and I cannot find any sort of alignment property that affects it. Is this behavior expected? I've been searching for answers but everything seems to be asking how to align the radio button vertically. My assumption is that it's related to how I have it nested in other controls, but how can I make it work without changing too much?

This is the xaml relevant to the radio buttons:

<DockPanel Grid.Column="1" Margin="5,0,0,0">
  <RadioButton HorizontalContentAlignment="Stretch" DockPanel.Dock="Top" IsChecked="True">
    <xctk:TimePicker Name="TimePickerBox" Margin="0" Format="LongTime"
                     VerticalAlignment="Center"/>
  </RadioButton>
  <RadioButton Margin="0,5,0,0" DockPanel.Dock="Top">
    <StackPanel Orientation="Horizontal">
      <TextBox Name="Hours" Width="30" VerticalAlignment="Center">0</TextBox>
      <Label>Hours</Label>
      <TextBox Name="Minutes" Width="30" VerticalAlignment="Center">0</TextBox>
      <Label>Minutes</Label>
      <TextBox Name="Seconds" Width="30" VerticalAlignment="Center">0</TextBox>
      <Label>Seconds</Label>
    </StackPanel>
  </RadioButton>
// ...

This is what it looks like:

How can I get the radio buttons to be centered vertically?

Answer 1

Set VerticalContentAlignment as Center for RadioButton:

<RadioButton Margin="0,5,0,0" DockPanel.Dock="Top"
             VerticalContentAlignment="Center">
  .....
</RadioButton>

Answer 2

On both RadioButton elements, try adding VerticalAlignment="Top" VerticalContentAlignment="Center". I did that in a test project and it seemed to do the trick.