UWP, XAML - making CheckBox empty

偶尔善良 提交于 2019-12-10 04:04:53

问题


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.


回答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:

  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:

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.



来源:https://stackoverflow.com/questions/38040203/uwp-xaml-making-checkbox-empty

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!