Внутренний мир WPF (элементы управления и макеты)

содержание

предисловие

Зачем писать WPF?

Сначала я был относительно против WPF, потому что им мало кто пользуется. Такое ощущение, что в чем разница между приложениями формы и Winform. Но я ошибался, я очень благодарен моему лектору за рекомендацию книги Лю Тименга «Объясните WPF простым способом», которая помогла мне понять прелесть WPF — пользовательского интерфейса, управляемого данными.

Итак, такой отличный фреймворк, что я хотел его записать, зная, что разработчиков WPF так мало, что большинство обучающих видео сняты 10-летней давности. Я записал не для чего, уж очень люблю WPF, такое "странное" чувство.

1. Макет пользовательского интерфейса

Как говорится: «Люди полагаются на одежду, а лошади полагаются на седла».

Что это обозначает? Это означает, что когда человек носит приличную одежду, он будет казаться необычайно энергичным, когда лошадь снабжена хорошо выделанным седлом, он будет выглядеть необычайно красивым. Одежда оказывает большое влияние на красоту человеческого тела. Из "Сюэ Рэнгуй Чжэнгер"

Итак, вводим это предложение в WPF

В качестве специализированной технологии пользовательского интерфейса функция компоновки является одной из ее основных функций. Дружественный пользовательский интерфейс и хороший пользовательский опыт неотделимы от хорошо продуманного макета.
Две части с наибольшей рабочей нагрузкой для дизайнеров WPF — это макет и анимация. Макет является статическим, а анимация — динамичным. Пользовательский опыт — это ощущение пользователя, взаимодействующего с программными функциями в этой динамике.
Тем не менее, макеты — это одежда WPF!

2. Элементы управления

«Моя прежняя жизнь зависит от моря и воды, а он полон любви в прошлом».

Это означает, что дикие животные и дикая среда зависят от воды и не могут быть разделены.

Так что насчет WPF? Отображаемый макет страницы. Все они состоят из элементов управления. Элементы управления неотделимы от WPF, который представляет собой живую среду, формирующую красивую и яркую картинку (макет).

Прежде чем приступить к изучению этих элементов макета, нам нужно знать, что каждый элемент макета имеет свои особенности, и нам нужно гибко его использовать. Не делайте все, что можете, просто смешивайте это разумно.

(Как и экологическая среда, она должна быть разумно подобрана, иначе произойдет «биологическое вторжение» типа «кражи кур без потери риса», что увеличивает нагрузку на экологическую среду. Разрушение)

1. Классификация средств контроля

Грубо говоря, существует не более 6 видов контроля, с которыми мы чаще всего сталкиваемся в своей повседневной работе, а именно:

1. Элементы управления макетом: он может вмещать несколько элементов управления или вкладывать другие элементы управления макетом для организации и размещения элементов управления в пользовательском интерфейсе, например: StackPanel, Grid, Dock, WrapPanel и Canvas;
2. Элемент управления содержимым: может содержать только один другой элемент управления или элемент управления макетом в качестве своего содержимого, например: кнопка, окно;
3. Элемент управления содержимым с заголовком: эквивалентен элементу управления содержимым, но может быть добавлен заголовок, например: Group Box, TabItem;
4. Элемент управления: он может отображать столбец данных.Как правило, тип данных в этом столбце одинаков. Например, ListBox, ComboBox;
5. Элемент управления с заголовком: это эквивалентно добавлению области отображения заголовка к элементу управления, например: TreeViewItem, MenuItem, который часто используется для отображения иерархических данных;
6. Специальные элементы управления содержимым: например, TextBox может хранить строки, TeztBlock может хранить текст в свободном управляемом формате, а Image может хранить данные типа изображения... Такие элементы управления относительно независимы.

Что касается того, почему это так классифицировано, на самом деле нам нужно только тщательно испытать это, чтобы понять. Реально не работает, перетаскиваешь из тулбара, смотришь, смотришь мои слова. "Что? Ты так и не понял"…………………………………Автор умер

Ну, мы не будем вдаваться в подробности об этих элементах управления. Мы в основном познакомимся с элементами управления макетом. Для других атрибутов вы можете обратиться к следующему: Введение в использование основных элементов управления WPF:blog.CSDN.net/Nirvana — это жена/искусство IC…

3. Элементы управления макетом

Ну, наконец, к нашей теме. WPF предоставляет нам 5 методов компоновки.Они имеют разные характеристики и могут быть вложены друг в друга.Давайте с ними познакомимся.

1. Сетка: макет списка
2, StackPanel: макет панели стека
3. WrapPanel: панель компоновки потока (когда элемент выровнен по горизонтали и содержимое превышает ширину, строка автоматически переносится; когда элемент выровнен по вертикали и содержимое превышает высоту, столбец переносится автоматически)
4. DockPanel: док-панель
5. Холст: Панель координат

1. Макет списка сетки

Слово Grid переводится как «сетка; решетка, сетка» Правильно, он делит нашу страницу на части, как сетка.

Мы разместили на форме 2 TextBlock и 2 TextBox и хотели реализовать стиль окна входа в систему, но это не удовлетворило, они все перекрывались.

Почему они все пересекаются?

Поскольку мы не внесли соответствующие изменения в контейнер Grid, теперь это «большая сетка» с одной строкой и одним столбцом. Конечно, каждый из них будет перекрываться, если вы не установите свойство Magin, что, конечно же, не то, чего мы хотим достичь.

Итак, мы установили

Столбец
Строка

«Разделенная сетка»

Мы можем решить разделить нашу «Сетку на несколько сеток», добавив узел ColumnDefinitions и узел RowDefinitions.

Как показано на рисунке, он разделен на четыре сетки:

Взглянув на окно дизайна, мы также обнаружим, что сетка разделена линиями на четыре части:

Фу? Нет, почему наши элементы управления все еще перекрываются? Это потому, что мы не установили, в какой сетке они находятся. После загрузки давайте настроим.

Определение положения и объединение ячеек

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

Местоположение строки: Grid.Row="0"
Расположение столбца: Grid.Column="0"

По умолчанию не установлено, значение равно 0, поэтому будет перекрытие, давайте настроим положение.

Ну все вернулось на круги своя, добавление кнопки, как же не быть кнопки войти!

установив

Объединение ячеек строки: Grid.RowSpan="1"
Объединение ячеек столбцов: Grid.ColumnSpan="1"

По умолчанию стоит 1, при слиянии пишут несколько. После небольшой модификации наш интерфейс становится таким:

Эх... это выглядит немного некрасиво, давайте добавим некоторые атрибуты, чтобы настроить его,

установить ширину и высоту

Мы устанавливаем ширину, устанавливая ширину ColumnDefinition и высоту RowDefinition, чтобы установить высоту

Ширина и высота поддерживают пиксели, масштаб и адаптивность.

Пиксели: просто используйте числа напрямую
Масштаб: в * как единица измерения
Адаптивно: установка значения бита автоматически

Что ж, давайте применим вышеизложенные знания и скорректируем наше представление:

Суммировать

Что ж, давайте суммируем ширину и высоту выше:

Прежде всего, мы устанавливаем соотношение столбцов Grid 1:3 (*, 3*).Когда мы потянем размер формы, мы обнаружим, что их размеры меняются в равных пропорциях.
Во-вторых, для рядов Сетки задаются две фиксированные высоты, и мы можем обнаружить, что как бы ни менялась форма, их высоты остаются прежними.
Последняя строка настроена как адаптивная, я намеренно установил высоту кнопки на 100. Мы видим, что последняя строка таблицы также 100. Мы можем знать, что auto адаптивен в зависимости от содержимого.

2. Панель стека StackPanel

Всем знакомо слово "стек". Панель стека похожа на контейнер, который "выстраивается в очередь". Давайте изменим сетку под окном на панель стека и испытаем ее.

задать направление

Мы разместили много кнопок в StackPanel и обнаружили, что они выстроены одна за другой по горизонтали. Если вам это не нравится, конечно, вы можете изменить направление!

Установив ориентацию

Горизонтальное выравнивание: Orientation="Горизонтальное"
Выравнивание по вертикали: Orientation="Vertical" (по умолчанию)

Для самих внутренних элементов вы также можете выбрать способ их выравнивания.

HorizontalAlignment="left" Center,right
VerticalAlignment="Top" Bottom,Center,Stretch

3. Схема потока WrapPanel

Когда элемент выровнен по горизонтали и содержимое превышает ширину, строка автоматически переносится; когда элемент выровнен по вертикали и содержимое превышает высоту, столбец переносится автоматически)

Это может выглядеть так, как показано выше, но на самом деле это не то же самое. Когда количество внутренних дочерних элементов StackPanel превысит ширину (высоту), он переполнит форму, и макет потока автоматически завершится. Часто используется для динамической генерации данных.

Это не будет подробно описываться, свойства такие же, как и выше.

4. Схема стыковки DockPanel

Друзья, которые занимались разработкой winfrom, знают атрибут Docl, поэтому наш макет Dock тоже такой же, давайте попрактикуемся.

Элемент управления в контейнере DockPanel добавит дополнительное свойство DockPanel.Dock

DockPanel.Dock="Top"
DockPanel.Dock="Bottom"
DockPanel.Dock="Left"
DockPanel.Dock="Right"

Они вверху, внизу, влево и вправо соответственно.Элементы управления будут иметь разную ширину и высоту (или размеры) в соответствии с установленным порядком.По умолчанию размер последнего закрепленного элемента управления занимает весь оставшийся интерфейс.

Внимательно посмотрите слева и справа, и вы поймете, о чем я говорю, недавно закрепленные элементы управления занимают всю остальную часть страницы.

5. Расположение координат холста

Ну, это действительно эквивалентно верстке winform, установке координат и определению положения контрола.

Элементы управления в контейнере Canvas добавят дополнительные свойства.

В верхней части окна: Canvas.Top="20"
С левой стороны окна: Canvas.Left="100"
Снизу окна: Canvas.Bottom="20"
Расстояние справа от окна: Canvas.Right="0"

4. Комплексные мелкие дела

Если вы все это прочитали, давайте сделаем небольшой кейс.

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="4*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <StackPanel Grid.RowSpan="2" Grid.Column="0">
            <Button  Height="50">新建StackPanel</Button>
            <Button  Height="50">保存StackPanel</Button>
            <Button  Height="50">增加StackPanel</Button>
            <Button  Height="50">导入StackPanel</Button>
            <Button  Height="50">导出StackPanel</Button>
            <Button  Height="50">关闭StackPanel</Button>
        </StackPanel>
        <DockPanel Grid.Row="0" Grid.Column="1">
            <TextBlock DockPanel.Dock="Top" HorizontalAlignment="Center">我是DockPanel</TextBlock>
            <WrapPanel>
                <Button Width="200">WrapPanel</Button>
                <Button Width="200">WrapPanel</Button>
                <Button Width="200">WrapPanel</Button>
                <Button Width="200">放不下啦WrapPanel</Button>
                <Button Width="200">WrapPanel</Button>
            </WrapPanel>
        </DockPanel>
        <Canvas Grid.Row="1" Grid.Column="1">
            <TextBlock Canvas.Top="100" Canvas.Left="100">Canvas账号：</TextBlock>
            <TextBox Canvas.Top="100" Canvas.Left="200">Canvas请输入账号：</TextBox>
            <TextBlock Canvas.Top="130" Canvas.Left="100">Canvas密码：</TextBlock>
            <TextBox Canvas.Top="130" Canvas.Left="200">Canvas请输入密码：</TextBox>
        </Canvas>
    </Grid>