CODEWITHSUNDEEP
wpfxaml
Bob Tway
Bob Tway

Reputation: 9613

How to style CheckBox to remove border

I've got a CheckBox control in one of my windows that's just there to display whether something is true/false - I don't want my users interacting with it.

By default, setting IsEnabled="False" grays out the box, which is fine. However, I thought it would be neater and more obvious if I kept a solid check mark and removed the border.

At first I set BorderThickness="0", which seemed to do nothing. So I went to the style instead, and put this in my resource dictionary:

<Style x:Key="BorderlessCheckBox" TargetType="{x:Type CheckBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CheckBox">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <Border Background="#FFAEB3B9" BorderThickness="0" />
                    </BulletDecorator.Bullet>
                </BulletDecorator>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This removes the textbox completely - as best I can tell what I'm inadvertently doing overriding the entire style and, since I'm not specifying the check as part of my style, no check is appearing.

Is there a straightforward way of removing the border from a textbox without re-styling the entire control from scratch?

EDIT: I did try BorderThickness:

enter image description here

Upvotes: 0

Views: 3948

Answers (2)

wyattk
wyattk

Reputation: 21

I just ran into this myself and found out the following thanks to Bart's response above. I edited a copy of the template for MahApps Metro Checkbox and below is the variable used. Doing the following will remove the rectangle around the checkbox.

In Style

<Setter Property="mah:CheckBoxHelper.CheckStrokeThickness" Value="0" />

or directly in checkbox xaml

mah:CheckBoxHelper.CheckStrokeThickness="0"

Upvotes: 2

Bart
Bart

Reputation: 10015

You can simply remove the border from the CheckBox by setting the BorderThickness property.

<CheckBox Content="Test" BorderThickness="0" />

If you want to edit a control template, the easiest way is to open your solution in Blend, right click the control and edit the template.

Edit template

Drill down the control tree and you'll find the checkBoxBorder control which you want to hide. Here you see that the BorderThickness comes from a TemplateBinding (thus from the property on the CheckBox itself):

<Border x:Name="checkBoxBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
    <Grid x:Name="markGrid">
        <Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/>
        <Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/>
    </Grid>
</Border>

Upvotes: 1

Related Questions