Templating : Using a GridSplitter in a HierarchicalDataTemplate

Short question: How do I add a GridSplitter to the HierarchicalDataTemplate "FancyNodeTemplate" in the Obsidian Templating sample?

Long question: I'm trying to template the property grid, and am using the Templating samples to great success (albeit slowly while I work out how it all glues together).  I'm trying to mimic, where possible, the behaviour of the untemplated property grid so I'm looking to add a GridSplitter to the Obsidian Templating sample.

Unfortunately when I do so,  things don't quite work as expected.  the splitter splits only the local grid on that row, not the others.

ie:

      <HierarchicalDataTemplate x:Key="FancyNodeTemplate" ItemsSource="{Binding Path=Children}">

        <Grid Margin="0,-1,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="1" />
                <RowDefinition Height="20" />
                <RowDefinition Height="1" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1" />
                <ColumnDefinition Width="20" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="1" />
                <ColumnDefinition Width="3*" />
                <ColumnDefinition Width="1" />
            </Grid.ColumnDefinitions>

            <Border Grid.Row="1" Grid.Column="1" >
                <!-- ToggleButton snipped-->
            </Border>

            <Border HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2">
                <TextBlock Text="{Binding Path=Node.HumanName}" Padding="2" />
            </Border>

            <GridSplitter HorizontalAlignment="Stretch" Grid.Column="3" Grid.Row="1"/>

            <Border Margin="0" Padding="0" Grid.Row="1" Grid.Column="4">
                <!-- ContentControl snipped-->
            </Border>

        </Grid>
        <!-- HierarchicalDataTemplate.Triggers snipped-->
    </HierarchicalDataTemplate>

I must be missing something to do with SharedSizeGroup(s) etc, but I can't quite work it out.  any hints?

Take a look at the GridStyles sample.  These styles are much more comprehensive and include column resizing support.  (They are unfortunately correspondingly bigger and therefore harder to understand, which is why we still ship the Templating samples.)  You can find the source code for these styles in the Source / Styles folder under the installation directory (this is included in all editions).

The key trick is to build your template around a TreeListView (which is what the default grid and the custom styles) do rather than a TreeView (which is what the Obsidian sample does for simplicity / familiarity).  TreeListView has sizing support built in via the framework GridView* classes (which are what lie behind the ListView and support its column resizing feature).

Awesome, thanks for the pointer.  Took me quite a while to get my own "custom" style actually hooked up and working, but that seems to be just ticketty-boo now.  In case it helps those following on who are also new to WPF like me, the following are the actual steps I took to get an "external" copy of Alloy.xaml (ie: not one in Mindscape's namespace) being used as a style.

1) Copy Alloy.xaml to MyPropertyGridStyle.xaml

2) Change the namespace stuff in there to:

<ResourceDictionary
  x:Class="GridStyles.Styles.MyPropertyGridStyle"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:s="clr-namespace:System;assembly=mscorlib"
  xmlns:ms="clr-namespace:Mindscape.WpfPropertyGrid;assembly=Mindscape.WpfPropertyGrid"
  xmlns:customstyle="clr-namespace:GridStyles.Styles"
  xmlns:styles="clr-namespace:Mindscape.WpfPropertyGrid.Styles;assembly=Mindscape.WpfPropertyGrid"
  xmlns:local="clr-namespace:Mindscape.WpfPropertyGrid;assembly=Mindscape.WpfPropertyGrid">

3) Change the "master" style line deeper in the file to:

<Style x:Key="{x:Static customstyle:MyPropertyGridStyle.StyleKey}" TargetType="{x:Type ms:PropertyGrid}">

4) Implement a code-behind file for the resource dictionary which defines the StyleKey property

    public static ComponentResourceKey StyleKey
    {
      get { return new ComponentResourceKey(typeof(MyPropertyGridStyle), "Style"); }
    }

5) Set the property grid's style to my new style key.

Now this might seem totally trivial to some, but I actually spent a while trying to work out how to reference the Mindscape.PropertyGrid.Styles namespace from outside of MindsScape's libraries, and also a while digging into why my style wasn't being applied at all (it turned out to be point #3 above).

Posted in case it helps :)

And thanks again Ivan for the pointer.

Hey mcdrewski, thanks for the great post. I was having a whole bunch of problems trying to base my style off of Alloy.xaml. I could not get the namespaces to resolve. This fixed that problem.

I have 2 questions:

1. Where are you defining #3 in your file? Is it in your resource lib or the window you have the prop grid in? You are correct in that I can not get my new style to show in the prop grid.

2. Are you defining this resource lib in a separate lib project? Is this why you need the code behind? I am defining my Alloy style in the same project as where it is being used. Could I eliminate this step?

Do you some more complete code samples? Wait that's 3 questions. :-)

Thanks

Er

Nevermind, I figured it out. Thanks so much for your help

Er

I am also new to the wpf way and found this thread, but still can't get the modified style to take in the grid. We are looking at this grid for our product. And I have looked at the GridStyles sample code.  One issue too is I can't set the style in the xaml let is done in the sample. It is not seeing my style, which is the "Blue" version.

Any suggestions? 

Without seeing your code it's hard to be sure, but it may be that you have not merged the relevant resource dictionary.  Have you created your own style or are you using the provided "Blue" style?

If you have created your own based on Blue, you should give it a different key (e.g. <Style x:Key="RoysCustomBlue">), you must merge your own resource dictionary rather than ours, and you must reference the different key on the grid element (e.g. <ms:PropertyGrid Style="{StaticResource RoysCustomBlue}">).

If you are using the provided "Blue" style and it's not working, check that you have the ResourceDictionary.MergedDictionaries element as per the GridStyles sample, and that the PropertyGrid.Style attribute uses the StaticResource extension with the appropriate key reference: <ms:PropertyGrid Style="{StaticResource {x:Static ms:Blue.StyleKey}}">.

Also check the Output window for errors.