ToggleButton style not working when in treeview

Question

I have a treeview with buckets and parts. Everything looks great except one feature. A property on bucket (bool IsEditable) allows the user to toggle editing on or off within the tree view for that node. But for some reason when wpf displays the collection of buckets in the treeview the togglebuttons do not show the proper text Here is my xaml:

    <Style TargetType="{x:Type ToggleButton}" x:Key="Editor">
        <Style.Triggers>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Content">
                    <Setter.Value>
                        <TextBlock Text="Edit"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter Property="Content">
                    <Setter.Value>
                        <TextBlock Text="Done"/>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

    <DataTemplate x:Key="HierarchialItemTemplate">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding BucketQty, UpdateSourceTrigger=PropertyChanged}"/>
            <TextBlock Text=" "/>
            <TextBlock Text="{Binding PartNum}"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="DisplayBucket">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Sequence}"/>
            <TextBlock Text=" "/>
            <TextBlock Text="{Binding Description}"/>
            <ToggleButton IsChecked="{Binding IsEditable}" Width="25" Style="{StaticResource Editor}"/>
        </StackPanel>
    </DataTemplate>

    <DataTemplate x:Key="EditBucket">
        <StackPanel Orientation="Horizontal">
            <TextBox Text="{Binding Sequence}"/>
            <TextBlock Text=" "/>
            <TextBox Text="{Binding Description}"/>
            <ToggleButton IsChecked="{Binding IsEditable}" Width="25" Style="{StaticResource Editor}"/>
        </StackPanel>
    </DataTemplate>

    <HierarchicalDataTemplate x:Key="TreeTemplate"
                              DataType="{x:Type domain:Bucket}" 
                              ItemsSource="{Binding Parts}"
                              ItemTemplate="{StaticResource HierarchialItemTemplate}"
                              >
        <ContentPresenter Content="{Binding}"
                          Style="{DynamicResource TreeNodeStyle}"/>
    </HierarchicalDataTemplate>

    <Style TargetType="{x:Type ContentPresenter}" x:Key="TreeNodeStyle">
        <Setter Property="ContentTemplate" Value="{StaticResource DisplayBucket}"/>
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsEditable}" Value="True">
                <Setter Property="ContentTemplate" Value="{StaticResource EditBucket}"/>
            </DataTrigger>
        </Style.Triggers>
    </Style>

The above is window.resources. In the Grid is

            <TreeView x:Name="Buckets"
                  ItemsSource="{Binding Model.Job.Buckets}"
                  ItemTemplate="{StaticResource TreeTemplate}"
                  >

So for whatever reason when I add nodes I get a bucket with a toggle button, but the toggle button text only shows up for the last node added. If I click a toggle button, the text disappears out of the previous toggle button and shows up in the one just clicked. The effect is similar to what this person experienced, but I have no idea what the guy was talking about who answered the question ToggleButton Style only works on last ToggleButton.

Any thoughts?

Dusan Dusan · Accepted Answer · 2014-01-23T22:15:40

You have couple of options (ordered from least to most dramatic):

1) Content

<Style TargetType="{x:Type ToggleButton}" x:Key="Editor">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Content" Value="Edit" />
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Content" Value="Done" />
        </Trigger>
    </Style.Triggers>
</Style>

2) ContentTemplate

<Style TargetType="{x:Type ToggleButton}" x:Key="Editor">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="Edit"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock Text="Done"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

3) ControlTemplate

<Style TargetType="{x:Type ToggleButton}" x:Key="Editor">
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <TextBlock Text="Edit"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <TextBlock Text="Done"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Trigger>
    </Style.Triggers>
</Style>

The reason why your approach didn't work is that TextBlock control is created only once (i.e. not created as part of template - ControlTemplate or DataTemplate).

ToggleButton style not working when in treeview

1 Answers