Center checkbox in UniformGrid's cells in WPF

Question

I want to center and stretch checkbox in UniformGrid's cell.
I've tried to do it in many ways:

<UniformGrid>
        <CheckBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
                  HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
        <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" />
        <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" ClipToBounds="True" />
        <CheckBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True" />

Selected cell (0, 0):
Selected cell (1, 0):

but it doesn't satisfy me because I want to stretch (just like in cell (0,0)) and center (just like in (1,0)) those checkboxes in their cells simultaneously.

How can I do it?

[edit 1]

I'm trying to make it so that I don't have to click the little check but instead can click the entire cell.

[edit 2]

Actually I want to add those checkboxes from C# code so if solution made in XAML is not 'portable' to C# language it will be not very helpful.

Are you trying to make it so that you don't have to click the little check but instead can click the entire cell? — Andy, Jun 13 '12 at 15:20

Trevor Elliott · Accepted Answer · 2012-06-13T17:14:21.583

If I use this simple markup with the default Stretch values:

<UniformGrid>
    <CheckBox Content="This is a checkbox" />
    <CheckBox Content="This is a checkbox" />
    <CheckBox Content="This is a checkbox" />
    <CheckBox Content="This is a checkbox" />
</UniformGrid>

I am able to click anywhere in each cell of the UniformGrid to check and uncheck the Checkbox in that cell.

Functionally this is doing what you want. if you want to change the appearance of the checkbox, you can use a ControlTemplate.

If you don't want to change the size of the CheckBox and you just want to center it visually while being able to click the cell to check it, you could use a template like this:

<CheckBox>
    <CheckBox.Template>
        <ControlTemplate TargetType="{x:Type CheckBox}">
            <Grid Background="Transparent">
                <CheckBox IsChecked="{TemplateBinding Property=IsChecked}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </CheckBox.Template>
</CheckBox>

EDIT:

To apply it as a resource at runtime, write the XAML in a resource section of the appropriate scope. You can place it in the local Resources dictionary if you only need it in one control, or if you want access to it globally, put it in the App.xaml like so:

<Application.Resources>
    <ControlTemplate x:Key="StretchedCheckBox" TargetType="{x:Type CheckBox}">
        <Grid Background="Transparent">
            <CheckBox IsChecked="{TemplateBinding Property=IsChecked}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </ControlTemplate>
</Application.Resources>

Notice how it has a key "StretchedCheckBox". Now you can use that to apply it in code:

ControlTemplate stretchedTemplate = FindResource("StretchedCheckBox") as ControlTemplate;

CheckBox chkBox = new CheckBox();
chkBox.Template = stretchedTemplate;

You'll have to x:Null the style of your internal checkbox or you'll end up with a stack overflow. — Andy, Jun 13 '12 at 15:51
+1 for the CheckBox template that centers the CheckBox while still letting you click anywhere in the Grid to check/uncheck it — Rachel, Jun 13 '12 at 15:52
@Andy How might I reproduce this stack overflow? It works fine for me. — Trevor Elliott, Jun 13 '12 at 15:54
The control template for the checkbox contains a checkbox, so it looks for the control template for the checkbox.. which contains a checkbox. The actual exception is Infinite loop in references found while processing the Template for an element named '' of type 'System.Windows.Controls.CheckBox'. — Andy, Jun 13 '12 at 15:54
Sorry I've just noticed that you've not globally set your style, it's actually inside each checkbox, the overflow issue I mention will only happen if you're defining a single style for all checkboxes — Andy, Jun 13 '12 at 15:58
OK, that works great but I need to add those checkboxes from C# code. How can I add _ControlTemplate_ to checkbox from C# source code? — patryk.beza, Jun 13 '12 at 16:59
Honestly, the easiest way is to extract the ControlTemplate as a resource and apply it to the CheckBox in code. I will post an example if you're not sure how to do that. — Trevor Elliott, Jun 13 '12 at 17:10

score 1 · Answer 2 · answered Jun 13 '12 at 15:44

I don't think you can affect the size of a CheckBox like that because the size is pre-determined in the control template

One solution would be to use a LayoutTransform to scale the CheckBox to be larger

<CheckBox>
    <CheckBox.LayoutTransform>
        <ScaleTransform ScaleX="5" ScaleY="5" />
    </CheckBox.LayoutTransform>
</CheckBox>

It should be noted that this scales the text next to the CheckBox as well as the CheckBox itself, and sometimes doesn't look very nice depending on how you scale it.

Another alternative solution is to copy the example CheckBox template from MSDN, and create a larger CheckBox

Center checkbox in UniformGrid's cells in WPF

2 Answers2

Linked