Наложение WPF за пределами родителя

У меня есть следующий пример:

<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: чтобы сделать проблему более ясной: я хочу определить Black Grid внутри Red Grid, но он должен отображаться поверх Green Grid. См. Red Grid как UserControl и Black Grid как наложение меню.


overlay c# wpf user-controls
person Johannes Wanzek    schedule 08.05.2014    source источник
comment
Где вы хотите, чтобы он отображался? Ниже красного? Почему бы тогда просто не включить его в LightGreen Grid?   -  person icebat    schedule 08.05.2014
comment
Да ниже Зеленого. Представьте, что красная сетка — это мой UserControl, и я хочу отобразить строку меню как черную сетку.   -  person Johannes Wanzek    schedule 08.05.2014

Ответы (2)


arrow_upward
2
arrow_downward

Иногда я вижу здесь вопросы и ответы, в которые просто не могу поверить. Если вы хотите поместить два или более элементов в один Grid.Row или Column, просто установите их значения Grid.Row в одно и то же значение. Чем ниже элемент определен в XAML, тем впереди он будет находиться в пользовательском интерфейсе. Итак, чтобы добавить черный Grid поверх зеленого Grid, вы можете просто сделать это:

<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>

введите здесь описание изображения

ОБНОВИТЬ

Довольно сложно понять, чего вы на самом деле хотите, но после прочтения комментариев кажется, что вместо этого вы можете захотеть это:

<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>

введите здесь описание изображения

Это основные Grid вещи. Я рекомендую материал в Grid Class страница в MSDN.

ОБНОВЛЕНИЕ 2

Теперь, когда вы предоставили описание своей проблемы в своем вопросе, я наконец могу предоставить правильный XAML для ваших требований:

<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>

введите здесь описание изображения

person Sheridan    schedule 08.05.2014
comment
Опять же: я хочу определить черную полосу внутри красной сетки, но визуализировать ее поверх других элементов управления снаружи. Но спасибо, я знаю, как определить сетку;) - person Johannes Wanzek; 08.05.2014
comment
Во-первых, зачем говорить «Опять»? Вы не предоставили это описание раньше. Ранее вы сказали под зеленой, я хочу отобразить черную полосу над зеленой сеткой и я хочу остаться внутри красной сетки, которые все разные. Кроме того, затем вы говорите Я знаю, как определить сетку... но тогда, если бы это было правдой, с какой стати вы задали этот вопрос? - person Sheridan; 09.05.2014
comment
Пожалуйста, просто посмотрите комментарии. Я хочу определить черную сетку внутри красной и сделать ее наложением поверх других элементов управления. Вопрос был не в том, чтобы изменить мой макет сетки. Вопрос был в том, как сделать черную полосу видимой. - person Johannes Wanzek; 09.05.2014
comment
Разве я не заставил черную полосу появиться внутри красного прямоугольника и поверх других элементов управления (зеленый прямоугольник)? Я сделал именно так, как вы просили. Черная полоса не видна? Я не понимаю вашей проблемы... Я сделал именно то, что вы предложили, и все же вы говорите просмотреть комментарии?? Пользователи не должны видеть комментарии. Вы, как автор вопроса, несете ответственность за четкое изложение всех ваших требований в вашем вопросе. Если это решение не то, что вы хотели, то, пожалуйста, четко объясните, что именно вы хотите в своем вопросе. - person Sheridan; 09.05.2014
comment
Чувак, возьми мою разметку XAML и покажи мне, как отображать черную сетку. Я конечно знаю, как решить эту проблему, когда я поменяю разметку, но это не то, чего я хочу. - person Johannes Wanzek; 09.05.2014
comment
Вы понимаете, что вся эта путаница с тем, что вы на самом деле хотите, была вызвана тем фактом, что вы не предоставили (и до сих пор не предоставили) четкого и достоверного описания ваших требований, не так ли? ? Вот почему я упомянул этот факт в первую очередь. Ваш последний комментарий — это самый первый раз, когда вы упомянули, что не хотите менять разметку... вы не думаете, что это была достоверная информация, которой вы должны поделиться с людьми, которые пытаются вам помочь? И я все еще не вижу вашей проблемы... просто замените цветные прямоугольники на элементы управления. - person Sheridan; 09.05.2014
comment
Я согласен с мета-отзывом, который изначально был в этом посте, но, поскольку ответы предназначены для многих будущих читателей, вероятно, лучше их вырезать. Поверьте, это нормально! - person halfer; 29.04.2017
comment
Без проблем... :) - person Sheridan; 15.06.2017

arrow_upward
0
arrow_downward

Установите RowDefinition в вашей красной сетке и назначьте ей черную сетку.

<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>

введите здесь описание изображения

РЕДАКТИРОВАТЬ: Добавлен скриншот

РЕДАКТИРОВАТЬ: переключился на холст

person Vinny    schedule 08.05.2014
comment
Я хотел отобразить черную полосу поверх зеленой сетки :) - person Johannes Wanzek; 08.05.2014
comment
К сожалению, я думал, вы хотите отобразить черную полосу, как MenuBar, на красной сетке. Итак, @icebat задал правильный вопрос, почему бы просто не добавить его в зеленую сетку? - person Vinny; 08.05.2014
comment
Потому что я хочу оставаться в своей красной сетке. Я имею в виду, что я не играю с цветными сетками, это просто пример реальной проблемы с приложением;) Представьте, что красная сетка - это пользовательский элемент управления, а черная полоса - это меню, отображаемое в виде наложения при выборе пользовательского элемента управления. - person Johannes Wanzek; 08.05.2014
comment
Я не верю, что вы можете сделать это с помощью сетки. Я переключил основной контейнер на Canvas, который позволяет вам накладывать элементы управления друг на друга. Надеюсь, это поможет. - person Vinny; 08.05.2014
comment
@Винни, ты ошибаешься. Пожалуйста, смотрите мой ответ для правильного решения. - person Sheridan; 08.05.2014
comment
@Sheridan Отличное решение! Я не знал об этом. Спасибо. - person Vinny; 08.05.2014