Форум программистов, компьютерный форум, киберфорум
C#: WPF, UWP и Silverlight
Форум программистов и сисадминов Киберфорум > Форум программистов > .NET > C# .NET > C#: WPF, UWP и Silverlight
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
1

Cross resolution application, adaptive UI design. Не получается в WPF. Как сделать?

16.08.2018, 13:42. Показов 1069. Ответов 17
Метки adaptive, cross-resolution, design, resolution, ui, wpf (Все метки)
Author24 — интернет-сервис помощи студентам
Всем привет.
Пытаюсь "построить" простенький UI для разрешения мин: 1024x768 и макс: 1920x108. Картинка ведет себя "прилично".
Остальное из рук вон плохо.
Проект прикреплен.
Вопрос: Как добиться чтобы 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

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow" Height="768" Width="1024"  MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920">
    <Grid  ShowGridLines="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="80*"/>
            <RowDefinition Height="512*"/>
            <RowDefinition Height="160*"/>
        </Grid.RowDefinitions>
        <Image x:Name="image"  Source="Resources/missile.png" Grid.Row="1"/>
        <GroupBox x:Name="groupBox_Copy" Header="Launch missile1" Height="148" VerticalAlignment="Top" Margin="430,503.6,468.6,0" Grid.Row="1" Grid.RowSpan="2">
            <Button x:Name="button_Copy" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
        </GroupBox>
        <GroupBox x:Name="groupBox_Copy1" Header="Launch missile3" Height="148" VerticalAlignment="Top" Margin="628,503.6,270.6,0" Grid.Row="1" Grid.RowSpan="2">
            <Button x:Name="button_Copy1" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
        </GroupBox>
        <GroupBox x:Name="groupBox_Copy2" Header="Launch missile2" Height="148" VerticalAlignment="Top" Margin="240,503.6,658.6,0" Grid.Row="1" Grid.RowSpan="2">
            <Button x:Name="button" Content="Start" HorizontalAlignment="Left" Margin="20,13,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.245,-0.667"/>
        </GroupBox>
        <Button x:Name="button1" Content="Button" HorizontalAlignment="Left" Margin="257,53.6,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
        <Button x:Name="button1_Copy" Content="Button" HorizontalAlignment="Left" Margin="454,53.6,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
        <Button x:Name="button1_Copy1" Content="Button" HorizontalAlignment="Left" Margin="258,53.6,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
        <Button x:Name="button1_Copy2" Content="Button" HorizontalAlignment="Left" Margin="651,53.6,0,0" Grid.Row="1" VerticalAlignment="Top" Width="75" RenderTransformOrigin="3.211,0.593"/>
    </Grid>
 
</Window>
Вложения
Тип файла: zip Missile.zip (198.7 Кб, 4 просмотров)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 16.08.2018, 13:42
Ответы с готовыми решениями:

Проектирование Design & Exception Handling Application Block
подзадача состоит в проектировании сабжа. немного о нем написано тут:...

WPF: Material Design
Есть такая библиотека - Material Design In XAML Toolkit. Скачал с github демо-версию. В...

Как открыть приложение wpf browser application ?
Создаю простейшее приложение с помощью wpf browser application, но при попытке стартануть его, он...

Как сделать responsive design
Всем привет! Имею такую проблему: При работе в Firefox или Chrome, вид под телефон ( будь то...

17
879 / 558 / 291
Регистрация: 21.11.2012
Сообщений: 1,553
16.08.2018, 17:58 2
вы задаете фиксированные размеры элементам и удивляетесь почему они не подстраиваются под новое разрешение? Используйте колонки для грида. избавьтесь от таких отступов

XML
1

Margin="257,53.6,0,0"
1
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 15:26 3
Цитата Сообщение от Bulky Посмотреть сообщение
Вопрос: Как добиться чтобы 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

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow"   MinHeight="240" MinWidth="360" MaxHeight="1080" MaxWidth="1920">
    <Grid  ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="FontSize" Value="16"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Padding" Value="10"/>
            </Style>
        </Grid.Resources>
        <Viewbox Grid.Row="1" Grid.Column="1">
            <Image Source="Resources/missile1.png"/>
        </Viewbox>
        <Viewbox Grid.Row="1" Grid.Column="2">
            <Image Source="Resources/missile2.png"/>
        </Viewbox>
        <Viewbox Grid.Row="1" Grid.Column="3">
            <Image Source="Resources/missile3.png"/>
        </Viewbox>
        <Button x:Name="button_Copy" Content="Start" Grid.Column="1"/>
        <Button x:Name="button_Copy1" Content="Start" Grid.Column="2"/>
        <Button x:Name="button" Content="Start" Grid.Column="3" />
        <Button x:Name="button1_Copy" Content="Button" Grid.Row="2" Grid.Column="1" />
        <Button x:Name="button1_Copy1" Content="Button" Grid.Row="2" Grid.Column="2" />
        <Button x:Name="button1_Copy2" Content="Button" Grid.Row="2" Grid.Column="3"/>
    </Grid>
 
</Window>
Вложения
Тип файла: 7z Missile_new.7z (273.9 Кб, 4 просмотров)
1
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 15:52  [ТС] 4
Я гляну, вечером. Спасибо.

Добавлено через 9 минут
Меня даже больше интересует реакция Canvas и controls на нем. Панели с кнопками внизу, мы почти сразу же решили с помощь Grid и разбивки на "клетки".
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 16:02 5
Цитата Сообщение от Bulky Посмотреть сообщение
Меня даже больше интересует реакция Canvas и controls на нем.
У Вас в XAML нет Canvas - о чём Вы пишите?
Canvas - это панель для позиционного расположения элементов и они не должны реагировать на изменения общих размеров панели. В этом весь смысл панели это типа.

Добавлено через 3 минуты
Цитата Сообщение от Bulky Посмотреть сообщение
Панели с кнопками внизу, мы почти сразу же решили с помощь Grid и разбивки на "клетки".
Я не стал возить, но более правильно было бы объединить верхнюю и нижнюю кнопки и рисунок одной ракеты в единый шаблон. Рисунок тоже должен быть один, а цифра рисоваться на нём отдельным элементом. Но это в редакторе картинок надо возиться.
Будет время - доделаю.
0
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 16:03  [ТС] 6
Простите, я думаю о том проекте, что вызвал "бурную" дискуссию здесь, яйца и помидоры. Там был Canvas. А здесь Image из ресурсов.
Я же говорил выложу отдельно. Это нет проект. Хотя цель схожая.Тоже полезно будет посмотреть.
Спасибо.
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 16:09 7
Цитата Сообщение от Bulky Посмотреть сообщение
Простите, я думаю о том проекте, что вызвал "бурную" дискуссию здесь, яйца и помидоры. Там был Canvas. А здесь Image из ресурсов.
Я же говорил выложу отдельно. Это нет проект. Хотя цель схожая.Тоже полезно будет посмотреть.
Спасибо.
Ок! Найдите - выложите в новой теме.
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 17:23 8
Вот пример реализации с шаблонам. Такая реализация лучше. Используется единый рисунок без подписи. Подпись делает TextBlock. Все элементы шаблоны обёрнуты в ViewBox для пропорционально изменения размеров.
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<Window x:Class="WpfApplication2.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:WpfApplication2"
        mc:Ignorable="d"
        Title="MainWindow"   MinHeight="240" MinWidth="360" MaxHeight="1080" MaxWidth="1920">
    <Grid  ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.Resources>
            <Style TargetType="Button">
                <Setter Property="FontSize" Value="16"/>
                <Setter Property="HorizontalAlignment" Value="Center"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="Margin" Value="5"/>
                <Setter Property="Padding" Value="5"/>
            </Style>
            <Style TargetType="Label" x:Key="LabelMissele">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition/>
                                    <RowDefinition Height="2*"/>
                                    <RowDefinition/>
                                    <RowDefinition Height="10*" />
                                    <RowDefinition/>
                                    <RowDefinition Height="2*" />
                                    <RowDefinition/>
                                </Grid.RowDefinitions>
                                <Viewbox Grid.Row="1">
                                    <Button Content="Start" Tag="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
                                </Viewbox>
                                <Viewbox Grid.Row="5">
                                    <Button Content="Button" Tag="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" />
                                </Viewbox>
                                <Viewbox Grid.Row="3">
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <Image Grid.RowSpan="2" Source="Resources/ракета.png"/>
                                        <TextBlock FontSize="40" Text="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center" HorizontalAlignment="Center" Panel.ZIndex="1"/>
                                    </Grid>
                                </Viewbox>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <Label Grid.Column="1" Style="{StaticResource LabelMissele}" Tag="1"/>
        <Label Grid.Column="2" Style="{StaticResource LabelMissele}" Tag="2"/>
        <Label Grid.Column="3" Style="{StaticResource LabelMissele}" Tag="3"/>
    </Grid>
 
</Window>
Миниатюры
Cross resolution application, adaptive UI design. Не получается в WPF. Как сделать?  
0
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 19:23  [ТС] 9
Элд Хасп,

Пролистываю " модернизацию"...

В RootGrid, 3 Column определены в коде, две крайние, -нет. Вижу, что так можно. Я все до одной определяю.
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 19:44 10
Цитата Сообщение от Bulky Посмотреть сообщение
В RootGrid, 3 Column определены в коде, две крайние, -нет. Вижу, что так можно. Я все до одной определяю.
Вы имеете ввиду ширину? Я задал пропорциональную ширину - средние колонки шире крайних в 2 раза. Значение по умолчанию "1*" - можно не вводить.
0
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 19:51  [ТС] 11
Цитата Сообщение от Элд Хасп Посмотреть сообщение
Вы имеете ввиду ширину? Я задал пропорциональную ширину - средние колонки шире крайних в 2 раза. Значение по умолчанию "1*" - можно не вводить.
Я к тому, что "крайних" вообще в коде нет, в поле Дизайнера есть.
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 19:58 12
Цитата Сообщение от Bulky Посмотреть сообщение
Я к тому, что "крайних" вообще в коде нет, в поле Дизайнера есть.
В каком коде? Там код что ли ещё есть?

Добавлено через 50 секунд
Нет там кода - посмотрел - CB пустой!
0
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 20:03  [ТС] 13
XML
1
2
3
4
5
6
7
8

 <Grid  ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
Я сделал линии видимыми. В коде 3 Column определены, а в Дизайнере 5.
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 20:11 14
Цитата Сообщение от Bulky Посмотреть сообщение
Я сделал линии видимыми. В коде 3 Column определены, а в Дизайнере 5.
Я не пойму что Вы под кодом имеете ввиду.... Кода C# - нету. CB - пустой. XAML - в нём 5 колонок заданы. Крайние без явного задания ширины (по умолчанию это одинарная ширина), три средние с двойной шириной.
Дизайнер? Конструктор? В нём так же 5 колонок как и в XAML.
0
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 20:22  [ТС] 15
Под кодом ес-но XAML код. Все понял, в коде 5 в Дизайнере 5. 3 с определением ширины, два без.

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

 <Style TargetType="Label" x:Key="LabelMissele">
не понимаю что там со стилем Label делается. И зачем в стили Label засовывать RowsDefinition. Отдельно нельзя сделать?

Потом
XML
1

 <Button Content="Start" Tag="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
С чем и зачем "биндуется"?
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 20:43 16
Цитата Сообщение от Bulky Посмотреть сообщение
не понимаю что там со стилем Label делается. И зачем в стили Label засовывать RowsDefinition. Отдельно нельзя сделать?
Так как три элемента единообразны: две кнопки, один рисунок, один текст; то создаю шаблон для отображения такого элемента. Шаблон определяю через стиль для Label.
XML
29
30
31

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate>
В шаблоне определяю содержимое элемента. Для содержимого взял за основу семистрочный Grid в нём компаную другие элементы. Сейчас смотрю - можно сделать было чуть проще. Но на тот момент делал "руками", а не головой.
Для идентификации, элементов - "ракет" (в данном случае - номер), нужна привязка к какому-то источнику. Допустим, та же кнопка должна знать с какой ракетой ей "работать". Так как VM не определена, то не стал излишне усложнять и привязал свойства Tag кнопок и Text текстблока к Tag родительского элемента (TemplatedParent).
При объявлении Label с этим шаблоном в Tag указываю номер ракеты (можно любой текст) и этот номер будет через текстблок выводится на корпусе ракеты и так же он будет в Tag кнопок. В обработчике (а они общие для кнопок) проверяя Tag кнопки вызвавшей событие мы можем определить в какой ракете эта кнопка.
0
-22 / 28 / 2
Регистрация: 17.03.2018
Сообщений: 758
12.11.2018, 20:59  [ТС] 17
Кнопки "дышат" потому-что в grid и во ViewBox. Тут понятно.

А вот Labels "дышат", они же просто в Rootgrid определены. Интересно...
0
Модератор
Эксперт .NET
15466 / 10712 / 2786
Регистрация: 21.04.2018
Сообщений: 31,531
Записей в блоге: 2
12.11.2018, 21:34 18
Цитата Сообщение от Bulky Посмотреть сообщение
А вот Labels "дышат", они же просто в Rootgrid определены. Интересно...
В лейбле только элементы шаблона. Сами размеры определены по размерам ячейки Grid - режим по умолчанию strech.
ViewBox потребовались, что бы не заниматься конвертацией размеров шрифтов. Остальные размеры элементов без проблем будут меняться и без ViewBox, а вот размер шрифта трудно к чему-то привязать.
Замените ViewBox на обычный Grid и посмотрите как изменится поведение.
0
12.11.2018, 21:34
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 12.11.2018, 21:34
Помогаю со студенческими работами здесь

ColorDialog в WPF Application
Имеется такая проблема, как можно преобразовать или обойти такую проблему, как преобразование из ...

Как сделать чтобы окна Form1 и Form1(Design) открывались автоматически?
Как сделать чтобы окна Form1 и Form1(Design) открывались автоматически? В Visual Studio 2010.

Отправка параметров по нажатию на кнопку в wpf application
привет без понятия как правильно объяснить проблему, так что строго не судите=) есть приложение,...

Adobe PDF Reader COM Component in a WPF application
Добрый день! Наткнулся на статью по редакции компонента Adobe...

Сменить цвет BorderBrush на кнопке в WPF Application
Добрый день! Я хотел сделать чтобы кнопка 2 меняла цвет BorderBrush у кнопки 1 private...

Delta Design - наш ответ Altium Design
Собственно сайт разработчиков: _http://www.delta-ecad.ru ( не сочтите рекламой). Импортозамещение...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru