WPF click on label change checkbox isChecked property [duplicate]

Question

I’m new to WPF and try (in my opinion) an easy task but I didn’t get it. Even Google won’t help me, or I asked the wrong question.

I have a checkbox and a label; I wish that a click on the label change the isChecked property of the checkbox.

I want to do this completely in XAML with no code behind, because I wish to keep the code behind file clean of unnecessary code. Please don’t discuss on this point. I know it’s a single line of code doing this in code behind!

Working with event setter on the label doesn’t solve the problem because you can only set the handler (which is in code behind of course). Using a storyboard doesn’t help because there is no way to check the actual value of the property.

Does anyone have a good hint? Maybe I overlooked something. Please provide some code snippet for the solution.

Aquarist

This is a dupe - the accepted answer even just cites another question. – Vainglorious

Answer 1

Paste this code into kaxaml

You'll see that clicking on the label toggles the checkbox.

[See this SO answer by Kent]

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel>
    <CheckBox IsChecked="{Binding IsChecked, ElementName=checkbox}" Content="Hello">
        <CheckBox.Template>
            <ControlTemplate TargetType="CheckBox">
                <ContentPresenter/>
            </ControlTemplate>
        </CheckBox.Template>
    </CheckBox>
    <CheckBox x:Name="checkbox" Content="A normal checkbox"/>
</StackPanel>
</Page>

Inulin

I realy overlooked it... thanks! – Aquarist

I found that in a WinRT XAML app on Windows Phone, I didn't need to use the template - the default template worked fine (the key was the Content property). – Phlox

Answer 2

You can also do this:

<CheckBox>
    <Label Content="Your text here"/>
</CheckBox>

One limitation though is that the text will have to be on the right side of the checkbox.

Einberger

Wow, thanks, I always thought there must be a more simple solution and here it is! – Henton

I love this. However, the alignment becomes a little bit off between the label and the checkbox. – Trenttrento

@Trenttrento I know this is late, but you can fix that by adding VerticalContentAlignment="Center" on the CheckBox. Note that this is distinct from VerticalAlignment which affects the CheckBox itself. – Pegg