By Irvin G.

When you are working with Windows Presentation Foundation, sooner or later you will find yourself working with floating panels. Once you are there, it will take no time until you need a floating panel that changes its height and/or width according to the area below.

This is quite easy to do directly on the XAML, with no need to write a single line of code in C#. Let’s explore how it is done.

First, you need to put all the controls you want to cover with your floating panel inside a StackPanel.

<StackPanel x:Name="MainContent" Margin="25,50,25,0" VerticalAlignment="Top">

<Grid…>

<Grid…>

<Grid…>

<Grid…>

<Grid…>

<Grid…>

</StackPanel>

Now you will need to set the margins of your floating panel. In this case use a Grid, to match the top left coordinates of your StackPanel. This may vary according to your general screen layout, but the top left is the more common.

<Grid Margin="25,50,20,0" x:Name="FloatingPanel" Opacity="1" RenderTransformOrigin="0.5,0.5" Height="490" VerticalAlignment="Top" Visibility="Collapsed">

<Grid.RenderTransform>

            <TransformGroup>

                  <ScaleTransform ScaleX="1" ScaleY="1"/>

                  <SkewTransform AngleX="0" AngleY="0"/>

                  <RotateTransform Angle="0"/>

                  <TranslateTransform X="0" Y="0"/>

            </TransformGroup>

</Grid.RenderTransform>

<Grid.RowDefinitions…>

</Grid>

And finally bind the grid’s Height property to the ActualHeight property of the StackPanel.

<Grid Margin="25,50,20,0" x:Name="FloatingPanel" Opacity="1" RenderTransformOrigin="0.5,0.5" Height="{Binding ActualHeight, ElementName=MainContent, Mode=Default}" MinHeight="490" VerticalAlignment="Top" Visibility="Collapsed">

<Grid.RenderTransform…>

</Grid.RenderTransform>

<Grid.RowDefinitions…>

</Grid>

And this is it, once you display the Grid, it will always be as tall as the controls that are below on the main layout.

We can do the same binding Width to ActualWidth, and if we go further, we can use this to make elements on different parts of the screen to be properly aligned regardless of screen size or resolution. Doing these bindings may seem to produce a little bit overhead, but when you are developing an application and you are requested to do some changes to the screen layout (which you most probably will need), then having this layout binding can save you a lot of time for aligning the controls after every change. This, hopefully, will save you some headaches.