Question

我多年来一直在使用Windows Forms，但我对WPF相对较新。我有一些没有标签的单选按钮（标签位于列的顶部，不用担心它们！这个程序将在平板电脑上运行，所以我想让单选按钮的命中区域变大我也需要单选按钮位于其列和行的中心。

我可以通过将其添加到网格的每一列来获得我想要的外观：

<Label Name="connectedLabel" Grid.Column="2" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
    <RadioButton x:FieldModifier="private" Name="connectedRadioButton" Grid.Column="2" Checked="otherRadioButton_CheckedChanged" Unchecked="otherRadioButton_CheckedChanged"></RadioButton>
</Label>

其中只是将一个单选按钮置于填充网格部分的标签内显然，行为是完全错误的（事件不通过，你可以在同一行选择多个radiobutton等）。

这将是Winforms中的蛋糕，我希望在WPF中有一个简单的解决方案。

有人可以帮忙吗？

编辑：橙色区域是单选按钮的默认命中区域，绿色区域是我想要的命中区域。到目前为止，如果没有大量的定制接线，这看起来是不可能的

enter image description here

Answer 1

根据相关新图片进行修改。

如果您不介意额外打字，可以使用：

        <Style TargetType="RadioButton" x:Key="rb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid>
                            <RadioButton IsChecked="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <Border Background="Transparent" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

这在我的小测试应用程序中的预期效果如下：

<Grid>
    <Grid.Resources>
        <Style TargetType="RadioButton" x:Key="rb">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RadioButton">
                        <Grid>
                            <RadioButton IsChecked="{Binding Path=IsChecked, RelativeSource={RelativeSource Mode=TemplatedParent}}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <Border Background="Transparent" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="ListBoxItem" x:Key="ics">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid ShowGridLines="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>

                            <RadioButton HorizontalAlignment="Center" VerticalAlignment="Center" />
                            <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1" />
                            <RadioButton Style="{StaticResource rb}" Grid.Column="2" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>

    <ListBox ItemContainerStyle="{StaticResource ics}">
        <ListBoxItem>1</ListBoxItem>
    </ListBox>
</Grid>

看起来像：

enter image description here

（显然你会想要使用提供的第三种方法）

我知道这看起来不多，但它会给你你的结果。再次，原谅额外的打字和缺乏使用的编码标准。

为此，鼠标悬停不会产生视觉效果，但命中测试有效。我认为这样就可以了，只要它在平板电脑上，你就不会跟踪手指。

如果您只想让控件尺寸更大，可以使用以下方法

您可以通过将RenderTransform属性设置为ScaleTransform对象来调整控件的大小。

调整容器中的所有RadioButton个对象 （窗口，页面，网格等）

<Window.Resources>
    <Style TargetType="RadioButton">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="10" ScaleY="10"/>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

或全部带密钥

    <Style TargetType="RadioButton" x:Key="resizeRadioButton">
        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform ScaleX="10" ScaleY="10"/>
            </Setter.Value>
        </Setter>
    </Style>

用法：的

<RadioButton Style="{StaticResource resizeRadioButton}" />

或单独

<RadioButton>
    <RadioButton.RenderTransform>
        <ScaleTransform ScaleX="10" ScaleY="10"/>
    </RadioButton.RenderTransform>
</RadioButton>

但是，如果您想要使用较大控件和较大命中区域的组合（或者对于集合类型的所有控件只有较大的命中区域），您可以使用：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="RadioButton">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="VerticalAlignment" Value="Center" />

        <Setter Property="RenderTransform">
            <Setter.Value>
                <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
            </Setter.Value>
        </Setter>

       <Setter Property="Content">
           <Setter.Value>
               <Border>
                   <Rectangle Margin="-10" Fill="Transparent" />
               </Border
           </Setter.Value>
       </Setter>
    </Style>

</ResourceDictionary>

或者只是在另一个容器中使用控件的默认行为，并使用HorizontalAlignment="Stretch"属性，但是我会相信在左上角绘制控件。

Answer 2

RadioButton的

GroupName属性应该有所帮助。将它设置在每个RadioButton中相同，gl＆amp; HF！

<RadioButton GroupName="MyGroup1">
<RadioButton GroupName="MyGroup1">
<RadioButton GroupName="MyGroup1">
<RadioButton GroupName="MyGroup2">
<RadioButton GroupName="MyGroup2">
<RadioButton GroupName="MyGroup3">

每个小组都会按预期工作。只会检查组中的一个RadioButton。

Answer 3

[我只是补充脂肪和stukselbax的解决方案]

您似乎需要更改RadioButton的Template。 Bellow是带有修改模板的默认Aero（Win7）样式，请参阅代码中的注释。要使代码生效，请添加此命名空间：xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"并确保引用PresentationFramework.Aero.dll程序集。

<Style x:Key="CheckRadioFocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="{x:Type RadioButton}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="#F4F4F4"/>
    <Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <Grid>
                            <!--This is where you decide about the size of the hit area, the Border bellow has to be transparent and it's acting as the hit area. The Width and Height on the BulletChrome is a modification to bring the size of the bullet back to original size (or close to it)-->
                            <Border Background="Transparent" Width="50" Height="50"/>
                            <Microsoft_Windows_Themes:BulletChrome Width="20" Height="20" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" IsRound="true" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
                        </Grid>
                    </BulletDecorator.Bullet>
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </BulletDecorator>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
                        <Setter Property="Padding" Value="4,0,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

增加单选按钮的命中大小

3 个答案: