ElementName Binding Broken in a ControlTemplate

Question

Hi All,

I have ListView with Grouping Items. Grouping uses custom GroupStyle (Expander). I would like to have check box which will Expand and collapse all groups when. It works fine untill I click manually on the group header and expand or collapse that group. After clicking that particular group stops to respond on check box selection. Looks like binding is broken after user manually clicks on the group.

Please advise what I am doing wrong.

Thanks a lot.

Sincerely, Vlad.

<Window xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'&gt;
    <Window.Resources>
        <XmlDataProvider x:Key="MyData" XPath="/Info">
            <x:XData>
                <Info xmlns="">
                    <Item Name="Item 1" Category="Cat1" />
                    <Item Name="Item 2" Category="Cat1" />
                    <Item Name="Item 3" Category="Cat2" />
                    <Item Name="Item 4" Category="Cat2" />
                    <Item Name="Item 5" Category="Cat2" />
                    <Item Name="Item 6" Category="Cat3" />
                </Info>
            </x:XData>
        </XmlDataProvider>

        <CollectionViewSource x:Key='src' Source="{Binding Source={StaticResource MyData}, XPath=Item}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="@Category" />
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

        <ControlTemplate x:Key="ListTemplate" TargetType="ListView">
            <ListView BorderThickness="0"
                      ItemsSource='{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}'
                      DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisplayMemberPath}">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Margin" Value="0,0,0,5" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                            <Expander IsExpanded="{Binding IsChecked, ElementName=chkExpandAll, Mode=OneWay}">
                                                <Expander.Header>
                                                    <DockPanel>
                                                        <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100" />
                                                        <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}" />
                                                    </DockPanel>
                                                </Expander.Header>
                                                <Expander.Content>
                                                    <ItemsPresenter />
                                                </Expander.Content>
                                            </Expander>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>
        </ControlTemplate>
    </Window.Resources>

    <StackPanel>
        <CheckBox Name="chkExpandAll" IsChecked="True" Content="Expand All" />
        <ListView ItemsSource='{Binding Source={StaticResource src}}' DisplayMemberPath="@Name" BorderThickness="1" Template="{StaticResource ListTemplate}" />
    </StackPanel>

</Window>

Answer 1

It looks like the binding is broken since it's set to be OneWay with the checkbox, then if you click any of the expanders it will then break the binding. Setting it to be TwoWay will cause it to always work but expanding one item will cause them all to expand, which isn't very useful.

I believe the solution to this will be to not use Bindings but instead to use Storyboards. You could fire a storyboard which will cause all of the expanders to be set to true/false, regardless of their current state. Updating the checkbox might be trickier though, since there is some logic required to see if all checkboxes or only some are checked.

Answer 2

Thanks for reply,

Do you have example of the how to do it via Storyboard? You can use my example, it is working in XAMLPad and KAXAML, just copy and paste. I also did not understand about updating check box. I have only one check box on the top, which should expand all Expanders or collapse them all. I don't think I need to worry how to update it.

Thanks again.

Sincerely, Vlad.

Answer 3

I found solution for the problem. What needs to be done is specify Mode=TwoWay and UpdateSourceTrigger=Explicit, so this way it is not breaking Binding and everything works fine. Bellow is an example of working code.

I found solution for the problem. What needs to be done is specify Mode=TwoWay and UpdateSourceTrigger=Explicit, so this way it is not breaking Binding and everything works fine. Bellow is an example of working code.

<Window xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'&gt;
    <Window.Resources>
        <XmlDataProvider x:Key="MyData" XPath="/Info">
            <x:XData>
                <Info xmlns="">
                    <Item Name="Item 1" Category="Cat1" />
                    <Item Name="Item 2" Category="Cat1" />
                    <Item Name="Item 3" Category="Cat2" />
                    <Item Name="Item 4" Category="Cat2" />
                    <Item Name="Item 5" Category="Cat2" />
                    <Item Name="Item 6" Category="Cat3" />
                </Info>
            </x:XData>
        </XmlDataProvider>

        <CollectionViewSource x:Key='src' Source="{Binding Source={StaticResource MyData}, XPath=Item}">
            <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="@Category" />
            </CollectionViewSource.GroupDescriptions>
        </CollectionViewSource>

        <ControlTemplate x:Key="ListTemplate" TargetType="ListView">
            <ListView BorderThickness="0"
                      ItemsSource='{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsSource}'
                      DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=DisplayMemberPath}">
                <ListView.GroupStyle>
                    <GroupStyle>
                        <GroupStyle.ContainerStyle>
                            <Style TargetType="{x:Type GroupItem}">
                                <Setter Property="Margin" Value="0,0,0,5" />
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="{x:Type GroupItem}">
                                          <StackPanel>
                                            <Expander Name="exp" IsExpanded="{Binding IsChecked, ElementName=chkExpandAll, Mode=TwoWay, UpdateSourceTrigger=Explicit}">
                                                <Expander.Header>
                                                    <DockPanel>
                                                        <TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100" />
                                                        <TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}" />
                                                    </DockPanel>
                                                </Expander.Header>
                                                <Expander.Content>
                                                    <ItemsPresenter />
                                                </Expander.Content>
                                            </Expander>
                                            </StackPanel>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </GroupStyle.ContainerStyle>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>
        </ControlTemplate>
    </Window.Resources>

    <StackPanel>
        <CheckBox Name="chkExpandAll" Content="Expand All" />
        <ListView ItemsSource='{Binding Source={StaticResource src}}' DisplayMemberPath="@Name" BorderThickness="1" Template="{StaticResource ListTemplate}" />
    </StackPanel>

</Window>