Position RadioButton XAML on center bottom of content

Question

I'd like to position the WPF radio button on the centered bottom of an image. Currently I have a stackpanel with the image then radio button on the bottom but I'd like it so clicking the image triggers the radio button.

When I tried to embed the image inside the radiobutton, it only shows up on the right of the button. How can I do this using a static resource?

This is what I have for putting the radio button on top but I don't know if adjusting the margins is a good way to do it.

        <ControlTemplate x:Key="RadioButtonBottom" TargetType="{x:Type RadioButton}">
            <RadioButton IsChecked="{TemplateBinding IsChecked}" Margin="35 0 0 0" >
                <TextBlock>
                <LineBreak />
                <InlineUIContainer>
                    <ContentPresenter Margin="-50,0,0,0" 
                                        Content="{TemplateBinding ContentPresenter.Content}"
                                        ContentTemplate="{TemplateBinding ContentPresenter.ContentTemplate}"/>
                </InlineUIContainer>
                </TextBlock>

            </RadioButton>
        </ControlTemplate>

It should look something like this:

Answer 1

Wow, that was harder than I'd expect it to be.. The default RadioButton uses BulletDecorator internally, and you don't have much control of the bullet's placement.

Therefore, creating a new ControlTemplate (which you did) seems to be the best option. With a little help from this article: How to configure the WPF RadioButton's circle bullet, here is another suggestion:

Note: You need to add a reference to PresentationFramework.Aero in your project.

<Window ...
        xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
>
    <Window.Resources>
        <Style TargetType="RadioButton" >
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <DockPanel Background="Transparent" >
                            <Microsoft_Windows_Themes:BulletChrome DockPanel.Dock="Bottom" HorizontalAlignment="Center"
                                                                   IsRound="true" Height="{TemplateBinding FontSize}" Width="{TemplateBinding FontSize}" 
                                                                   BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" 
                                                                   IsChecked="{TemplateBinding IsChecked}" 
                                                                   RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" />
                            <ContentPresenter RecognizesAccessKey="True" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
                        </DockPanel>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False" >
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>


    <StackPanel Orientation="Horizontal" >
        <RadioButton>
            <Image Source="..." />
        </RadioButton>
        <RadioButton>
            <Image Source="..." />
        </RadioButton>
        <RadioButton>
            <Image Source="..." />
        </RadioButton>
    </StackPanel>

</Window>