增加单选按钮的命中大小

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中有一个简单的解决方案.

有人可以帮忙吗？

编辑:橙色区域是单选按钮的默认命中区域,绿色区域是我想要的命中区域.到目前为止,没有大量的定制布线,这看起来是不可能的

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>

看起来像:

(显然你会想要使用第三种方法)

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

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

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

您可以通过将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"属性,但是我会相信在左上角绘制控件.