TreeView Templating madness

Question

i have a few synchronized instances of a TreeView..

it works pretty well, and i am binding some properties to the ViewModel.

<Style x:Key="FlattenedTreeViewItem" TargetType="{x:Type TreeViewItem}">

    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="IsExpanded" Value="{Binding IsExpanded}" />
    <Setter Property="IsSelected" Value="{Binding IsSelected}" />

For one reason or another, i decided to override the Template of TreeViewItem.

this erased property bindings above

All i want to do, is bring back the default selection back to the TreeViewItem, but nothing seems to work. I tried using a simple Trigger on IsSelected and setting border/background/foreground.. nothing is showing any changes.

I've googled around, and anything i found so far, was a page of XAML just to set Selected style?? Isn't there a simple way to bring it back into the template?

same goes for IsExapnded, i have to use this:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="ExpansionStates">
        <VisualState x:Name="Expanded">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemsHost">
                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Collapsed" />
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

seems excessive, but at least this one works.

With selected, i can't get it to work using simple trigger.. and i can't quite bring the Selected style, and i dont want to bring in some huge ugly chunk of xaml .

here is my full template:

<Setter Property="Template">
        <Setter.Value>

            <ControlTemplate TargetType="TreeViewItem">

                <StackPanel>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="ExpansionStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemsHost">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Collapsed" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                    <ContentPresenter ContentSource="Header" />
                    <ItemsPresenter Name="ItemsHost" Visibility="Collapsed" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

Answer 1

Templates are "huge ugly chunks of XAML", that's the reality, nothing you can do about that.

Answer 2

The shortest (and not so pretty) route: wrap the StackPanel with a border and change its background in a Trigger.

The XAML:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="TreeViewItem">
            <Border x:Name="Bd" Background="Transparent">
            <StackPanel>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="ExpansionStates">
                    <VisualState x:Name="Expanded">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ItemsHost">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Collapsed" />
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
                <ContentPresenter ContentSource="Header" />
                <ItemsPresenter Name="ItemsHost" Visibility="Collapsed" />
            </StackPanel>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="Bd" Property="Background" Value="HotPink"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

NOTE: - Change "HotPink" to desired colour

NOTE 2: - For a TreeViewItem functionality, you'd better add a ToggleButton that will allow the user to expand\collapse the item. The minimum for it to work (somewhere in the stackPanel):

<ToggleButton IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>

P.S. - wait till you see the template for TabItem in Luna theme....

Answer 3

To clean up your page you might be able to use a global "merged resource dictionary" and stuff your template there.

http://msdn.microsoft.com/en-us/library/aa350178.aspx