Using a DataTemplate to attach OnClick to bool change

Question

Hi,

I want to create a datatemplate (in code, but thats not the point) which allows me to click on an item and set its bool value. What I managed to create was a combination of CheckBox and TextBlock, which is colored depending on the bool value.

So far so good... But how can I tell WPF: If anybody clicks on the TextBlock, change the bool value. (removing the need for the ugly checkbox)

Code so far and working:

var dT = new DataTemplate(typeof(DirectoryWrapper));
var stackPanel = new FrameworkElementFactory(typeof(StackPanel));

var style = new Style(typeof(TextBlock));
var t = new DataTrigger() {Binding = new Binding(DirectoryWrapper.PropString(x => x.IsSelected)), Value = true};
t.Setters.Add(new Setter() { Property = TextBox.ForegroundProperty, Value = new SolidColorBrush(Colors.Green) });
style.Triggers.Add(t);


var box = new FrameworkElementFactory(typeof(CheckBox));
box.SetBinding(CheckBox.IsCheckedProperty, new Binding(DirectoryWrapper.PropString(x => x.IsSelected)));
stackPanel.AppendChild(box);

var entry = new FrameworkElementFactory(typeof(TextBlock));
entry.SetBinding(TextBlock.TextProperty, new Binding(DirectoryWrapper.PropString(x => x.Path)));
entry.SetValue(TextBox.StyleProperty, style);
stackPanel.AppendChild(entry);

dT.VisualTree = stackPanel;
return dT;

Answer 1

Cant you use a Toggle button and create whatever style/Control template you need to get your desired look. A ToggleButton will set its IsChecked property to true or false based on your click. So bind your Data property to ToggleButton.IsSelected

Answer 2

This is trivial in WPF: Just template your CheckBox to look like a TextBlock:

<CheckBox>
  <CheckBox.Template>
    <ControlTemplate>
      <TextBlock Binding="{Binding WhateverYouWant}" ... />
    </ControlTemplate>
  </CheckBox.Template>
</CheckBox>

This might be extended by adding a Border around the TextBlock or anything else you like to give it more pizzaz.

The reason you want to use CheckBox instead of ToggleButton is that CheckBox has additional keyboard suport, plus accessibilty support to map into the checkbox paradigm on the accessibilty device. ToggleButton doesn't give you these features.

Answer 3

Ok, just for convience, the working code for Ray Burns Solution:

(For beginners: The PropString function is just a wrapper to remove magic strings, use string of property name you bind to here...)

var dT = new DataTemplate(typeof (DirectoryWrapper));

// Create style to set text red if checked
var style = new Style(typeof (TextBlock));
var t = new DataTrigger() {Binding = new Binding(PropString(x => x.IsSelected)), Value = true};
t.Setters.Add(new Setter() {Property = Control.ForegroundProperty, Value = new SolidColorBrush(Colors.Red)});
style.Triggers.Add(t);

// Create text box
var entry = new FrameworkElementFactory(typeof(TextBlock));
entry.SetBinding(TextBlock.TextProperty, new Binding(PropString(x => x.Path)));
entry.SetValue(FrameworkElement.StyleProperty, style);

// Put into template
var boxTemplate= new ControlTemplate(typeof(CheckBox)) {VisualTree = entry};

// Create box and set template
var box = new FrameworkElementFactory(typeof (CheckBox));
box.SetBinding(ToggleButton.IsCheckedProperty, new Binding(PropString(x => x.IsSelected)));
box.SetValue(Control.TemplateProperty, boxTemplate);

dT.VisualTree = box;
return dT;