Multiple layers or visual layout?

Hi all,

Starting to get into even messier questions now... Is it possible to
have multiple layers of layout going on in the application? Let's say
that I'm using a grid layout to neatly and symmetrically define a number
of controls and elements. On top of that, I wish to randomly scattered
some other overlayed things on top. That second layer really doesn't
fit into the idea of a grid layout as it is somewhat irregular, what I
really need is to manage the arrangement of those myself, which would
lend itself to an canvas.

So given that scenario, can you give a window both a grid layout and a
canvas layout, and put different controls/visuals into the different
layers? Or perhaps the answer is using the canvas for the base layout,
and then nesting a full window sized grid within that canvas. Any thoughts?

Thanks!
Jason

Hi Jason

It is possible to use the canvas to absolutely position items within it.
Also child controls are rendered in the order that they appear in the markup
(earlier controls are rendered behind ones that appear later). If your grid
layout appears as the first child control of a top-level canvas element then
items that come after the grid can be absolutely positioned over the top of
the grid. Here is an example:

<Window x:Class="DrawingOverGridContents.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Title="DrawingOverGridContents"
>
<Canvas>
<Grid ShowGridLines="True" Width="200" Height="200">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Background="Orange" Grid.Column="0" Grid.Row="0">Row0,
Col0</TextBlock>
<TextBlock Background="CornflowerBlue" Grid.Column="0"
Grid.Row="1">Row1, Col0</TextBlock>
<TextBlock Background="BlanchedAlmond" Grid.Column="0"
Grid.Row="2">Row2, Col0</TextBlock>
<TextBlock Background="Red" Grid.Column="1" Grid.Row="0">Row0,
Col1</TextBlock>
<TextBlock Background="Navy" Grid.Column="1" Grid.Row="1">Row1,
Col1</TextBlock>
<TextBlock Background="FireBrick" Grid.Column="1" Grid.Row="2">Row2,
Col1</TextBlock>
</Grid>
<Border Canvas.Top="30" Canvas.Left="60" CornerRadius="5"
BorderBrush="DarkGreen" BorderThickness="2">
<TextBlock Background="Green" FontSize="32">Special!</TextBlock>
</Border>
</Canvas>
</Window>

I'd be a little worried about all the absolute positioning that this would
require however, and would try and avoid it if possible. There might also be
a way to do this all with just a grid too. I seem to remember seeing
something in John Gossman's PDC05 talk towards the end which covered
something like this, but I'm not 100% sure. I'll post a follow-up if I find
something.

"Jason Dolinger" wrote:

> Hi all,
>
> Starting to get into even messier questions now... Is it possible to
> have multiple layers of layout going on in the application? Let's say
> that I'm using a grid layout to neatly and symmetrically define a number
> of controls and elements. On top of that, I wish to randomly scattered
> some other overlayed things on top. That second layer really doesn't
> fit into the idea of a grid layout as it is somewhat irregular, what I
> really need is to manage the arrangement of those myself, which would
> lend itself to an canvas.
>
> So given that scenario, can you give a window both a grid layout and a
> canvas layout, and put different controls/visuals into the different
> layers? Or perhaps the answer is using the canvas for the base layout,
> and then nesting a full window sized grid within that canvas. Any thoughts?
>
> Thanks!
> Jason
>

Thanks, that's exactly what I need (except I'm going to be creating the
second layer at runtime in response to event on the first layer).

JosephCooney wrote:
> Hi Jason
>
> It is possible to use the canvas to absolutely position items within it.
> Also child controls are rendered in the order that they appear in the markup
> (earlier controls are rendered behind ones that appear later). If your grid
> layout appears as the first child control of a top-level canvas element then
> items that come after the grid can be absolutely positioned over the top of
> the grid. Here is an example:
>
> <Window x:Class="DrawingOverGridContents.Window1"
> xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
> xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
> Title="DrawingOverGridContents"
> >
> <Canvas>
> <Grid ShowGridLines="True" Width="200" Height="200">
> <Grid.RowDefinitions>
> <RowDefinition/>
> <RowDefinition/>
> <RowDefinition/>
> </Grid.RowDefinitions>
> <Grid.ColumnDefinitions>
> <ColumnDefinition/>
> <ColumnDefinition/>
> </Grid.ColumnDefinitions>
> <TextBlock Background="Orange" Grid.Column="0" Grid.Row="0">Row0,
> Col0</TextBlock>
> <TextBlock Background="CornflowerBlue" Grid.Column="0"
> Grid.Row="1">Row1, Col0</TextBlock>
> <TextBlock Background="BlanchedAlmond" Grid.Column="0"
> Grid.Row="2">Row2, Col0</TextBlock>
> <TextBlock Background="Red" Grid.Column="1" Grid.Row="0">Row0,
> Col1</TextBlock>
> <TextBlock Background="Navy" Grid.Column="1" Grid.Row="1">Row1,
> Col1</TextBlock>
> <TextBlock Background="FireBrick" Grid.Column="1" Grid.Row="2">Row2,
> Col1</TextBlock>
> </Grid>
> <Border Canvas.Top="30" Canvas.Left="60" CornerRadius="5"
> BorderBrush="DarkGreen" BorderThickness="2">
> <TextBlock Background="Green" FontSize="32">Special!</TextBlock>
> </Border>
> </Canvas>
> </Window>
>
> I'd be a little worried about all the absolute positioning that this would
> require however, and would try and avoid it if possible. There might also be
> a way to do this all with just a grid too. I seem to remember seeing
> something in John Gossman's PDC05 talk towards the end which covered
> something like this, but I'm not 100% sure. I'll post a follow-up if I find
> something.
>
> "Jason Dolinger" wrote:
>
>
>>Hi all,
>>
>>Starting to get into even messier questions now... Is it possible to
>>have multiple layers of layout going on in the application? Let's say
>>that I'm using a grid layout to neatly and symmetrically define a number
>>of controls and elements. On top of that, I wish to randomly scattered
>>some other overlayed things on top. That second layer really doesn't
>>fit into the idea of a grid layout as it is somewhat irregular, what I
>>really need is to manage the arrangement of those myself, which would
>>lend itself to an canvas.
>>
>>So given that scenario, can you give a window both a grid layout and a
>>canvas layout, and put different controls/visuals into the different
>>layers? Or perhaps the answer is using the canvas for the base layout,
>>and then nesting a full window sized grid within that canvas. Any thoughts?
>>
>>Thanks!
>>Jason
>>