Hide GridSplitter when region is deactivated?

Topics: Prism v2 - WPF 3.5
Jul 11, 2009 at 6:05 PM
Edited Jul 11, 2009 at 6:06 PM

hi there, i have an app with a quite normal layout.

To the left i have a TreeView showing directories on my filesystem.
To the right i have a "detail view" that in itself is divided in two different regions, "DetailListRegion" and the "WorkspaceRegion".
The "DetailListRegion" and the "WorkspaceRegion" are seperated by a Gridsplitter so the user can decide how big the different regions should be in height.

The "DetailListRegion" contains a Datagrid showing the files and directories of the current directory selected in the TreeView.

The "WorkspaceRegion" are showing in a tabcontrol the files that the user has double clicked in the datagrid.

PROBLEM:

When the tabcontrol in the "WorkspaceRegion" dont have any files to show, i want to hide the "WorkspaceRegion" and the Gridsplitter to allow for full height of the
DetailListRegion.

I have found out how to hide the workspaceregion by using the RegionManager Deactivate method but i can for sure not figure out how to trigger that the Gridsplitter should be collapsed when this is
happening.

I was thinking about to set the GridSplitters Visibility to bind to the ContentControls Visibility where i host my "WorkspaceRegion" but this doestn seem to work.

Can anyone help me out here, i have tried "everything" now and seem quite stuck.

I have at the end of this post added my XAML to give you an idea of my structure.

Best Regards

Niclas

<UserControl
    x:Name="newsReader"
    x:Class="Admin.MediaLibrary.Views.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:cal="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation"
    xmlns:commands="clr-namespace:Admin.MediaLibrary.Infrastructure.Commands;assembly=Admin.Infrastructure"
    xmlns:local="clr-namespace:Admin.MediaLibrary.ViewModels"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:diagnostics="clr-namespace:System.Diagnostics;assembly=WindowsBase" 
    MinHeight="400"
    MinWidth="300"
    Background="Green">
    <UserControl.Resources>
        <ContextMenu x:Key="TreeViewItemContextMenu">
            <MenuItem Command="{Binding Path=TreeViewItemDeleteCommand}" CommandParameter="{Binding}" Header="Delete"/>
        </ContextMenu>
               
        <local:TreeViewCollectionConverter x:Key="CollectionConverter"/>
        <local:VisibiltyConverter x:Key="VisibiltyConverter"/>            
    </UserControl.Resources>
   
    <DockPanel LastChildFill="True" >
        
        <Border DockPanel.Dock="Bottom">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                <ScrollViewer Margin="0,8,2,8" VerticalScrollBarVisibility="Auto">
                    <ListBox 
                    Height="Auto" 
                    ItemsSource="{Binding AppEvents}"
                    Margin="5,5,5,5"
                    BorderBrush="#CCCCCC"
                    BorderThickness="1"
                    />
                </ScrollViewer>
                
                <TextBlock x:Name="Timer" Text="{Binding Path= Time}">
                </TextBlock>

                <TextBlock x:Name="Network" Text="{Binding Path= NetworkAvailabilityChanged}">
                </TextBlock>


            </StackPanel>
        </Border>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition MinWidth="100"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="3*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition/>
            </Grid.RowDefinitions>

            <TreeView
                x:Name="_TreeView"
                Grid.Column="0"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
               
                Margin="5,5,5,5"
                BorderBrush="#CCCCCC"
                BorderThickness="1"
                commands:TreeViewSelectedItemChanged.Command="{Binding TreeViewItemSelectedCommand}"
                ItemsSource="{Binding RootDirectories}">
                <TreeView.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding Children, Converter={StaticResource CollectionConverter}}">
                        <StackPanel ContextMenu="{StaticResource TreeViewItemContextMenu}" Orientation="Horizontal">
                            <TextBlock Text="{Binding Name}"/>
                        </StackPanel>
                    </HierarchicalDataTemplate>
                </TreeView.ItemTemplate>
            </TreeView>

            <GridSplitter
                Width="2"
                Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Stretch"
                ResizeDirection="Auto">
            </GridSplitter>
            
            <Grid Grid.Column="2">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="3*"/>
                </Grid.RowDefinitions>

                <ItemsControl
                    Name="DetailsRegion"
                    Grid.Column="0"
                    Grid.Row="0"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    cal:RegionManager.RegionName="DetailsRegion"
                    Background="Bisque"
                    >
                   
                    
                </ItemsControl>

                 <!-- 
                    I want to hide this splitter as soon as the region "WorkspaceRegion" is deactivated to give
                    the "DetailsRegion" full height.
                -->
                <GridSplitter
                    x:Name="Splitter"
                    Height="5"
                    Grid.Row="1"
                    HorizontalAlignment="Stretch"
                    ResizeDirection="Rows"
                    diagnostics:PresentationTraceSources.TraceLevel="High"
                    >             
                </GridSplitter>

                <ContentControl
                   Grid.Row="2"
                    x:Name="Work"
                    Background="Black"
                    cal:RegionManager.RegionName="WorkspaceRegion"
                    Width="600"
                    Height="300"
                    diagnostics:PresentationTraceSources.TraceLevel="High">
   
                </ContentControl>

             
            </Grid>
        </Grid>

    </DockPanel>


    
   
</UserControl>
Jul 15, 2009 at 12:17 PM

Hi Niclas, 

I do not know your entire application’s design, but the following approach might be useful for you:

  1. When the WorkspaceRegion has no TabItems to show in the TabControl, you can change the visibility of the control it adapts to Collapsed.
  2. When the WorkspaceRegion has TabItems to show in the TabControl you can set the visibility of the control it adapts to Visible

This will make the ContentControl related to the WorkspaceRegion not occupy any space and the DetailsRegions should expand.

Take into account that this will require knowing when the TabControl has a TabItem added/removed (there are events for this which you can use).

You will also need to get the instance of the control that the WorkspaceRegion  is adapting. You might use the GetAttachedControl(this IRegion region) method for this purpose, which is published in the Knowledge Base.

Another possible approach could be creating a region behavior that does not show the region’s adapted control if it has no views. However, this would be suiting if you were using a TabControl as a region instead of a ContentControl which might be a good approach in your scenario.

You can read more about region behaviors in this article:

Please let me know if this helps.

Damian Schenkelman

http://blogs.southworks.net/dschenkelman

Jul 16, 2009 at 9:53 PM

Hi Damian,

Super many thanks for your reply to me. I can see in the discussions that you are quite active in helping oher people with this framework, great work!!!

I finally actually made it work but just a bit different from your suggestion. Basically what i did is to have my viewmodel that controls the workspace region to send an event listeners how many documents that

are currently open. Then, the viewmodel that is the datacontext for the view that contains my Grid and Splitter listens to this typed event. When this viewmodel is signaled that the workspace has zero documents open I
set the gridsplitters visibiltiy to collapsed and also set the height of the row that holds the workspace region to zero. This way i also have a mechanism to "remember" the height of the row that contains the workspace region from time to time.
That is, if the end user have resized the row, then closed all documents (now setting the row height to zero) to finally open another document,  I can now restore the row in the exact same position as he left it last time the workspace where open.
A bit hard to explain but i hope you get what im trying to write.

Many thanks for your efforts, most appreciated!

Niclas