Search code examples
wpfwpf-controls

Change the size of checkbox rectangle without changing its content


In my following WPF app, how can we change the size of the CheckBox without changing the size of its content (an Segoe MDL2 Assets icon). I would like to see the checkbox rectangle to be the half the size of its content (an icon). If I set the width and height of the checkbox to 10 it reduces the content size (icon) as well:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel Margin="10">
            <Label FontWeight="Bold">Application Options</Label>
            <CheckBox VerticalContentAlignment="Center">
                <TextBlock Text="&#xE715;" FontFamily="Segoe MDL2 Assets" FontSize="20"/>
            </CheckBox>
        </StackPanel>
    </Grid>
</Window>

Display of the above XAML:

enter image description here


Solution

  • You could move the TextBlock out of the CheckBox. Something like this:

    <StackPanel Margin="10">
        <Label FontWeight="Bold">Application Options</Label>
        <Grid VerticalAlignment="Center">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <CheckBox RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center">
                <CheckBox.RenderTransform>
                    <ScaleTransform ScaleX="0.5" ScaleY="0.5" />
                </CheckBox.RenderTransform>
            </CheckBox>
            <TextBlock Grid.Column="1" Text="&#xE715;" FontFamily="Segoe MDL2 Assets" FontSize="20"/>
        </Grid>
    </StackPanel>
    

    enter image description here