【问题标题】:Increasing the hit size of a radio button增加单选按钮的点击大小
【发布时间】:2011-11-07 08:25:36
【问题描述】:

多年来我一直在使用 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 中有一个简单的解决方案。

有人可以帮忙吗?

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

【问题讨论】:

  • 你试过拉伸属性吗?您是否尝试过设置单选按钮本身的属性,例如内容对齐?您的网格是否在任何类型的面板内(因为会破坏拉伸)?你试过用边框代替标签吗?
  • 嗨 Merlyn,是的,我已经尝试过拉伸属性,我已经尝试了单选按钮本身的所有可能属性(包括内容对齐)。网格直接在我的用户控制之下(该用户控制随后被添加到项目面板,但这肯定不是问题吗?)。边框不允许内容对齐,这会使单选按钮留在左上角。
  • +1 既然你有屏幕截图的问题。这样可以更清楚地了解您要查找的内容。
  • 我刚刚编辑了我的答案。希望我以与您所拥有的方式相似的方式放置容器。

标签: .net wpf xaml layout radio-button


【解决方案1】:

GroupName RadioButton 的属性应该会有所帮助。在每个 RadioButton 中设置相同,gl & hf!

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

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

【讨论】:

  • 感谢 sukselbax,知道这非常有用,甚至可能是部分解决方案,但我真正想要的是增加单选按钮圆圈周围的空白。在 Winforms 中,我只是关闭自动调整大小,将“复选框”居中并停靠整个内容。我只需要一个 WPF 等价物
【解决方案2】:

编辑每个有问题的新图片。

如果你不介意额外的输入,你可以使用这个:

        <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" 属性,但是我相信这会将控件绘制在左上角。

【讨论】:

  • @Justin - ...而且,您不需要标签。在 RadioButton 上使用 HorizontalAlignment="Center" VerticalAlignment="Center"。此外,stukselbax bellow 提供了有关 GroupName 的重要且重要的信息。
  • @XAMeLi 谢谢,我知道我不应该需要这个标签,这是一个 hack,我只是想知道我想要什么。我不认为这是一个可接受的解决方案,因为我必须连接鼠标悬停和单击事件。我已经被别的东西转移了注意力。我很快就会回来
  • 关于这个答案,虽然在一般意义上非常有用,但不是我所追求的。我希望单选按钮上的点击框更大,我不想要更大的单选按钮。谢谢你的建议
  • 认为如果这是在平板电脑上,您可能希望控件对用户来说更大。你可以结合使用你的方法和我的方法。查看答案更新(当我写完时)
  • 再次感谢,我非常感谢您为此付出的努力,但点击区域仍位于单选按钮的右侧或左侧。我已经在我的问题中添加了一张图片,希望它会更清楚。
【解决方案3】:

[我只是添加了 fat 和 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>

【讨论】:

    猜你喜欢
    • 2014-07-03
    • 2014-08-06
    • 2013-12-30
    • 2014-09-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-27
    相关资源
    最近更新 更多