使用文本大小放大单选按钮和复选框项目符号绑定

Question

单选按钮和复选框将根据数据库中的数据量动态添加到 window。

我已经尝试了一些方法，但无法得到我需要的东西。以下是将执行以添加单选按钮或复选框的代码：-

private void ScreenSubList_Loaded(object sender, RoutedEventArgs e)
{
    try
    {
        strSubList LastGroupName = strSubList.Empty;
        foreach (var SubList in ProductSubList)
        {
            StackPanel StackGroup = new StackPanel() { Orientation = Orientation.Vertical };
            if (SubList.GroupName != LastGroupName)
            {
                Label LabelGroupName = new Label() { Content = SubList.GroupName.ToUpper() };
                ScaleTransform ElementScaleTransform = new ScaleTransform(6, 6);
                LabelGroupName.RenderTransform = ElementScaleTransform;
                StackGroup.Children.Add(LabelGroupName);
                LastGroupName = SubList.GroupName;
            }

            if (SubList.GroupType == 0)
            {
                RadioButton rb = new RadioButton();
                if (SubList.SubListItem != null)
                {
                    StackPanel StackItem = new StackPanel() { Orientation = Orientation.Horizontal };
                    foreach (var SubListitem in SubList.SubListItem)
                    {
                        rb.Tag = SubListitem.ItemID;
                        rb.Name = "SubList" + SubListitem.ItemID;
                        rb.Content = SubListitem.ItemName;
                        rb.HorizontalContentAlignment = HorizontalAlignment.Left;
                        rb.VerticalContentAlignment = VerticalAlignment.Center;
                        rb.GroupName = SubList.GroupName;
                        ScaleTransform ElementScaleTransform = new ScaleTransform(5, 5);
                        rb.RenderTransform = ElementScaleTransform;
                        StackGroup.Children.Add(rb);
                    }
                }
            }
            else if (SubList.GroupType == 1)
            {
                CheckBox cbx = new CheckBox();
                if (SubList.SubListItem != null)
                {
                    StackPanel StackItem = new StackPanel() { Orientation = Orientation.Horizontal };
                    foreach (var SubListitem in SubList.SubListItem)
                    {
                        cbx.Tag = SubListitem.ItemID;
                        cbx.Name = "SubList" + SubListitem.ItemID;
                        cbx.Content = SubListitem.ItemName;
                        cbx.HorizontalContentAlignment = HorizontalAlignment.Left;
                        cbx.VerticalContentAlignment = VerticalAlignment.Center;
                        ScaleTransform ElementScaleTransform = new ScaleTransform(5, 5);
                        cbx.RenderTransform = ElementScaleTransform;
                        StackGroup.Children.Add(cbx);
                    }
                }
            }
            ScreenSubListredient.StackSubList.Children.Add(StackGroup);
        }
    }
    catch (Exception ex)
    {
        App.LogEvents($"Exception on ScreenSubList_Loaded. Message-{ex.Message}. Stack Trace-{ex.StackTrace}", System.Diagnostics.EventLogEntryType.Error);
    }
}

我也尝试使用 Blend 来查看我所测试的结果。一些测试是：- 1. ScaleTransform radiobutton 和 checkbox 添加到 stackpanel 之前 2. 将默认单选按钮和复选框组合到视图中。

测试中的问题：

ScaleTransform 无法相应地堆叠到 stackpanel
Viewbox 的大小因文本长度而异。如果单选按钮或复选框的文本较少，它会变大以在堆栈面板内伸展。手动调整宽度和高度会使视图框和内容看起来扭曲，并且需要大量工作来计算将以相同大小查看文本的宽度和高度。

下面是作为输出的图像样本：

在最左边，我只是更改了文字大小，文字变大了，但项目符号选项仍然很小。
中间，使用Viewbox的选项。所有字体均为默认大小 Segoe UI 9pt
最右边，ScaleTransform的用法。中间指针可能垂直堆叠在面板上。并且不确定如何根据单选按钮和复选框的最新大小控制基数，因为在高度和宽度属性上，它显示转换前的默认大小。

我需要的实际上是一个单选按钮和复选框，其项目符号跟随文本的大小。我已经为此上网了一个星期，但没有找到适合我的情况的任何解决方案。

Answer 1

RadioButton 和 CheckBox 在其模板中有一个硬编码的项目符号大小。我采用了 RadioButton template and CheckBox template 并修改了项目符号大小。我将它们的高度和宽度绑定到内容 ActualHeight:

Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
Height="{Binding ActualHeight, ElementName=PART_Content}"

完整模板：

<Style x:Key="{x:Type RadioButton}" TargetType="{x:Type RadioButton}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource RadioButtonFocusVisual}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type RadioButton}">
        <BulletDecorator Background="Transparent">
          <BulletDecorator.Bullet>
            <Grid Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
              Height="{Binding ActualHeight, ElementName=PART_Content}" >
              <Ellipse x:Name="Border"  
                Fill="{StaticResource NormalBrush}"
                StrokeThickness="1"
                Stroke="{StaticResource NormalBorderBrush}" />
              <Ellipse x:Name="CheckMark"
                Margin="4"
                Fill="{StaticResource GlyphBrush}" />
            </Grid>
          </BulletDecorator.Bullet>
          <ContentPresenter Name="PART_Content"
            Margin="4,0,0,0"
            VerticalAlignment="Center"
            HorizontalAlignment="Left"
            RecognizesAccessKey="True"/>
        </BulletDecorator>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="false">
            <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Fill" Value="{StaticResource DarkBrush}" />
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Fill" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Border" Property="Stroke" Value="{StaticResource GlyphBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border" Property="Fill" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="Stroke" Value="#40000000" />
            <Setter Property="Foreground" Value="#80000000"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type CheckBox}" TargetType="CheckBox">
  <Setter Property="IsThreeState" Value="True"/>
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="FocusVisualStyle" Value="{StaticResource CheckBoxFocusVisual}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="CheckBox">
        <BulletDecorator Background="Transparent">
          <BulletDecorator.Bullet>
            <Border x:Name="Border"  
              Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" 
              Height="{Binding ActualHeight, ElementName=PART_Content}" 
              CornerRadius="0" 
              Background="{StaticResource NormalBrush}"
              BorderThickness="1"
              BorderBrush="{StaticResource NormalBorderBrush}">
              <Viewbox Margin="2">
              <Path 
                Width="7" Height="7" 
                x:Name="CheckMark"
                StrokeStartLineCap="Flat"
                StrokeEndLineCap="Flat"
                SnapsToDevicePixels="False" 
                Stroke="{StaticResource GlyphBrush}"
                StrokeThickness="2"
                Data="M 1 1 L 6 6 M 1 6 L 6 1" />
              </Viewbox>
            </Border>
          </BulletDecorator.Bullet>
          <ContentPresenter Margin="4,0,0,0" Name="PART_Content"
            VerticalAlignment="Center"
            HorizontalAlignment="Left"
            RecognizesAccessKey="True"/>
        </BulletDecorator>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="false">
            <Setter TargetName="CheckMark" Property="Visibility" Value="Collapsed"/>
          </Trigger>
          <Trigger Property="IsChecked" Value="{x:Null}">
            <Setter TargetName="CheckMark" Property="Data" Value="M 3 3 L 3 4 L 4 4 L 4 3 Z" />
          </Trigger>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource PressedBorderBrush}" />
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
            <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

使用文本大小放大单选按钮和复选框项目符号绑定

Enlarge the radiobutton and checkbox bullet binding with Text size

wpf

xaml

checkbox

radio-button

blend