UWP, XAML - making CheckBox empty

Question

How can I make CheckBox empty? I only need the tick. Now it takes additional empty space, like here:

<CheckBox
Background="Aqua"
Margin="0,0,0,0"/>

(I added color to look how much space this control takes (that empty space causes alligning problems)).

I just need the tick rectangle, I don't want the empty space. How can I achieve that?

Setting Margin to zeros and Content to "" doesn't work.

Answer 1

1. If you just want to remove the empty space on the right, you can do it by Adding Padding and MinWidth to 0:

   <CheckBox Background="Aqua" Padding="0" MinWidth="0"/>
   

it looks as below:

2. If you also want to remove the space at the top and bottom, you need more works:

   • 2a. Select the CheckBox in Document Outline in Visual Studio
   • 2b. Right Click the CheckBox -> Edit Template -> Edit a Copy
   • 2c. Then you can see edit the CheckBox style directly

   • 2d. Then locate the following code in ControlTemplate

     <Grid Height="32" VerticalAlignment="Top">
         <Rectangle x:Name="NormalRectangle" Fill="Transparent" Height="20" Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" UseLayoutRounding="False" Width="20"/>
         <FontIcon x:Name="CheckGlyph" Foreground="{ThemeResource SystemControlHighlightAltChromeWhiteBrush}" FontSize="20" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="&#xE001;" Opacity="0"/>
     </Grid>
     

As you can see the Rectangle is 20x20 but it have a container grid with 32 height. Just edit the Grid's height from 32 to 20 will look as below:

Oh wait, why is it still have a height of 32? It is because it have MinWidth and MinHeight set in the style

<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="32"/>

Finally, you can directly reset both value to 0 here, or just set the MinHeight outside as in Step 1.