Center checkbox in UniformGrid's cells in WPF

问题

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.

回答1:

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;

回答2:

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

来源：https://stackoverflow.com/questions/11018014/center-checkbox-in-uniformgrids-cells-in-wpf

标签

wpf

checkbox

centering

stretching