locked
How to overlay user control over stackpanel and grid bounds, without losing scrolling? RRS feed

  • Question

  • I'm relatively new to Blend, and am freaked out by the following problem:

    I have a grid (called MainGrid) on a page. The first row of MainGrid contains a horizontal StackPanel called TopStackPanel. The heights of the rows in MainGrid are relative (e.g. "0.2* for the first row). The height of anything else is Auto. I have a border round the first row of MainGrid. Since I programmatically add N instances of a user control called OverlayControl to TopStackPanel, TopStackPanel has a horizontal scrollviewer.  OverlayControl consists of a treeview with a border round it.

    My problem is the following: the treeviews in some OverlayControl instances in TopStackPanel may be too large to be fully visible in the available height of the TopStackPanel cell. If that is the case, I want the user to be able to "slide" open only that specific OverlayControl. By "slide" I mean that the height of that specific OverlayControl should increase, and overlay the information displayed in the other MainGrid rows. NB: The height of the first row of MainGrid should remain the same.

    I have experimented with the following:

    (1) I tried wrapping my OverlayControl in a canvas. If I put my OverlayControl directly into the first row of MainGrid, and toggle the ClipToBounds property between True and False, it does slide open and close. Hooray!

    (2) But, if I put my OverlayControl into TopStackPanel, with ClipToBounds=False, I can see the control, although it has not slided open. And with ClipToBounds=True I don't see the control at all!?!?

    (3) I have noticed that (1) and (2) are only true if I delete the ScrollViewer from the first row of MainGrid. It seems as if the ScrollViewer and the canvas are not compatible. As soon as the canvas "expands" when I slide the treeview open, it expands inside the ScollViewer. To disable the vertical scrolling only seem to switch the vertical scrollbar off. It does not switch the vertical expanding of the ScrollViewer off.

    I'm enclosing my code in the hope that it will help you clever guys to help me fix this.

    <Page x:Class="BasicDropdown.Page1"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="Page1"

           Width="Auto" Height="Auto">

        <Grid x:Name="MainGrid">

           <Grid.RowDefinitions>

                  <RowDefinition Height="0.2*"/>

                  <RowDefinition Height="0.8*"/>

           </Grid.RowDefinitions>

           <Border Grid.Column="0" Grid.Row="0" BorderBrush="CornFlowerBlue" BorderThickness="3,3,3,3" CornerRadius="5,5,5,5" Margin="5,5,5,5">

                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled">

                    <StackPanel x:Name="TopStackPanel" Orientation="Horizontal">

                    </StackPanel>

                </ScrollViewer>

            </Border>

           <Button HorizontalAlignment="Right" Margin="0,22,75.433,32.277" Width="300" Content="Dropdown" x:Name="btnTest" Click="btnTest_Click" Grid.Row="2">

           </Button>           

        </Grid>

    </Page>

     

     

    <UserControl x:Class="BasicDropdown.OverlayControl"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="242" Height="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ClipToBounds="True" MouseEnter="UserControl_MouseEnter" MouseLeave="UserControl_MouseLeave" MouseDoubleClick="UserControl_MouseDoubleClick">

     

        <Canvas x:Name = "myCanvas" Margin="5,5,5,5">

            <Border x:Name="myBorder" BorderBrush="LightBlue" BorderThickness="3,3,3,3" CornerRadius="5,5,5,5" Canvas.Top="10" Canvas.Bottom="10" Canvas.Left="10" Canvas.Right="10">

                <TreeView x:Name="TreeView" Margin="10,10,10,10" BorderBrush="{x:Null}">

                </TreeView>

            </Border>

        </Canvas>

    </UserControl>

     

    private void btnTest_Click(object sender, RoutedEventArgs e)

    {

       if (myOverlayTreeView.ClipToBounds == true)

       {

          myOverlayTreeView.ClipToBounds = false;

          //this.MainGrid.UpdateLayout();

       }

       else if (myOverlayTreeView.ClipToBounds == false)

       {

          myOverlayTreeView.ClipToBounds = true;

          //this.MainGrid.UpdateLayout();

       }

    }

    Demo day is approaching fast, and I'm getting desperate. Please, does anyone out there have any ideas I could try?

    (By the way, does anyone know why the border of my OverlayControl misbehaves? The border is very smalll, it doesn't include the treeview.)

    Monday, May 4, 2009 8:21 AM