CODEWITHSUNDEEP
c#xamlcheckboxwin-universal-appuwp
michalsol
michalsol

Reputation: 752

UWP, XAML - making CheckBox empty

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

I don't want that empty aqua-color space

<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.

Upvotes: 11

Views: 2046

Answers (1)

Ryan
Ryan

Reputation: 815

  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:

enter image description here

  1. 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:

enter image description here

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.

enter image description here

Upvotes: 26

Related Questions