将 RadioButton XAML 定位在内容的中心底部答案

【问题标题】：Position RadioButton XAML on center bottom of content将 RadioButton XAML 定位在内容的中心底部
【发布时间】：2014-10-09 09:15:40
【问题描述】：

我想将 WPF 单选按钮放置在图像的中心底部。目前我有一个带有图像的堆栈面板，然后是底部的单选按钮，但我想要它，所以单击图像会触发单选按钮。

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

这就是我将单选按钮放在顶部的方法，但我不知道调整边距是否是一种好方法。

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

它应该看起来像这样：

【问题讨论】：

您能否添加一张当前的屏幕截图以及您希望它的外观的速写草图？
添加了一张照片，之前没有足够的声望。

标签： c# wpf xaml

【解决方案1】：

哇，这比我预想的要难。默认的RadioButton 在内部使用BulletDecorator，而且您对子弹的位置没有太多控制权。

因此，创建一个新的ControlTemplate（您已经这样做了）似乎是最好的选择。在这篇文章的帮助下：How to configure the WPF RadioButton's circle bullet，这里有另一个建议：

注意：您需要在项目中添加对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>

【讨论】：

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

【解决方案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 更容易。

【讨论】：