Как разделить окно на 7 несимметричных частей?

@alexparser · Регистрация: 21.01.2016

Студворк — интернет-сервис помощи студентам

Дорогого времени суток!

Никак не пойму как разделить окно на 7 несимметричных частей показано на схеме, да и возможно ли это в принципе?
Для форматирования применял гриды, но ими явно не выходит.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<Window x:Class="UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UI"
        mc:Ignorable="d"
        Title="MainWindow" Height="500" Width="800" MinHeight="450" MinWidth="450">
    <Grid Height="500px" Width="800">
        <Grid.RowDefinitions>
            <RowDefinition Height="350"/>
            <RowDefinition Height="AUTO"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400"/>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>
    </Grid>
</Window>

@Элд Хасп · 28.11.2022, 01:15

Сообщение от alexparser

как разделить окно на 7 несимметричных частей

Несколько панелей вложенных в друг друга.
Так же если задаётся размер основной панели, то задавать размер Окну не следует. Оно должно принять размеры по своему содержимому.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<Window x:Class="UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UI"
        mc:Ignorable="d"
        Title="MainWindow" MinHeight="450" MinWidth="450"
        SizeToContent="WidthAndHeight">
    <Window.Resources>
        <Style TargetType="Label">
            <Setter Property="BorderBrush" Value="Red"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Viewbox>
                            <TextBlock Text="{Binding StringFormat={}Block {0}}" Margin="10"/>
                        </Viewbox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Height="500px" Width="800">
        <Grid.RowDefinitions>
            <RowDefinition Height="350"/>
            <RowDefinition Height="AUTO"/>
        </Grid.RowDefinitions>
        <UniformGrid Columns="2">
            <Label>1</Label>
            <Label>2</Label>
        </UniformGrid>
        <UniformGrid Grid.Row="1" Columns="5">
            <Label>3</Label>
            <Label>4</Label>
            <Label>5</Label>
            <Label>6</Label>
            <Label>7</Label>
        </UniformGrid>
    </Grid>
</Window>

Добавлено через 8 минут
Да, и наверное, неправильно задано выравнивание высоты строк.
У одной фиксированная, у другой Auto. Auto - это как StackPanel - будет сжимать по вертикале.
И соответственно останется пустое пространство. Думаю, более логичным будет нижней задать полное занятие оставшегося места. Можно указать star или конкретное значение

XML
26
27
28
29
30
    <Grid Height="500px" Width="800">
        <Grid.RowDefinitions>
            <RowDefinition Height="350"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

@alexparser · 28.11.2022, 01:24 **[ТС]**

Сообщение от Элд Хасп

Несколько панелей вложенных в друг друга.
Так же если задаётся размер основной панели, то задавать размер Окну не следует. Оно должно принять размеры по своему содержимому.

Благодарю, классное решение!
В моем случае получается, что окно должно иметь возможность масштабирования (до определенных минимальных размеров).
При этом элементы находящиеся в каждой из ячеек должны центрироваться внутри них.

@Элд Хасп · 28.11.2022, 01:44

Сообщение от alexparser

что окно должно иметь возможность масштабирования (до определенных минимальных размеров).

Здесь нужно тогда верно задать правила масштабирования внутренних регионов.

Добавлено через 1 минуту
У вас заданы жёсткие размеры главного Grid - поэтому реализовать автомасштабирование не выйдет.
Если оно нужно, то нужно убрать размеры у Grid и и задать их Окну.

@alexparser · 28.11.2022, 02:10 **[ТС]**

Сделал, теперь ячейки масштабируются следуя за окном, но теперь нюанс с пропорциями ячеек.
Они естественно тянутся за окном и изменяют свои пропорции.
Не очень понимаю как сделать так, чтобы ячейки "тянулись" за окном сохраняя свои пропорции..?

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<Window x:Class="UI.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UI"
        mc:Ignorable="d"
        Title="MainWindow" MinHeight="500" MinWidth="800"
        SizeToContent="WidthAndHeight">
    <Window.Resources >
         <Style TargetType="Label">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Margin" Value="1"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Viewbox>
                            <TextBlock Text="{Binding StringFormat={}Block {0}}" Margin="10"/>
                        </Viewbox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <UniformGrid Columns="2">
            <Label>1</Label>
            <Label>2</Label>
        </UniformGrid>
        <UniformGrid Grid.Row="1" Columns="5">
            <Label>3</Label>
            <Label>4</Label>
            <Label>5</Label>
            <Label>6</Label>
            <Label>7</Label>
        </UniformGrid>
    </Grid>
</Window>

@Элд Хасп · 28.11.2022, 02:28

Сообщение от alexparser

чтобы ячейки "тянулись" за окном сохраняя свои пропорции..?

Но если Окно меняет свои пропорции, как вы хотите чтобы ячейки не меняли?
Покажите желаемую разметку для Окон с разными пропорциями.

@alexparser · 28.11.2022, 02:48 **[ТС]**

Тут 3 возможных варианта масштабирования.
1-й нормальный.

@Элд Хасп · 28.11.2022, 02:59

Сообщение от alexparser

Тут 3 возможных варианта масштабирования.

Воще не понял.
Тут же нет никакого мосштабирования.
Во всех вариантах клиентская область неизменного размера.

@alexparser · 28.11.2022, 04:09 **[ТС]**

Поясню, когда окно масштабируется, то сетка тянется вместе с контентом сохраняя пропорции.
Если экран широкий (вариант №2), макет центрируется, а по левому и правому краю остается свободное пространство.
Синим контуром отмечена зона экрана.

@Элд Хасп · 28.11.2022, 10:42

alexparser, по интерфейсу Форума:

Комментарий модератора

При обращении к другому пользователю указывайте его ник в тегах [NICK][/NICK] или цитируйте часть сообщения на которое отвечаете.
В противном случае ему не придёт уведомление о вашем обращении и вы можете не дождаться ответа на своё сообщение.

Для вставки ника: введите ник, выделите его и нажмите кнопку "Динамик" на панели редактора сообщений.
Или кликните по нику автора сообщения в панели слева от текста его сообщения.

Для вставки цитаты: выделите нужную цитату, должна появиться всплывающая кнопка "Цитировать", нажмите её.

Добавлено через 2 минуты

Сообщение от alexparser

Если экран широкий (вариант №2), макет центрируется, а по левому и правому краю остается свободное пространство.

Понял.
Дефолтных способов сделать это нет.
Используйте 2. Сохранение пропорций WPF элементом.

@alexparser · 29.11.2022, 02:32 **[ТС]**

Сообщение от Элд Хасп

му не придёт уведомление о вашем обращении и вы можете не дождаться ответа на своё сообщение.

Ясно.

Сообщение от Элд Хасп

Используйте 2. Сохранение пропорций WPF элементом.

Буду экспериментировать.

Почему такие значения ширины колонок?:

XML
1
2
3
            <ColumnDefinition Width="411*"/>
            <ColumnDefinition Width="84*"/>
            <ColumnDefinition Width="305*"/>

Пока сделал окно фиксированного размера, не пойму почему получился такой большой отступ между блоками по вертикали?

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<Window x:Class="UI.MainWindow "
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:UI"
        mc:Ignorable="d"
        
        Height="500" Width="800"
        Background="Black"
        Title="MainWindow" WindowStartupLocation="CenterScreen" ShowInTaskbar="False" ResizeMode="NoResize">
    <Window.Resources >
        <Style TargetType="Label">
            <Setter Property="BorderBrush" Value="Black"/>
            <Setter Property="Background" Value="DarkGray"/>
            <Setter Property="BorderThickness" Value="2"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Viewbox>
                            <TextBlock Text="{Binding StringFormat={}Block {0}}" Margin="100"/>
                        </Viewbox>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="411*"/>
            <ColumnDefinition Width="84*"/>
            <ColumnDefinition Width="305*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <UniformGrid Columns="2" Grid.ColumnSpan="3" Margin="0,0,0,161" Grid.RowSpan="2">
            <Label>1</Label>
            <Label>2</Label>
        </UniformGrid>
        <UniformGrid Grid.Row="1" Columns="5" Grid.ColumnSpan="3">
            <Label>3</Label>
            <Label>4</Label>
            <Label>5</Label>
            <Label>6</Label>
            <Label>7</Label>
        </UniformGrid>
    </Grid>
</Window>

@Элд Хасп · 29.11.2022, 09:04

Сообщение от alexparser

Почему такие значения ширины колонок?:

Откуда вы это взяли?

В вашей разметке не нужны колонки удалите их.
И удалите Grid.ColumnSpan и Grid.RowSpan.
В моём примере же нет их. Вы сами не пойми зачем их добавили.

Сообщение от alexparser

не пойму почему получился такой большой отступ между блоками по вертикали?

Потому что маргины используете не по делу.
Никогда не используйте маргин для позиционирования элементов.
Это свойство стоит использовать только задания полей (отступов от других элементов).

Добавлено через 2 минуты

XML
29
30
31
32
33
34
35
36
37
38
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <UniformGrid Columns="2">
            <Label>1</Label>
            <Label>2</Label>
        </UniformGrid>
        <UniformGrid Grid.Row="1" Columns="5">

@alexparser · 29.11.2022, 16:48 **[ТС]**

Сообщение от Элд Хасп

Откуда вы это взяли?

Мои извинения, не обратил внимания на явный бред.
Лишнее убрал, все отступы в порядке.
Спасибо!

@alexparser · 30.11.2022, 19:41 **[ТС]**

Элд Хасп
Возможно ли такое вложение панелей как на рисунке?

@Элд Хасп · 30.11.2022, 20:14

Сообщение от alexparser

Возможно ли такое вложение панелей как на рисунке?

Конечно.
Первый Label заменяете на Grid из трёх строк. Задаёте строкам нужные вам пропорции.
В среднюю строку записывает UniformGrid из трёх колонок.

@alexparser · 30.11.2022, 20:52 **[ТС]**

Сообщение от Элд Хасп

Первый Label заменяете на Grid из трёх строк. Задаёте строкам нужные вам пропорции.
В среднюю строку записывает UniformGrid из трёх колонок.

Колонки форматируются только таким образом.
Чего-то я не догоняю.

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <Grid >
        <Grid.RowDefinitions>
             <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <UniformGrid Columns="2">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <UniformGrid Columns="3">
                    <Label>5</Label>
                    <Label>5</Label>
                    <Label>5</Label>
                </UniformGrid>
                
            </Grid >
            <Label>6</Label>
        </UniformGrid>
        <UniformGrid Grid.Row="1" Columns="5" Grid.ColumnSpan="3">
            <Label>5</Label>
            <Label>5</Label>
            <Label>5</Label>
            <Label>6</Label>
            <Label>7</Label>
        </UniformGrid>
    </Grid>

@alexparser · 30.11.2022, 21:41 **[ТС]**

Элд Хасп
Спасибо!
Кажется понял как делать разметку, не знаю все ли верно, но так работает.

Такой еще вопрос -можно ли будет использовать такого типа разметку в UWP XAML?

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    <Grid >
        <Grid.RowDefinitions>
             <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
            
        </Grid.RowDefinitions>
        <UniformGrid Columns="2">
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="4*"/>
                    <RowDefinition Height="1*"/>
                    
                </Grid.RowDefinitions>
                <UniformGrid Grid.Row="0" Columns="1" Grid.ColumnSpan="1">
                    <Label>1</Label>
                </UniformGrid>
                
                <UniformGrid Grid.Row="1" Columns="3" Grid.ColumnSpan="1">
                    <Label>2</Label>
                    <Label>3</Label>
                    <Label>4</Label>
                </UniformGrid>
                
                <UniformGrid Grid.Row="2" Columns="1" Grid.ColumnSpan="1">
                    <Label>5</Label>
                </UniformGrid>
            </Grid >
            <Label>6</Label>
        </UniformGrid>
 
        <UniformGrid Grid.Row="1" Columns="5" Grid.ColumnSpan="3">
            <Label>7</Label>
            <Label>8</Label>
            <Label>9</Label>
            <Label>10</Label>
            <Label>11</Label>
        </UniformGrid>
    </Grid>

@Элд Хасп · 30.11.2022, 21:49

Сообщение от alexparser

Такой еще вопрос -можно ли будет использовать такого типа разметку в UWP XAML?

Там вроде нет UniformGrid.
Если так то нужно будет заменить его на Grid с одинаковыми колонками.

Сообщение от alexparser

Кажется понял как делать разметку, не знаю все ли верно, но так работает.

Чуть лишканули:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <UniformGrid Columns="2">
        <Grid >
            <Grid.RowDefinitions>
                <RowDefinition Height="1*"/>
                <RowDefinition Height="4*"/>
                <RowDefinition Height="1*"/>
 
            </Grid.RowDefinitions>
            <Label Grid.Row="0">1</Label>
 
            <UniformGrid Grid.Row="1" Columns="3" Grid.ColumnSpan="1">
                <Label>2</Label>
                <Label>3</Label>
                <Label>4</Label>
            </UniformGrid>
 
            <Label Grid.Row="2">5</Label>
        </Grid >
            
        <Label>6</Label>
    </UniformGrid>

@alexparser · 30.11.2022, 22:40 **[ТС]**

Сообщение от Элд Хасп

Там вроде нет UniformGrid.

Действительно, в UWP не поддерживается.
Но можно установить Microsoft.Toolkit.Uwp.UI.Controls и все будет работать.

@Элд Хасп · 30.11.2022, 22:57

Сообщение от alexparser

Но можно установить Microsoft.Toolkit.Uwp.UI.Controls и все будет работать.

Ради одной панели?

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="*"/>
 
        </Grid.RowDefinitions>
        <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                    <RowDefinition Height="4*"/>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
 
                <Label Grid.Row="0">1</Label>
 
                <Grid Grid.Row="1">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0">2</Label>
                    <Label Grid.Column="1">3</Label>
                    <Label Grid.Column="2">4</Label>
                </Grid>
 
                <Label Grid.Row="2">5</Label>
            </Grid >
            <Label Grid.Column="1">6</Label>
        </Grid>
 
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
 
            <Label Grid.Column="0">7</Label>
            <Label Grid.Column="1">8</Label>
            <Label Grid.Column="2">9</Label>
            <Label Grid.Column="3">10</Label>
            <Label Grid.Column="4">11</Label>
        </Grid>
    </Grid>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@alexparser 0 / 0 / 0 Регистрация: 21.01.2016 Сообщений: 31
	28.11.2022, 02:48 [ТС]
	Тут 3 возможных варианта масштабирования. 1-й нормальный. 0

@alexparser 0 / 0 / 0 Регистрация: 21.01.2016 Сообщений: 31
	28.11.2022, 04:09 [ТС]
	Поясню, когда окно масштабируется, то сетка тянется вместе с контентом сохраняя пропорции. Если экран широкий (вариант №2), макет центрируется, а по левому и правому краю остается свободное пространство. Синим контуром отмечена зона экрана. 0

@alexparser 0 / 0 / 0 Регистрация: 21.01.2016 Сообщений: 31
	30.11.2022, 19:41 [ТС]
	Элд Хасп Возможно ли такое вложение панелей как на рисунке? 0