.net - 增加单选按钮的点击大小

Question

我使用 Windows 窗体已有多年，但对 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>

它只是将一个单选按钮置于填充网格部分的标签中。
显然，这种行为是错误的(事件不通过，您可以选择同一行上的多个单选按钮等)。

这在 Winforms 中是小菜一碟，我希望 WPF 中有一个简单的解决方案。

有人可以帮忙吗？

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

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>

看起来像:

(显然您会想要使用提供的第三种方法)

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

对于此，鼠标悬停不会给出视觉效果，但 HitTest 有效。我认为只要是在平板电脑上并且您不追踪手指就可以了。

<小时/>

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

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

调整容器内所有 RadioButton 对象的大小 (窗口、页面、网格等)

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

或全部带有 key

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

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