Enlarge the radiobutton and checkbox bullet binding with Text size - wpf

Question

The radio button and checkbox will be adding to window dynamically which based from how many data will be on database.
I have try some approach but cannot get what I need. Below are the code that will be perform to add either radio button or checkbox:-
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);
}
}
I also play around with Blend to see the outcome from what I have test. Some of the test are:-
1. ScaleTransform the radiobutton and checkbox before adding to stackpanel
2. Group default radiobutton and checkbox into view.
Problem on the testing:
ScaleTransform cannot stack to stackpanel accordingly
Viewbox is having different size depend on the text length. If radiobutton or checkbox got lesser text, it will going big to stretch inside stackpanel. Manually adjusting the width and height make the viewbox and content look distort and will be a lot of work to calculate the Width and Height that will view the text at same size.
Below are the image sample as the output:
On most left, I just change the text size, text bigger but bullet options still tiny.
On middle, the options using Viewbox. All font is at default size Segoe UI 9pt
On most right, the usage of ScaleTransform. It was likely the middle pointer is stack vertically on panel. And it's unsure how to control base from latest size of the radiobutton and checkbox since on Height & Width properties, it show the default size before Transform.
What I need is actually a radio button and check box that have it's bullet follow the size of the text. I've go through internet for this for a weeks but not find any solutions to my situations.

Answer 1

RadioButton and CheckBox have a hardcoded bullet size in their Templates. I have taken RadioButton template and CheckBox template and modified bullet sizes. I bind their Height and Width to content ActualHeight:
Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"
Height="{Binding ActualHeight, ElementName=PART_Content}"
Complete templates:
<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>