CODEWITHSUNDEEP
c#wpfuser-controlsoverlay
Johannes Wanzek
Johannes Wanzek

Reputation: 2875

WPF Overlay Outside Parent

I have the following example:

<Window x:Class="WpfOverlayTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="400" Width="600">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
        <Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
            <Grid Margin="0,75,0,0" Background="Black" Height="20" Width="200" />
        </Grid>
    </Grid>
    <Grid  Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
</Grid>

How can I make the Black Grid being displayed?

edit: To make the Problem a bit more clear: I Want to define the Black Grid inside the Red Grid, but it should be displayed over the Green Grid. See the Red Grid as a UserControl and the Black Grid as a Menu Overlay.

Upvotes: 1

Views: 1914

Answers (2)

Sheridan
Sheridan

Reputation: 69959

Sometimes I see questions and answers here that I just can't believe. If you want to put two or more elements into one Grid.Row or Column, then just set their Grid.Row values to the same value. The lower the element is defined in the XAML, the further in front the element will be in the UI. So to add the black Grid on top of the green Grid, you can just do this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
        <Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
        </Grid>
    </Grid>
    <Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
    <Grid Grid.Row="1" Background="Black" VerticalAlignment="Center" 
        Height="20" Width="200" /> <!-- This will be on top -->
</Grid>

enter image description here

UPDATE

It's pretty difficult to work out what you actually want, but after reading the comments, it seems as though you might want this instead:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue">
        <Grid Margin="0,125,0,0" Height="75" Width="200" Background="Red">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Background="Black" VerticalAlignment="Center" Height="20" Width="200" />
        </Grid>
    </Grid>
    <Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
</Grid>

enter image description here

This is basic Grid stuff. I recommend the material in the Grid Class page on MSDN.

UPDATE 2

Now that you have provided a description of your problem in your question, I can finally provide the correct XAML for your requirements:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid Grid.Row="0" Width="600" Height="200" Background="LightBlue" />
    <Grid Grid.Row="1" Height="200" Width="600" Background="LightGreen" />
    <Grid Grid.Row="1" VerticalAlignment="Center" Height="75" Width="200" Background="Red">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <!-- This will be on top -->
        <Grid Grid.Row="0" Background="Black" VerticalAlignment="Center" Height="20" Width="200" />
    </Grid>
</Grid>

enter image description here

Upvotes: 2

Vinny
Vinny

Reputation: 316

Set a RowDefinition on your Red grid and assign the Black Grid to it

<Canvas>
    <Grid Width="600" Height="200" Background="LightBlue">
    </Grid>
    <Grid Margin="0,200,0,0" Height="175" Width="600" Background="LightGreen" />
    <Grid Margin="200,125,0,0" Height="100" Width="200" Background="Red">
        <Grid Margin="0,75,0,0" Background="Black" Height="20" Width="200" />
    </Grid>
</Canvas>

enter image description here

EDIT: Added a screenshot

EDIT: Switched to a Canvas

Upvotes: 1

Related Questions