Question

我想将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>

看起来应该是这样的：

Answer 1

哇，这比我预期的要难......默认RadioButton在内部使用BulletDecorator，而你对子弹没有多少控制权＃39放置。

因此，创建一个新的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>

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更容易。

将RadioButton XAML放在内容的中心底部

2 个答案: