WinRT XAML - TreeView and Binding - styling the TreeViewItems

Jun 5, 2013 at 6:39 PM
I'm developing a Windows 8 Store app and have following xaml defined:
<xc:TreeView ItemsSource="{Binding Source={StaticResource feedTree}}" 
                ItemTemplate="{StaticResource TreeItemTemplate}" 
                BorderThickness="0"
                Background="Transparent"
                Foreground="White">
</xc:TreeView>
And in the Page.Resources:
<Page.Resources>
    <DataTemplate x:Key="TreeItemTemplate">
        <xcdata:DataTemplateExtensions.Hierarchy>
            <xcdata:HierarchicalDataTemplate 
                    ItemsSource="{Binding Children}" />
        </xcdata:DataTemplateExtensions.Hierarchy>
        <Grid HorizontalAlignment="Stretch">
            <TextBlock Text="{Binding Title}" Grid.Column="0"/>
        </Grid>
    </DataTemplate>
</Page.Resources>
The binding and stuff works like a charm. However, I'd like the change the default TreeViewItem Style to not show
  • the expandable triangle,
  • rounded corners
  • expand the content to the full width of the control
  • be always expanded
At the end, It should look a bit like the TreeView in the native Mail-App

I'm just stuck and can't get a handle to the Style of the TreeViewItem. Following test should have worked, but didnt...
<Page.Resources>
   <Style TargetType="xc:TreeViewItem" x:Key="LocalTreeViewItem">
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="BorderBrush" Value="Red"/>
    </Style>
</Page.Resources>
Any tips and hints would be really cool :)

Thanks,
MC
Coordinator
Jun 5, 2013 at 6:48 PM
I think the TreeView sample in the app has an option to switch between styles. It changes the entire style, but maybe you can get something out of it? It might be a ItemContainerStyle property that you would need to change, but I don't know if this will just work if you set it on the TreeView itself or whether the hierarchical templates would need to be changed too.

Note that I made the TreeView control mostly to support creating tools like my debugging tools and it might not necessarily work well for store apps. I doubt the TreeView works well with virtualization for once, so with a large number of items you might get into performance issues. For such cases I would recommend an approach where you would use a ListBox/ListView as in this StackOverflow answer: http://stackoverflow.com/questions/14096168/listviews-item-insert-animations-in-winrt
Jun 5, 2013 at 7:37 PM
Wow, thanks for the fast response... And yes, the TouchTreeViewItemStyle +TouchTreeViewStyle is exactly what I was searching for! That should do the trick. Just have to craw now through this massive template :)

Thanks,
MC