Макет док-панели WPF

#c# #wpf #xaml

Вопрос:

Я хочу изменить выравнивание моей док-панели, и у меня возникли некоторые проблемы. Я относительно новичок в WPF, так что это может объяснить это.

В любом случае, вот текущий макет:

     <theme:bottomPanel DockPanel.Dock="Bottom" x:Name="bottomPanel" ClipToBounds="False" SnapsToDevicePixels="False" HorizontalAlignment="Center" Height="145" />
    <theme:rightPanel DockPanel.Dock="Right" x:Name="rightPanel" ClipToBounds="False" SnapsToDevicePixels="False"/>
    <theme:leftPanel DockPanel.Dock="Left" x:Name="leftPanel" ClipToBounds="False" SnapsToDevicePixels="False" />
    <theme:MapPanel DockPanel.Dock="Top" x:Name="mapPanel" ClipToBounds="False" SnapsToDevicePixels="False" />

Визуализируется в Paint (lol) :

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

Я хотел бы изменить макет на что-то вроде следующего:

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

Возможно ли это? Если да, то какой подход вы бы порекомендовали? Любые рекомендации были бы полезны! Спасибо.

В качестве отступа: есть ли какое-либо приложение, которое позволяет мне видеть макет моего приложения при запуске приложения (т. Е. Добавлять линии сетки на каждую панель или что-то в этом роде)?

В любом случае, спасибо!

1. Вы пытаетесь придерживаться док-панелей или достаточно пары сеток?

2. будет ли контент расти? (т. Е. Цветные блоки?) или это всегда будет фиксированный размер?

3. Фиксированный размер в любое время. И я открыт для любого решения — док-панели не являются необходимостью.

4. Почему бы вам не использовать что-то вроде avalondock.codeplex.com ?

5. Это легко сделать с помощью a Grid , но я должен был бы спросить, как будет вести себя содержимое «старой вершины»? Например, все, что выделено серым цветом, просто плавает за другим материалом, или этот верхний правый угол действует как его собственная ячейка и т. Д.

Ответ №1:

 <Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>

    <Border Background="Gray" Grid.ColumnSpan="3">
        <TextBlock Text="Top Area"/>
    </Border>

    <Border Background="Magenta" Grid.Row="1" Height="200">
        <TextBlock Text="Left Area"/>
    </Border>

    <Border Background="Red" Grid.Row="1" Grid.Column="1" Height="200">
        <TextBlock Text="Bottom Area"/>
    </Border>

    <Border Background="Cyan" Grid.Column="2" Grid.RowSpan="2" Margin="0,200,0,0" Width="200">
        <TextBlock Text="Right Area"/>
    </Border>
</Grid>

Я устал видеть, как вы публикуете дублированные вопросы...