How do I bind text of checkbox to Header of Expander

Question

I have an Expander that contains 3 checkbox.

<Expander Header="Bind Here" Grid.Row="3" Grid.ColumnSpan="2">
     <StackPanel >
          <CheckBox>Test 1</CheckBox>
          <CheckBox>Test 2</CheckBox>
          <CheckBox>Test 3</CheckBox>
     </StackPanel>
</Expander>

I want to append the text of a checked checkbox to the Header of the expander.

Is it possible using binding?

Answer 1

Thanks for the answers but here's what I did:

<Expander Header="{Binding SelectedTitle}" Grid.Row="3" Grid.ColumnSpan="2">
 <StackPanel >
      <CheckBox IsChecked="{Binding Path=SelectedItem.isTest1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">Test 1</CheckBox>
      <CheckBox IsChecked="{Binding Path=SelectedItem.isTest2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">Test 2</CheckBox>
      <CheckBox IsChecked="{Binding Path=SelectedItem.isTest3, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">Test 3</CheckBox>
 </StackPanel>

 public String SelectedTitle
    {
        get
        {
            StringBuilder builder = new StringBuilder();
                if (SelectedItem.isTest1)
                    builder.Append("Browse subfolders, ");
                if (SelectedItem.isTest2)
                    builder.Append("Enter filename at the panel, ");
                if (SelectedItem.isTest3)
                    builder.Append("Always show scan settings, ");
                if (builder.Length == 0)
                    builder.Append("None");


            return builder.ToString().Trim().TrimEnd(',');
        }
    }

private void SelectedItem_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        UpdateProperty("SelectedTitle");
    }

Answer 2

Here is a cool way to do so:(Binding + Converter)

XAML:

 <Expander Grid.Row="3" Grid.ColumnSpan="2" Name="expander" Width="500">
            <Expander.Resources>
                <local:ExpanderHeaderConverter x:Key="ExpanderHeaderConverter" />
            </Expander.Resources>
            <Expander.Header>
                <TextBlock >
                    <TextBlock.Text>
                        <MultiBinding Converter="{StaticResource ExpanderHeaderConverter}">
                            <Binding ElementName="c1" Mode="OneWay"/>        
                            <Binding ElementName="c1" Mode="OneWay" Path="IsChecked"/>
                            <Binding ElementName="c2" Mode="OneWay"/>         
                            <Binding ElementName="c2" Mode="OneWay" Path="IsChecked"/>
                            <Binding ElementName="c3" Mode="OneWay"/>
                            <Binding ElementName="c3" Mode="OneWay" Path="IsChecked"/>
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </Expander.Header>
            <StackPanel>
                <CheckBox Name="c1" >Test 1</CheckBox>
                <CheckBox Name="c2">Test 2</CheckBox>
                <CheckBox Name="c3">Test 3</CheckBox>
            </StackPanel>
        </Expander>

Converter:

public class ExpanderHeaderConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string output = string.Empty;
        for (int i = 0; i < values.Length; i+=2)
        {
            if ((values[i + 1] as bool?) == true)
                output += (values[i] as CheckBox).Content.ToString()+" ";
        }
        return output;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Answer 3

When your checkbox is checked you need to track if it has been checked or not, you can do this either by binding or event handling or triggers.

Following is a quick example

---

Using Binding (XAML Only)

if you are keen to have it as binding you can try having triggers and setters on control template for expander like this (I leave it to user to edit and produce a minimal xaml the following piece works but may not be minimal) --

<Window.Resources>
    <ControlTemplate x:Key="ControlTemplate" TargetType="Expander">
        <Expander x:Name="MyExpander">
            <StackPanel Orientation="Vertical">
                <CheckBox x:Name="Box1">Test 1</CheckBox>
                <CheckBox x:Name="Box2">Test 2</CheckBox>
                <CheckBox x:Name="Box3"> Test 3</CheckBox>
            </StackPanel>
        </Expander>
        <ControlTemplate.Triggers>
            <Trigger  SourceName="Box1" Property="CheckBox.IsChecked" Value="True">
                <Setter Property="Header"
                        TargetName="MyExpander"
                        Value="{Binding Content, ElementName=Box1 }" />
            </Trigger>
            <Trigger SourceName="Box2"
                     Property="CheckBox.IsChecked"
                     Value="True">
                <Setter Property="Header" TargetName="MyExpander"
                        Value="{Binding Content, ElementName=Box2 }" />
            </Trigger>
            <Trigger SourceName="Box3"
                     Property="CheckBox.IsChecked"
                     Value="True">
                <Setter Property="Header"
                        TargetName="MyExpander"
                        Value="{Binding Content, ElementName=Box3 }" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

<Expander Template="{StaticResource ControlTemplate}"/>

---

or if you don't mind code behind

Code Behind Way

private void ToggleButton_OnChecked(object sender, RoutedEventArgs e)
    {
        var checkBox = ((CheckBox) sender);

        if (checkBox.IsChecked != null && checkBox.IsChecked.Value)
        {
            MyExpander.Header = checkBox.Content.ToString();
        }
    }

Xaml --

<Expander x:Name="MyExpander">
    <StackPanel>
        <CheckBox Checked="ToggleButton_OnChecked">Test 1</CheckBox>
        <CheckBox  Checked="ToggleButton_OnChecked">Test 2</CheckBox>
        <CheckBox  Checked="ToggleButton_OnChecked">Test 3</CheckBox>
    </StackPanel>
</Expander>