locked
Using double-click event on grid splitter to collapse content RRS feed

  • Question

  •  I am trying to create a grid splitter that will collapse the content to the left when double-clicked. I would like to do this all in XAML and none in the code-behind. I can capture a double-click event on the grid splitter but do not know what type of controls to use and how to create the control structure. Any help will be much appreciated.

    Thanks,
    Todd

        <Grid x:Name="ECLNGrid" Grid.IsSharedSizeScope="True" Grid.Row="1" ShowGridLines="False" > 
          <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="0"/>  
            <ColumnDefinition Width="185" MaxWidth="185" MinWidth="40"/>  
            <ColumnDefinition Width="*"/>  
            <ColumnDefinition Width="5"/>  
          </Grid.ColumnDefinitions> 
          <Grid.RowDefinitions> 
            <RowDefinition Height="*"/>  
            <RowDefinition Height="5" MaxHeight="5"/>  
          </Grid.RowDefinitions> 
          <GridSplitter Style="{DynamicResource PfxVerticalGridSplitter}" Grid.Column="1"/>  
          <Grid Grid.IsSharedSizeScope="True" Grid.Column="1">  
            <CCH:PFXLabel Margin="5,0,0,0" Style="{DynamicResource PfxLeftNavSections}"/>  
            <Border Margin="6,0,6,1" x:Name="HideLogo" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="#FFFFFF" BorderThickness="0"/>  
            <Grid Grid.IsSharedSizeScope="True" Margin="5,0,5,56" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">  
              <Grid.RowDefinitions> 
                <RowDefinition Height="*"/>  
                <!--<RowDefinition Height="Auto"/>  
                <RowDefinition Height="Auto"/>--> 
              </Grid.RowDefinitions> 
              <ScrollViewer Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}" VerticalScrollBarVisibility="Auto" Margin="1,0,1,0">  
                <StackPanel > 
                  <CCH:PFXExpander VerticalAlignment="Top" Grid.Row="0" Grid.IsSharedSizeScope="True" Style="{DynamicResource PfxLeftNavSectionExpander}">  
                    <Expander.Header> 
                      <StackPanel Orientation="Horizontal">  
                        <Image Source="../Images/placeholder_16.png" Height="16" Width="16"/>  
                        <CCH:PFXTextBlock Style="{DynamicResource PfxLeftNavText}">Section 1</CCH:PFXTextBlock> 
                      </StackPanel> 
                    </Expander.Header> 
                    <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
                    <CCH:PFXTreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" Style="{DynamicResource PfxLeftNavTreeView}">  
                      <TreeViewItem HorizontalAlignment="Stretch" Header="Profile information" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}">  
                        <TreeViewItem Header="Zip code area" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Address/phone" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Administrative" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                      </TreeViewItem> 
                      <TreeViewItem Header="Work product info" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}">  
                        <TreeViewItem Header="Work product 1" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 2" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 3" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 4" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 5" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 6" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                      </TreeViewItem> 
                    </CCH:PFXTreeView> 
                    <!--</ScrollViewer>--> 
                  </CCH:PFXExpander> 
                  <CCH:PFXExpander VerticalAlignment="Top" Grid.Row="1" Grid.IsSharedSizeScope="True" Style="{DynamicResource PfxLeftNavSectionExpander}">  
                    <Expander.Header> 
                      <StackPanel Orientation="Horizontal">  
                        <Image Source="../Images/placeholder_16.png" Height="16" Width="16"/>  
                        <CCH:PFXTextBlock Style="{DynamicResource PfxLeftNavText}">Section 2</CCH:PFXTextBlock> 
                      </StackPanel> 
                    </Expander.Header> 
                    <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
                    <CCH:PFXTreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView2" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" Style="{DynamicResource PfxLeftNavTreeView}">  
                      <TreeViewItem HorizontalAlignment="Stretch" Grid.IsSharedSizeScope="True" Header="Profile information" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}">  
                        <TreeViewItem Header="Zip code area" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Address/phone" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Administrative" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                      </TreeViewItem> 
                      <TreeViewItem Header="Work product info" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}">  
                        <TreeViewItem Header="Work product 1" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 2" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 3" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 4" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 5" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 6" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                      </TreeViewItem> 
                    </CCH:PFXTreeView> 
                    <!--</ScrollViewer>--> 
                  </CCH:PFXExpander> 
                  <CCH:PFXExpander VerticalAlignment="Top" Grid.Row="2" Grid.IsSharedSizeScope="True" Style="{DynamicResource PfxLeftNavSectionExpander}">  
                    <Expander.Header> 
                      <StackPanel Orientation="Horizontal">  
                        <Image Source="../Images/placeholder_16.png" Height="16" Width="16"/>  
                        <CCH:PFXTextBlock Style="{DynamicResource PfxLeftNavText}">Section 3</CCH:PFXTextBlock> 
                      </StackPanel> 
                    </Expander.Header> 
                    <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
                    <CCH:PFXTreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView3" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" Style="{DynamicResource PfxLeftNavTreeView}">  
                      <TreeViewItem HorizontalAlignment="Stretch" Grid.IsSharedSizeScope="True" Header="Profile information" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}">  
                        <TreeViewItem Header="Zip code area" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Address/phone" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Administrative" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                      </TreeViewItem> 
                      <TreeViewItem Header="Work product info" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}">  
                        <TreeViewItem Header="Work product 1" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 2" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 3" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 4" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 5" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                        <TreeViewItem Header="Work product 6" Style="{DynamicResource PfxLeftNavTreeViewItem_Secondary}"/>  
                      </TreeViewItem> 
                    </CCH:PFXTreeView> 
                    <!--</ScrollViewer>--> 
                  </CCH:PFXExpander> 
                </StackPanel> 
              </ScrollViewer> 
     
            </Grid> 
          </Grid> 
     
    Wednesday, June 11, 2008 1:47 AM

Answers

  • Hi,

    The first thought that came to my mind was if you could animate the Width of the second ColumnDefinition to accomodate only the GridSplitter. But since this property is of type GridLength and not double it was not as straight forward as i hoped. I found that runtime does not support something like this.


      <Storyboard x:Key="OnCollapseLeft">
       <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Foo" Storyboard.TargetProperty="(ColumnDefinition.Width)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="5"/>
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>

    The best i could get was something like before. Here i have given the ColumnDefinition a name Foo. Then i have 2 animations within my Storyboard that is triggered on the Doubke Click event of the GridSplitter. The first sets the Width of the ColumnDefinition to GridLength.Auto (which the runtime likes :) ) and the second set the top Grid in that column to Collapsed.

    This does collapse the Column to show only the Grid Splitter. I have highlighted these changes in the code below. I used your XAML but removed references to your namespaces and resources to test.

    Thanks.


    <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="WpfApplication45.Window1"
     x:Name="Window"
     Title="Window1"
     Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
     <Window.Resources>
      <Storyboard x:Key="OnCollapseLeft">
       <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Foo" Storyboard.TargetProperty="(ColumnDefinition.Width)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static GridLength.Auto}"/>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>
     </Window.Resources>

     <Window.Triggers>
      <EventTrigger RoutedEvent="Control.MouseDoubleClick" SourceName="gridSplitter">
       <BeginStoryboard Storyboard="{StaticResource OnCollapseLeft}" x:Name="OnCollapseLeft_BeginStoryboard"/>
      </EventTrigger>
     </Window.Triggers>

     <Grid x:Name="ECLNGrid" Grid.IsSharedSizeScope="True" Grid.Row="1" ShowGridLines="False" Width="Auto" Height="Auto" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="0"/>  
       <ColumnDefinition x:Name="Foo" Width="185" MaxWidth="185"/>  
       <ColumnDefinition Width="*"/>  
       <ColumnDefinition Width="5"/>  
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/>  
       <RowDefinition Height="5" MaxHeight="5"/>  
      </Grid.RowDefinitions>  
      <Grid Grid.IsSharedSizeScope="True" Grid.Column="1" x:Name="grid">  
       <Label Margin="5,0,0,0" />  
       <Border Margin="6,0,6,1" x:Name="HideLogo" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="0"/>  
       <Grid Grid.IsSharedSizeScope="True" Margin="5,0,5,56" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">  
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/>  
         <!--<RowDefinition Height="Auto"/>  
                <RowDefinition Height="Auto"/>--> 
        </Grid.RowDefinitions> 
        <ScrollViewer Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}" VerticalScrollBarVisibility="Auto" Margin="1,0,1,0">  
         <StackPanel > 
          <Expander VerticalAlignment="Top" Grid.Row="0" Grid.IsSharedSizeScope="True" >  
           <Expander.Header> 
            <StackPanel Orientation="Horizontal">  
             <Rectangle Height="16" Width="16"/>  
             <TextBlock ><Run Text="Section 1"/></TextBlock> 
            </StackPanel> 
           </Expander.Header> 
           <TreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" >  
            <TreeViewItem HorizontalAlignment="Stretch" Header="Profile information" >  
             <TreeViewItem Header="Zip code area" />  
             <TreeViewItem Header="Address/phone" />  
             <TreeViewItem Header="Administrative" />  
            </TreeViewItem> 
            <TreeViewItem Header="Work product info" >  
             <TreeViewItem Header="Work product 1" />  
             <TreeViewItem Header="Work product 2" />  
             <TreeViewItem Header="Work product 3" />  
             <TreeViewItem Header="Work product 4" />  
             <TreeViewItem Header="Work product 5" />  
             <TreeViewItem Header="Work product 6" />  
            </TreeViewItem> 
           </TreeView> 
           <!--</ScrollViewer>--> 
          </Expander> 
          <Expander VerticalAlignment="Top" Grid.Row="1" Grid.IsSharedSizeScope="True" >  
           <Expander.Header> 
            <StackPanel Orientation="Horizontal">  
             <Rectangle Height="16" Width="16"/>  
             <TextBlock ><Run Text="Section 2"/></TextBlock> 
            </StackPanel> 
           </Expander.Header> 
           <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
           <TreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView2" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" > 
            <TreeViewItem Header="Work product info" >  
             <TreeViewItem Header="Work product 1" />  
             <TreeViewItem Header="Work product 2" />  
             <TreeViewItem Header="Work product 3" />  
             <TreeViewItem Header="Work product 4" />  
             <TreeViewItem Header="Work product 5" />  
             <TreeViewItem Header="Work product 6" />  
            </TreeViewItem> 
           </TreeView> 
           <!--</ScrollViewer>--> 
          </Expander> 
          <Expander VerticalAlignment="Top" Grid.Row="2" Grid.IsSharedSizeScope="True" >  
           <Expander.Header> 
            <StackPanel Orientation="Horizontal">  
             <Rectangle Height="16" Width="16"/>  
             <TextBlock><Run Text="Section 3"/></TextBlock> 
            </StackPanel> 
           </Expander.Header> 
           <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
           <TreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView3" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" >  
            <TreeViewItem HorizontalAlignment="Stretch" Grid.IsSharedSizeScope="True" Header="Profile information" >  
             <TreeViewItem Header="Zip code area" />  
             <TreeViewItem Header="Address/phone" />  
             <TreeViewItem Header="Administrative" />  
            </TreeViewItem> 
            <TreeViewItem Header="Work product info" >  
             <TreeViewItem Header="Work product 1" />  
             <TreeViewItem Header="Work product 2" />  
             <TreeViewItem Header="Work product 3" />  
             <TreeViewItem Header="Work product 6" />  
            </TreeViewItem> 
           </TreeView> 
           <!--</ScrollViewer>--> 
          </Expander> 
         </StackPanel> 
        </ScrollViewer> 
       </Grid> 
      </Grid> 
      <GridSplitter Grid.Column="1" Width="10" x:Name="gridSplitter"/> 
     </Grid>
    </Window>


    Jeetendra Kukreja [MSFT]
    Monday, June 16, 2008 12:28 AM

All replies

  • Hi,

    The first thought that came to my mind was if you could animate the Width of the second ColumnDefinition to accomodate only the GridSplitter. But since this property is of type GridLength and not double it was not as straight forward as i hoped. I found that runtime does not support something like this.


      <Storyboard x:Key="OnCollapseLeft">
       <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Foo" Storyboard.TargetProperty="(ColumnDefinition.Width)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="5"/>
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>

    The best i could get was something like before. Here i have given the ColumnDefinition a name Foo. Then i have 2 animations within my Storyboard that is triggered on the Doubke Click event of the GridSplitter. The first sets the Width of the ColumnDefinition to GridLength.Auto (which the runtime likes :) ) and the second set the top Grid in that column to Collapsed.

    This does collapse the Column to show only the Grid Splitter. I have highlighted these changes in the code below. I used your XAML but removed references to your namespaces and resources to test.

    Thanks.


    <Window
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:Class="WpfApplication45.Window1"
     x:Name="Window"
     Title="Window1"
     Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
     <Window.Resources>
      <Storyboard x:Key="OnCollapseLeft">
       <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Foo" Storyboard.TargetProperty="(ColumnDefinition.Width)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static GridLength.Auto}"/>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>
     </Window.Resources>

     <Window.Triggers>
      <EventTrigger RoutedEvent="Control.MouseDoubleClick" SourceName="gridSplitter">
       <BeginStoryboard Storyboard="{StaticResource OnCollapseLeft}" x:Name="OnCollapseLeft_BeginStoryboard"/>
      </EventTrigger>
     </Window.Triggers>

     <Grid x:Name="ECLNGrid" Grid.IsSharedSizeScope="True" Grid.Row="1" ShowGridLines="False" Width="Auto" Height="Auto" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="0"/>  
       <ColumnDefinition x:Name="Foo" Width="185" MaxWidth="185"/>  
       <ColumnDefinition Width="*"/>  
       <ColumnDefinition Width="5"/>  
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/>  
       <RowDefinition Height="5" MaxHeight="5"/>  
      </Grid.RowDefinitions>  
      <Grid Grid.IsSharedSizeScope="True" Grid.Column="1" x:Name="grid">  
       <Label Margin="5,0,0,0" />  
       <Border Margin="6,0,6,1" x:Name="HideLogo" Visibility="Collapsed" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderThickness="0"/>  
       <Grid Grid.IsSharedSizeScope="True" Margin="5,0,5,56" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">  
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/>  
         <!--<RowDefinition Height="Auto"/>  
                <RowDefinition Height="Auto"/>--> 
        </Grid.RowDefinitions> 
        <ScrollViewer Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}" VerticalScrollBarVisibility="Auto" Margin="1,0,1,0">  
         <StackPanel > 
          <Expander VerticalAlignment="Top" Grid.Row="0" Grid.IsSharedSizeScope="True" >  
           <Expander.Header> 
            <StackPanel Orientation="Horizontal">  
             <Rectangle Height="16" Width="16"/>  
             <TextBlock ><Run Text="Section 1"/></TextBlock> 
            </StackPanel> 
           </Expander.Header> 
           <TreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" >  
            <TreeViewItem HorizontalAlignment="Stretch" Header="Profile information" >  
             <TreeViewItem Header="Zip code area" />  
             <TreeViewItem Header="Address/phone" />  
             <TreeViewItem Header="Administrative" />  
            </TreeViewItem> 
            <TreeViewItem Header="Work product info" >  
             <TreeViewItem Header="Work product 1" />  
             <TreeViewItem Header="Work product 2" />  
             <TreeViewItem Header="Work product 3" />  
             <TreeViewItem Header="Work product 4" />  
             <TreeViewItem Header="Work product 5" />  
             <TreeViewItem Header="Work product 6" />  
            </TreeViewItem> 
           </TreeView> 
           <!--</ScrollViewer>--> 
          </Expander> 
          <Expander VerticalAlignment="Top" Grid.Row="1" Grid.IsSharedSizeScope="True" >  
           <Expander.Header> 
            <StackPanel Orientation="Horizontal">  
             <Rectangle Height="16" Width="16"/>  
             <TextBlock ><Run Text="Section 2"/></TextBlock> 
            </StackPanel> 
           </Expander.Header> 
           <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
           <TreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView2" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" > 
            <TreeViewItem Header="Work product info" >  
             <TreeViewItem Header="Work product 1" />  
             <TreeViewItem Header="Work product 2" />  
             <TreeViewItem Header="Work product 3" />  
             <TreeViewItem Header="Work product 4" />  
             <TreeViewItem Header="Work product 5" />  
             <TreeViewItem Header="Work product 6" />  
            </TreeViewItem> 
           </TreeView> 
           <!--</ScrollViewer>--> 
          </Expander> 
          <Expander VerticalAlignment="Top" Grid.Row="2" Grid.IsSharedSizeScope="True" >  
           <Expander.Header> 
            <StackPanel Orientation="Horizontal">  
             <Rectangle Height="16" Width="16"/>  
             <TextBlock><Run Text="Section 3"/></TextBlock> 
            </StackPanel> 
           </Expander.Header> 
           <!--<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.IsSharedSizeScope="True" Margin="1,0,1,0">--> 
           <TreeView Grid.IsSharedSizeScope="True" x:Name="LNTreeView3" Padding="4,6,0,0" Visibility="Visible" Margin="-6,0,0,0" >  
            <TreeViewItem HorizontalAlignment="Stretch" Grid.IsSharedSizeScope="True" Header="Profile information" >  
             <TreeViewItem Header="Zip code area" />  
             <TreeViewItem Header="Address/phone" />  
             <TreeViewItem Header="Administrative" />  
            </TreeViewItem> 
            <TreeViewItem Header="Work product info" >  
             <TreeViewItem Header="Work product 1" />  
             <TreeViewItem Header="Work product 2" />  
             <TreeViewItem Header="Work product 3" />  
             <TreeViewItem Header="Work product 6" />  
            </TreeViewItem> 
           </TreeView> 
           <!--</ScrollViewer>--> 
          </Expander> 
         </StackPanel> 
        </ScrollViewer> 
       </Grid> 
      </Grid> 
      <GridSplitter Grid.Column="1" Width="10" x:Name="gridSplitter"/> 
     </Grid>
    </Window>


    Jeetendra Kukreja [MSFT]
    Monday, June 16, 2008 12:28 AM
  • Hi, Kukreja. Thanks for your response. I have implemented these changes per your instructions and when testing the screen there is an issue with 'Storyboard.TargetName="grid"'. It appears that there is no x:Name of 'grid'. Was it your intention to create an x:Name for another element for this storyboard?

    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.Visibility)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>


    Thanks in advance.
    Thursday, July 17, 2008 3:52 PM
  • It has been 12 days since I posted a question on this topic. I would really appreciate a response from somebody that is knowledgable in this area.

    Thanks,
    Todd
    Tuesday, July 29, 2008 9:47 PM
  • Hi Todd,

    As Jeetendra points out, the column is reliant of a grid inside it named simply 'grid'...in order to collapse the column, it is set to adapt to the size of the grid within it...when that grid collapses, the column collapses...as a result, you need a grid inside the target collapsable column named grid. Place all of your elements inside this grid.

    Good luck getting the 'expand' to work though!  I've been playing with this code for a while, and can't figure out how to tell my column to go back to star size to accomodate my grid splitter again--it keeps opening pixel-based.
    Purkiss
    Tuesday, October 6, 2009 7:20 PM