user565660
user565660

Reputation: 1191

Change width of checkable area of checkbox

I have a CheckBox object and it doesn't have any text associated with it. It is in a Grid which has another coulmn used as the label for it. The whitespace next to the checkbox you can click and it will toggle checkbox I want it just be the area of the actual checkbox and not the white space around it(because the text for it is set to nothing).

I tried setting the width = 5 but that didn't make a difference

thank you very much!!

Upvotes: 7

Views: 4476

Answers (2)

Joe White
Joe White

Reputation: 97818

It sounds like your CheckBox is stretching to the whole width of the grid cell (with all of that width clickable), and you don't want it to stretch.

Set the CheckBox's HorizontalAlignment property to Left (or Center, or Right). Then it will be exactly the width it needs to be for the checkbox, rather than stretching to the entire width provided by its parent.

Upvotes: 11

CodeWarrior
CodeWarrior

Reputation: 7468

For that you will have to go into the checkboxes template and modify that. Specifically you should go in and remove the ContentPresenter which is what displays the text. Since you have no text, it is not a problem. The end result will look something like this. Just add that style to your checkbox.

The default templates ContentPresenter is housed under the Bullet. Because of this, clicking on that content presenter (even if empty, I think it has a default size) will activate the controls click logic.

<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="Background" Value="{StaticResource CheckRadioFillNormal}"/>
    <Setter Property="BorderBrush" Value="{StaticResource CheckRadioStrokeNormal}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="FocusVisualStyle" Value="{StaticResource EmptyCheckBoxFocusVisual}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CheckBox}">
                <BulletDecorator Background="Transparent" SnapsToDevicePixels="true">
                    <BulletDecorator.Bullet>
                        <Microsoft_Windows_Themes:BulletChrome BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" IsChecked="{TemplateBinding IsChecked}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}"/>
                    </BulletDecorator.Bullet>
                </BulletDecorator>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasContent" Value="true">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
                        <Setter Property="Padding" Value="2,0,0,0"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 2

Related Questions