在内容的中心底部放置XAML单选按钮

Question

我想把WPF单选按钮放在图像底部中央。目前，我有一个stackpanel，其中包含图像和单选按钮，但我希望点击图像触发单选按钮。

当我尝试将图像嵌入单选按钮中时，它只显示在按钮的右侧。如何使用静态资源实现这一点？

以下是我用于将单选按钮放在顶部的代码，但我不知道调整边距是否是一个好方法。

        <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技术）

- user2525395

---

你能添加一张当前界面的截图和一个简单粗糙的草图来展示你想要的样子吗？ - Sean Airey

添加了一张图片，之前没有足够的声望来这样做。 - user2525395

Answer 1

哇，这比我预想的要难得多...默认的RadioButton在内部使用BulletDecorator，而且你无法控制标志的位置。

因此，创建一个新的ControlTemplate（你已经做到了）似乎是最好的选择。在这篇文章的帮助下：如何配置WPF RadioButton的圆形标志，这里有另一个建议：

注意：您需要在项目中添加对PresentationFramework.Aero的引用。

<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>

- Sphinxxx

---

优秀的解决方案，添加了.dll的引用后完全按照预期工作。谢谢。 - user2525395

Answer 2

你也可以使用堆栈面板来实现：

XAML：

    <Grid>
        <StackPanel Orientation="Vertical" Margin="0,0,125,50">
            <Image Source="Resources/rdo1.BackgroundImage.jpg" Height="87" Width="97" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,10"/>
            <RadioButton GroupName="Type" x:Name="rdo1" Checked="rdo1_CheckedChanged" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,10"/>
        </StackPanel>
        <StackPanel Orientation="Vertical" Margin="125,0,0,50" PreviewMouseDown="test1">
            <Image Source="Resources/rdo2.BackgroundImage.png" Height="87" Width="97" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,10"/>
            <RadioButton GroupName="Type" x:Name="rdo2" Checked="rdo2_CheckedChanged" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="0,10"/>
        </StackPanel>
        <Button x:Name="btnOk" Height="23" Width="76" TabIndex="1" IsEnabled="False" Click="btnOk_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="84,0,82,10" Content="OK" />
    </Grid>

我假设您想单击图片并选择收音机，我添加了PreviewMouseDown和以下内容：

private void test1(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
    rdo2.IsChecked = true;
}

对我来说，这比导入一个dll文件要容易。

- chongo2002