【问题标题】:Why does my customized WPF RadioButton not look right?为什么我的自定义 WPF RadioButton 看起来不正确?
【发布时间】:2010-12-11 07:55:32
【问题描述】:

我将单选按钮的样式替换为复选框的样式。我知道你会说这是一个坏主意,但它确实需要以这种方式工作。无论如何,使用 Expression Blend,我能够提取 CheckBox 的样式并将其应用于 RadioButton。我现在唯一的问题是,当它绘制时没有边框。谁能告诉我为什么?这是代码(自原始帖子以来已更新):

<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Royale"
Title="Customized RadioButton" Width="496" ShowInTaskbar="True" ResizeMode="NoResize" Height="105">
<Window.Resources>
    <SolidColorBrush x:Key="CheckBoxStroke" Color="#8E8F8F"/>

    <Style x:Key="RadioButtonCheckBoxStyle" 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}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <BulletDecorator Background="Transparent">
                            <BulletDecorator.Bullet>
                                <Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
                            </BulletDecorator.Bullet>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
                        </BulletDecorator>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="HasContent" Value="true">
                            <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>
</Window.Resources>
<StackPanel>
    <CheckBox Height="16" Name="checkBox1" Width="120">CheckBox</CheckBox>
    <RadioButton Height="16" Name="radioButton1" Width="120">RadioButton</RadioButton>
    <RadioButton Content="RadioButton with CheckBox Style" Margin="4" Style="{DynamicResource RadioButtonCheckBoxStyle}" FocusVisualStyle="{x:Null}" GroupName="Header" IsChecked="False" IsEnabled="True" HorizontalAlignment="Center" />
</StackPanel>

alt text http://img260.imageshack.us/img260/65/33733770.jpg

要查看其显示方式,请将其粘贴到 Visual Studio 中。您会看到 Customized RadioButton 看起来不正确。它缺少 CheckBox 通常具有的常规 3D 效果。我不关心任何内容(我不会有任何内容)我只是希望它看起来像一个普通的 CheckBox。

【问题讨论】:

  • 如果您想要一个复选框的完整外观,使用 CheckBoxes 可能更容易,并在选中另一个框时手动取消选中组中的其他框。虽然我在下面的回答可能会恢复您的边框,但不一定会创建完整的 3D 效果。

标签: wpf checkbox radio-button


【解决方案1】:

由于您要覆盖模板,因此您需要自己附加到类的属性。

以下列方式在模板中声明边框:

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>

另外,你有一个小错误。您已经在您的样式中多次定义了“BorderBrush”的设置器。

编辑:看到您的图片后,您的真正问题是:

<Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>

您的子弹中缺少 BorderThickness。它实际上将您的厚度设置为 0,这就是为什么您什么都没看到。

【讨论】:

  • 在哪里添加该代码?我试过放入 ControlTemplate,但它没有编译。谢谢你的帮助,威尔。
  • 这取决于您希望边框包围什么。我会假设在您的 RadioButtonCheckBoxStyle 中声明的 ControlTemplate 中,正如 Drew Marsh 的回答也表明的那样,但您可以在您的 &lt;BulletDecorator&gt; 中尝试它。
  • 查看我的编辑,您的项目符号声明中缺少BorderThickness
【解决方案2】:

图片可能会有所帮助,但您希望边框在哪里?您是否期望整个内容都有边框?根据您使用的模板,唯一的边框应该是复选标记所在的位置。如果您想要所有内容的边框,那么您需要在ControlTemplate 中添加一个Border,如下所示:

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <BulletDecorator Background="Transparent">
                                <BulletDecorator.Bullet>
                                    <Microsoft_Windows_Themes:BulletChrome Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" IsChecked="{TemplateBinding IsChecked}" IsRound="false" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
                                </BulletDecorator.Bullet>
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignme    nt}" RecognizesAccessKey="True"/>
                        </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>

旁注:您已在 Checkbox 本身上设置了 FocusVisualStyle="{x:Null}",但您的模板在其 HasContent 属性触发器中更改了此属性。如果你真的不想要 FocusVisualStyle,你应该删除那个 setter。

【讨论】:

  • Will Eddins 的修改答案是正确的,您在 BulletChrome 上缺少 BorderThickness。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-29
  • 2018-02-01
  • 2018-05-20
相关资源
最近更新 更多