В xaml коде для элемента windows определите линейную градиентную заливку фона

Как закрасить область с линейным градиентом

В этом примере показано, как использовать LinearGradientBrush класс для закрашивания области с линейным градиентом. В следующем примере объект Fill для Rectangle закрашивается с помощью диагонального линейного градиента, который переходит от желтого к красному к темному зеленому.

Пример

На следующем рисунке показан градиент, созданный в предыдущем примере.

Чтобы создать горизонтальный линейный градиент, измените StartPoint и в EndPoint LinearGradientBrush (0, 0,5) и (1, 0,5). В следующем примере объект Rectangle рисуется с горизонтальным линейным градиентом.

На следующем рисунке показан градиент, созданный в предыдущем примере.

Чтобы создать Вертикальный линейный градиент, измените значение StartPoint и EndPoint для на LinearGradientBrush (0,5, 0) и (0,5, 1). В следующем примере объект Rectangle рисуется с помощью вертикального линейного градиента.

На следующем рисунке показан градиент, созданный в предыдущем примере.

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

Источник

Xamarin.Forms Кисти: линейные градиенты

LinearGradientBrush Класс является производным от GradientBrush класса и закрашивает область линейным градиентом, который смешивает два или более цвета вдоль линии, известной как ось градиента. GradientStop объекты используются для указания цветов в градиенте и их позиций. Дополнительные сведения об GradientStop объектах см. в разделе Xamarin.Forms кисти: градиенты.

Класс LinearGradientBrush определяет следующие свойства:

Линейные градиенты также можно создавать с помощью linear-gradient() функции CSS.

Создание LinearGradientBrush

StartPoint Свойства и EndPoint задаются относительно закрашиваемой области. (0, 0) представляет верхний левый угол закрашиваемой области, а (1, 1) — нижний правый угол закрашиваемой области. На следующей диаграмме показана ось градиента для кисти по диагонали линейного градиента.

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

Создание горизонтального линейного градиента

Чтобы создать горизонтальный линейный градиент, создайте LinearGradientBrush объект и установите его StartPoint в значение (0, 0) и задайте значение EndPoint (1, 0). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.

Создание вертикального линейного градиента

Чтобы создать Вертикальный линейный градиент, создайте LinearGradientBrush объект и задайте для его свойства StartPoint значение (0, 0) и значение EndPoint (0, 1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.

Создание диагонального линейного градиента

Чтобы создать диагональный линейный градиент, создайте LinearGradientBrush объект и задайте для него значение StartPoint (0, 0), а в качестве значения EndPoint (1, 1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции.

Источник

Разработка корпоративных приложений на базе WPF

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

1. Создание приложения

Как правило, корпоративное приложение представляет собой программу, реализующую определенную бизнес-задачу (бизнес-функцию). Приложение должно взаимодействовать с данными, которые располагаются в базе данных информационной системы. Архитектура приложения обычно включает слой представления, бизнес-логики и данных. Функциональность каждого слоя приложения во многом определяется предметной областью информационной системы, но имеются и общие, основополагающие функции, которые присущи практически любому корпоративному приложению. Так в приложении необходимо разработать слой представления, который обеспечит интерфейс пользователя с системой. Интерфейс может быть создан с использованием Windows окон и страниц WPF, которые наполняются различными визуальными элементами контроля. Элементы контроля должны поддерживать визуальное представление функциональности системы для пользователя, проводить верификацию вводимых данных и взаимодействовать с бизнес-классами. Слой бизнес-логики приложения должен обеспечивать основную функциональность приложения: формировать бизнес-классы, реализовывать алгоритмы обработки данных, обеспечивать соединение с данными и их кэширование. Реализация данного слоя приложения может быть построена на базе классов, реализующих бизнес-логику, методами классов интерфейсных элементов или методами классов модели данных. Слой данных должен обеспечить взаимодействие приложения с данными системы управления базами данных. В корпоративных приложениях для этого наиболее целесообразно использовать платформу ADO.NET Entity Framework и модель EDM (Entity Data Model). Модель EDM описывает структуру данных независимо от формы хранения.

Для изучения вопросов проектирования корпоративных приложений рассмотрим основные подходы при разработке отдельной функции информационной системы, которая обеспечивает обработку данных по сотрудникам компании. Для учебного примера используется база данных TitlePersonal с небольшим набором таблиц и полей, а функциональность приложения предполагает обеспечение ввода, корректировки и удаление данных о сотрудниках компании. Разрабатываемое приложение должно обеспечивать хранение и обработку следующих данных по сотрудникам компании: фамилия; имя; отчество; должность; дата рождения; телефон; адрес электронной почты.

1. просмотр данных по сотрудникам;

2. ввод данных по новому сотруднику;

3. редактирование данных по сотруднику;

4. удаление данных по сотруднику;

5. поиск данных по сотруднику.

После нажатия кнопки «ОК» будет сформирован шаблон проекта. При этом инструментальная система сгенерирует следующий XAML-документ:

Window x : Class =»Wpf_Erina.MainWindow»
xmlns =»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns : x =»http://schemas.microsoft.com/winfx/2006/xaml»
Title =»MainWindow» Height =»350″ Width =»525″>
Grid >

Grid >
Window >

Дизайнер проекта приведен на Рисунок 2.

x : Class =»Wpf_Erina.MainWindow»

два пространства имен

Title =»MainWindow» Height =»350″ Width =»525″

Метод InitializeComponent() генерируется во время компиляции приложения и в исходном коде не присутствует.

2. Формирование начальной страницы приложения

В последнее время разработчики корпоративных приложений начали осознавать преимущества технологий веб-дизайна, которые базируются на качественном дизайне, четком и понятном интерфейсе. Технология WPF позволяет создавать страничную модель (приложения), с готовыми средствами навигации. Как правило, для каждой страницы приложения создается файл XAML и файл отдельного кода, например на языке C#. При компиляции такого приложения компилятор создает производный класс страницы, который объединяет написанный код с генерируемыми автоматически связующими элементами.

Страницы можно размещать внутри окон и внутри других страниц. В WPF при создании страничных приложений контейнером наивысшего уровня могут быть следующие объекты:

Для вставки страницы внутрь окна будем использовать класс Frame (Рисунок 4). Автоматически будет сгенерирован экземпляр класса Frame с фиксированными границами (Рисунок 5).

В XAML-документ проекта будет добавлена следующая строка:

Frame Content =»Frame» HorizontalAlignment =»Left» Height =»100″ Margin =»144,95,0,0″ VerticalAlignment =»Top» Width =»100″/>

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

Frame Name =» frame 1″ Margin =»3″/>

В результате фрейм заполнит всё окно (Рисунок 6):

Класс Page имеет следующие свойства:

Background – принимает кисть, которая устанавливает заливку для фона;

Content – принимает один элемент, который отображается на странице. Обычно в роли такого элемента выступает контейнер макета (элемент Grid или StackPanel );

KeepAlive – определяет, должен ли объект страницы оставаться действующим после перехода пользователя на другую страницу;

ShowsNavigationUI – определяет, должны ли в обслуживающем данную страницу хосте отображаться навигационные элементы управления;

Title – устанавливает имя, которое должно применяться для страницы в хронологии навигации;

Window Title – устанавливает заголовок окна, который отображается в строке заголовка.

В окне Добавления нового элемента необходимо выбрать шаблон «Страница (WPF)» (1) и задать имя страницы PageMain (2 на Рисунок 8).

В дизайнере проекта сгенерируется страница PageMain.xaml (Рисунок 9).

Классы кистей наследуются от класса System.Windows.Media.Brush и обеспечивают различные эффекты при заполнении фона, переднего плана или границ элементов. Некоторые классы кистей приведены ниже:

LineaGradientBrush – рисует область, используя линейное градиентное заполнение, представляющее собой плавный переход от одного цвета к другому;

RadialGradientBrush – рисует область, используя радиальное градиентное заполнение, представляющее собой плавный переход от одного цвета к другому в радиальном направлении от центральной точки;

ImageBrush – рисует область, используя графическое изображение, которое может растягиваться, масштабироваться или многократно повторяться;

Далее приведен фрагмент XAML-документа для определения градиентной заливки страницы.

Добавим в страницу текстовую строку «Система внутреннего учета инвестиционной компании».

Главная страница приложения в дизайнере представлена на Рисунок 10.

На странице WPF-приложения можно размещать элементы пользовательского интерфейса ( элементы управления) для обеспечения взаимодействия пользователя с бизнес-логикой системы.

3. Навигация страничного приложения

Hyperlink NavigateUri =»PageName.xaml»> Текст Гиперссылки Hyperlink >

Остальные гиперссылки добавьте самостоятельно.

Для реализации функциональности первого окна WPF-приложения осталось добавить кнопку выхода.

Результат компиляции и выполнения WPF-приложения приведен на Рисунок 12.

По условию учебного примера будем постепенно добавлять функциональность приложения в части обработки данных по сотрудникам компании.

4. Проектирование интерфейса

В WPF можно создать основное и контекстное меню. Кроме того, можно создать панель инструментов с кнопками, которые будут реализовывать функциональность, аналогичную пунктам меню.

После добавления графических файлов в проект они будут отображены в обозревателе решений (Рисунок 14).

Для каждой кнопки зададим свойство Name – имя объекта в программе и свойство ToolTip с текстом всплывающей подсказки при наведении указателя мыши на кнопку.

В дизайнере Visual Studio страница PageEmployee примет вид, приведенный на Рисунок 15.

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

В учебном примере будем использовать элемент контроля DataGrid для табличного отображения данных о сотрудниках. В качестве заголовка таблицы применим текстовый блок » Список сотрудников «.

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

DataGridTextColumn – для отображения в ячейках столбцов текстового содержимого;

DataGridCheckBoxColomn – для отображения в ячейках столбцов логических данных;

DataGridComboBoxColomn – для отображения в ячейках столбцов данных, когда имеется набор элементов для выбора;

DataGrid поддерживает множество способов настройки отображения данных. В Таблица 1 приведен список стандартных сценариев.

Таблица 1. Сценарии настройки отображения данных

Переменные цвета фона

Определение поведения при выборе ячейки и строки

Настройка внешнего вида заголовков, ячеек и строк

Доступ к выбранным элементам

Настройка взаимодействия с пользователем

Отмена или изменение автоматически созданных столбцов

Задайте для свойства FrozenColumnCount значение 1 и переместите столбец в крайнюю левую позицию, задав для свойства DisplayIndex значение 0.

В качестве источника данных используются данные XML.

XAML-документ описания интерфейсных элементов страницы PageEmployee имеет следующий вид.

С учетом добавленных интерфейсных элементов страница PageEmployee в дизайнере примет вид, приведенный на Рисунок 17.

После запуска приложения страница PageEmployee будет иметь вид, приведенный на Рисунок 18.

На данном этапе проектирования приложения на странице PageEmployee размещены все необходимые элементы контроля.

5. Разработка бизнес-логики

xmlns : command =»clr-namespace:Wpf_Erina.Commands»

Для класса CommandBinding свойство Command определяет ссылку на соответствующую команду, а свойства Executed и CanExecute задают обработчики событий при выполнении команды.

· первоначальная загрузка страницы (1);

· просмотр данных по всем сотрудникам (2);

· редактирование данных по отдельному сотруднику (3);

· создание новой записи по сотруднику в базе данных (4).

На Рисунок 19 приведена диаграмма состояний приложения, на которой кружками обозначены состояния, а дуги соответствуют переходам при выполнении определенной команды.

На основе диаграммы состояний построим таблицу доступности команд в различных состояниях (Таблица 2).

Таблица 2. Доступность команд в различных состояниях приложения

Источник

LinearGradientBrush

Кисть LinearGradientBrush позволяет создавать смешанное заполнение, которое представляет собой переход от одного цвета к другому.

Рассмотрим пример простейшего градиента. Он заштриховывает прямоугольник по диагонали от синего цвета (в левом верхнем углу) к белому (в правом нижнем углу):

Для создания этого градиента необходимо добавить по одному объекту GradientStop для каждого цвета. Также нужно поместить каждый цвет в градиент, используя значение Offset от 0 до 1.

В этом примере GradientStop для синего цвета имеет смещение 0, а это означает, что он располагается в самом начале градиента. GradientStop для белого цвета имеет смещение 1, что размещает его в конце. Изменяя эти значения, можно управлять плавностью перехода одного цвета в другой.

Например, если установить GradientStop для белого цвета в 0.5. то градиент будет переходить от синего (в левом верхнем углу) к белому цвету в середине прямоугольника (точка между двумя углами). Правая сторона прямоугольника будет полностью белой (второй градиент на рисунке ниже).

Предыдущий код разметки создает градиент с диагональным наполнением, который простирается от одного угла до другого. Однако может понадобиться создать градиент, который распространяется сверху вниз или слева направо, либо же воспользоваться другим диагональным углом. Эти детали управляются свойствами StartPoint и EndPoint класса LinearGradientBrush. Упомянутые свойства позволяют выбирать точку, в которой начинается первый цвет, и изменять точку, в которой переход цвета завершается чистым вторым цветом. (Промежуточная область заполняется плавным переходом одного цвета в другой.)

Однако здесь имеется одна особенность. Координаты, используемые для указания начальной и конечной точек, не являются реальными координатами. Вместо этого LinearGradientBrush назначает точке в левом верхнем углу области, которую нужно заполнить, координату (0,0), а точке в правом нижнем углу — координату (1,1), независимо от реальной высоты и ширины области.

Чтобы создать горизонтальное заполнение сверху вниз, можно указать начальную точку (0,0) левого верхнего угла, а конечную точку — (0,1), представляющую левый нижний угол. Чтобы создать вертикальное заполнение слева направо (без наклона), можно использовать стартовую точку (0,0) и конечную точку (1,0). На рисунке ниже горизонтальный градиент — третий сверху.

Есть возможность схитрить, указав начальную и конечную точки так, чтобы они не были выровнены по углам градиента. Например, можно протянуть градиент от (0, 0) до (0, 0.5) — точки на середине левой стороны, на полпути вниз. Это создаст сжатый линейный градиент — один цвет начнется вверху, переходя во второй цвет на середине прямоугольника. Нижняя половина фигуры будет заполнена вторым цветом. Однако это поведение можно изменить с помощью свойства LinearGradientBrush.SpreadMethod. По умолчанию оно имеет значение Pad (означающее, что области вне градиента заполняются соответствующим сплошным цветом), но допускается присвоить этому свойству значение Reflect (для обращения градиента — переходом от второго цвета обратно к первому) или же Repeat (для дублирования той же цветовой последовательности). На рисунке эффект Reflect показан в четвертом сверху градиенте.

LinearGradientBrush также позволяет создавать градиенты с более чем двумя цветами, добавляя более двух объектов GradientStop. Ниже представлен общий пример иллюстрирующий все вышесказанное:

Кисть LinearGradientBrush может быть указана в любом месте, где используется SolidColorBrush — например, для заполнения фоновой поверхности элемента (через свойство Background), фонового цвета текста (используя свойство Foreground) или для заполнения границы (с помощью свойства BorderBrush). На рисунке показан пример заполненного градиентом элемента TextBlock:

Источник

Общие сведения о закраске сплошным цветом и градиентом

В этом разделе описывается использование SolidColorBrush объектов, LinearGradientBrush и RadialGradientBrush для заливки сплошными цветами, линейными градиентами и радиальными градиентами.

Закрашивание области сплошным цветом

Использование SolidColorBrush в XAML

Чтобы закрасить область сплошным цветом в XAML, используйте один из следующих вариантов.

Выберите стандартную сплошную цветную кисть по имени. Например, можно задать для кнопки значение Background «Red» или «медиумблуе». Список других предопределенных сплошных цветных кистей см. в разделе статические свойства Brushes класса. Пример.

Выберите цвет из 32-разрядной цветовой палитры, указав насыщенность красной, зеленой и синей составляющих для смешения в сплошной цвет. Формат для указания цвета из 32-разрядной палитры — #rrggbb, где rr — шестнадцатеричное число из двух цифр, представляющее относительное количество красного цвета, gg — зеленого, bb — синего. Кроме того, цвет можно указать в формате #aarrggbb, где aa представляет альфа-канал, или прозрачность, цвета. Этот подход позволяет создавать частично прозрачные цвета. В следующем примере параметр для Background Button имеет значение полностью непрозрачного красного цвета с шестнадцатеричной нотацией.

Закрашивание с использованием SolidColorBrush в коде

Чтобы закрасить область сплошным цветом в коде, используйте один из следующих вариантов.

Создайте SolidColorBrush и задайте его Color свойство, используя Color структуру. Можно использовать стандартный цвет из Colors класса или создать Color с помощью статического FromArgb метода.

В следующем примере показано, как задать Color свойство объекта SolidColorBrush с помощью предопределенного цвета.

Статический FromArgb цвет позволяет задать значения альфа-канала, красного, зеленого и синего цвета. Обычный диапазон для этих значений — от 0 до 255. Значение 0 указывает, что цвет полностью прозрачен, а значение 255 — что он полностью непрозрачен. Аналогично значение 0 для красного цвета указывает, что цвет не имеет красной составляющей, а значение 255 означает, что цвет имеет максимальную насыщенность красной составляющей. В следующем примере цвет кисти описан путем указания значения альфа и значений красного, зеленого и синего цветов.

Закрашивание области с помощью градиента

Линейные градиенты

LinearGradientBrushРисует область с градиентом, определенным вдоль линии, оси градиента. Цвета градиента и их расположение указываются вдоль оси градиента с помощью GradientStop объектов. Ось градиента можно изменить, чтобы создать горизонтальный или вертикальный градиент, или обратить направление градиента. Ось градиента описана в следующем разделе. По умолчанию создается диагональный градиент.

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

Этот код создает следующий градиент.

GradientStop— Это базовый Стандартный блок кисти градиента. Ограничитель градиента указывает на в Color Offset вдоль оси градиента.

Свойство ограничителя градиента Color определяет цвет ограничителя градиента. Цвет можно задать с помощью стандартного цвета (предоставляемого Colors классом) или путем указания значений ScRGB или ARGB. В XAML для описания цвета можно также использовать шестнадцатеричный формат. Дополнительные сведения см. в описании Color структуры.

Свойство ограничителя градиента Offset задает расположение цвета ограничителя градиента на оси градиента. Смещение — это значение в Double диапазоне от 0 до 1. Чем ближе значение смещения ограничения градиента к 0, тем ближе цвет находится к началу градиента. Чем ближе значение смещения градиента к 1, тем ближе цвет находится к окончанию градиента.

Цвет каждой точки между ограничениями градиента определяется линейной интерполяцией сочетания цветов, заданных соседними позициями градиента. На следующем рисунке показаны ограничения градиента, используемые в предыдущем примере. Кружками отмечены положения ограничений градиента, а пунктирной линией обозначена ось градиента.

Ось градиента

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

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

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

Радиальные градиенты

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

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

Радиалградиентбрушес с различными параметрами GradientOrigin, Center, RadiusX и RADIUS.

Задание прозрачных и частично прозрачных ограничений градиента

Поскольку ограничения градиента не предоставляют свойство Opacity, необходимо указать альфа-канал цветов с помощью шестнадцатеричной нотации ARGB в разметке или использовать Color.FromScRgb метод для создания точек градиента, которые являются прозрачными или частично прозрачными. Ниже описаны процедуры по созданию частично прозрачных ограничений градиента в XAML и код.

Задание непрозрачности цвета в XAML

В XAML используется шестнадцатеричная нотация ARGB для указания прозрачности отдельных цветов. Шестнадцатеричная нотация ARGB использует следующий синтаксис:

# aa rrggbb

Здесь aa — двузначное шестнадцатеричное значение, используемое для указания непрозрачности цвета. rr, gg и bb — двузначные шестнадцатеричные значения, используемые для указания насыщенности красного, зеленого и синего цветов. Шестнадцатеричная цифра может принимать значения от 0 до F (сначала цифры от 0 до 9, затем буквы от A до F). Наименьшее значение — 0, наибольшее — F. Альфа-значение 00 задает полностью прозрачный цвет, а альфа-значение FF — полностью непрозрачный цвет. В следующем примере шестнадцатеричное представление ARGB используется для задания двух цветов. Первый — частично прозрачный (он имеет альфа-значение x20). Второй — полностью непрозрачный.

Задание непрозрачности цвета в коде

Кроме того, вы можете использовать FromScRgb метод, который позволяет использовать значения ScRGB для создания цвета.

Закрашивание с помощью объектов Image, Drawing, Visual и Pattern

ImageBrushDrawingBrushклассы, и VisualBrush позволяют закрасить область с помощью изображений, рисунков или визуальных элементов. Сведения о закрашивании с использованием изображений, рисунков и шаблонов см. в разделе Рисование с помощью объектов Image, Drawing и Visual.

Источник

Аннотация

Рассматриваются вопросы разработки приложения на основе
технологии WPF. Начальными фазами разработки является проектирование главной
страницы приложения, формирование градиентной заливки фона страницы,
организация навигации по страницам, формирование меню, панели команд,
формирование сетки для данных DataGrid,
создание команд страницы для работы с сотрудниками предприятия и управление
доступностью команд.

Цель

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

1.      
Создание приложения

Как правило, корпоративное приложение представляет собой программу, реализующую
определенную бизнес-задачу (бизнес-функцию). Приложение должно
взаимодействовать с данными, которые располагаются в базе данных информационной
системы. Архитектура приложения обычно включает слой
представления, бизнес-логики и данных. Функциональность каждого слоя приложения
во многом определяется предметной областью информационной системы, но имеются и
общие, основополагающие функции, которые присущи практически любому
корпоративному приложению. Так в приложении необходимо разработать слой
представления, который обеспечит интерфейс пользователя с
системой. Интерфейс может
быть создан с использованием Windows окон и страниц WPF,
которые наполняются различными визуальными элементами контроля. Элементы
контроля должны поддерживать визуальное представление функциональности
системы для пользователя, проводить верификацию вводимых данных и
взаимодействовать с бизнес-классами. Слой
бизнес-логики приложения должен обеспечивать основную функциональность
приложения: формировать бизнес-классы, реализовывать алгоритмы обработки
данных, обеспечивать соединение с данными и их кэширование.
Реализация данного слоя приложения может быть построена на базе классов,
реализующих бизнес-логику, методами классов интерфейсных элементов или методами
классов модели данных. Слой данных должен
обеспечить взаимодействие приложения с данными системы
управления базами данных. В корпоративных приложениях для этого наиболее
целесообразно использовать платформу ADO.NET Entity Framework и модель EDM (Entity
Data Model). Модель EDM описывает структуру данных независимо от формы
хранения.

Для изучения вопросов проектирования корпоративных
приложений рассмотрим основные подходы при разработке отдельной функции
информационной системы, которая обеспечивает обработку данных по сотрудникам компании. Для учебного примера
используется база данных TitlePersonal с небольшим
набором таблиц и полей, а функциональность приложения предполагает обеспечение
ввода, корректировки и удаление данных о сотрудниках компании. Разрабатываемое
приложение должно обеспечивать хранение и обработку
следующих данных по сотрудникам компании: фамилия; имя;
отчество; должность; дата рождения; телефон; адрес электронной
почты.

Функции приложения:

1.    
просмотр данных по сотрудникам;

2.    
ввод данных по новому сотруднику;

3.    
редактирование данных по сотруднику;

4.    
удаление данных по сотруднику;

5.    
поиск данных по сотруднику.

Для разработки приложения необходимо создать WPF-проект
(Рисунок
1).
В окне «Создать проект» необходимо проверить установку библиотеки .NET
Framework 4 (1 – на Рисунок 1),
выбрать шаблоны Windows (2 –
на Рисунок 1),
а среди имеющихся шаблонов задать Приложение WPF
и в поле «Имя» ввести имя проекта WPF_FIO
(где FIO — ваша фамилия).

Рисунок 1. Окно создания проекта

После нажатия кнопки «ОК» будет сформирован шаблон проекта. При этом инструментальная система
сгенерирует следующий XAML-документ:

<Window x:Class=»Wpf_Erina.MainWindow»
        xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
        xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml»
        Title=»MainWindow»
Height=»350″ Width=»525″>
    <Grid>
      
    </Grid>
</Window>

Дизайнер
проекта приведен на Рисунок 2.

Рисунок 2. Окно дизайнера проекта

В приведенном XAML-документе имеется
один элемент верхнего уровня <Window>.
Дескриптор </Window> завершает весь документ. В XAML-документе
приведено имя класса MainWindow

x:Class=»Wpf_Erina.MainWindow»

два пространства имен

        xmlns=»http://schemas.microsoft.com/winfx/2006/xaml/presentation«

        xmlns:x=»http://schemas.microsoft.com/winfx/2006/xaml«

и три свойства:

        Title=»MainWindow»
Height=»350″ Width=»525″

Каждый атрибут
соответствует определенному свойству класса Window. Приведенные атрибуты предписывают
WPF создать окно с надписью MainWindow и размером 350х525 единиц. При компиляции и запуске проекта
приложения на дисплей выводится окно, приведенное на Рисунок 3.

Рисунок 3. Окно MainWindow проекта

Когда выполняется компиляция приложения,
XAML-файл, который определяет пользовательский интерфейс (MainWindow.xaml), транслируется в
объявление типа CLR , которое объединяется с логикой
приложения из файла класса отдельного кода (MainWindow.xaml.cs).

Метод InitializeComponent() генерируется во время компиляции приложения
и в исходном коде не присутствует.

Для программного управления элементами управления,
описанными в XAML-документе, необходимо задать XAML атрибут Name. Так для задания имени элементу Grid необходимо
записать следующую разметку:

    <Grid Name=»grid»>

    </Grid>

2.      
Формирование начальной страницы приложения

В последнее время разработчики корпоративных приложений
начали осознавать преимущества технологий веб-дизайна, которые базируются на качественном
дизайне, четком и понятном интерфейсе. Технология WPF позволяет создавать страничную модель (приложения),
с готовыми средствами навигации. Как правило, для
каждой страницы приложения создается файл XAML и файл отдельного кода, например
на языке C#. При компиляции такого приложения компилятор создает производный класс страницы,
который объединяет написанный код с генерируемыми автоматически связующими
элементами.

Страницы можно размещать внутри окон и внутри других
страниц. В WPF при создании страничных приложений контейнером наивысшего уровня
могут быть следующие объекты:

1.    
NavigationWindow,
который представляет собой несколько видоизмененную версию класса Window;

2.    
Frame,
находящийся внутри другого окна или другой страницы;

3.    
Frame,
обслуживаемый непосредственно в Internet Explorer.

Для вставки страницы внутрь окна будем использовать класс Frame (Рисунок
4).
Автоматически будет сгенерирован экземпляр класса Frame с
фиксированными границами (Рисунок
5).

Рисунок 4. Выбор класса Frame в панели инструментов

Рисунок 5. Фрейм с фиксированными границами

В XAML-документ проекта будет
добавлена следующая строка:

<Frame Content=»Frame» HorizontalAlignment=»Left» Height=»100″
Margin=»144,95,0,0″
VerticalAlignment=»Top» Width=»100″/>

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

<Frame Name =»frame1″ Margin=»3″ />

В результате фрейм
заполнит всё окно (Рисунок
6):

Рисунок 6. Фрейм, заполняющий всё окно

Созданный фрейм необходим для
размещения в нем страницы WPF-приложения. Класс Page допускает
наличие только одного вложенного элемента. Он не является элементом управления
содержимым и наследуется от класса FrameworkElement.
Класс Page имеет небольшой набор дополнительных свойств, которые
позволяют настраивать его внешний вид, взаимодействовать с контейнером и
использовать навигацию. Для перехода на другую страницу необходимо использовать
навигацию.

Класс Page имеет
следующие свойства:

Background – принимает кисть, которая устанавливает заливку для фона;

Content – принимает один элемент, который отображается на странице.
Обычно в роли такого элемента выступает контейнер макета (элемент Grid или
StackPanel);

Foreground,
FontFamile, FontSize –
определяет используемый по умолчанию внешний вид для текста внутри страницы.
Значение этих свойств наследуется элементами внутри страницы.

WindowWidth,
WindowHeight – определяет внешний вид окна, в которое упаковывается
страница (не действуют, если страница обслуживается во фрейме);

NavigationService – возвращает ссылку на объект NavigationService, которую можно
использовать для отправки пользователя на другую страницу программным путем;

KeepAlive – определяет, должен ли объект страницы оставаться
действующим после перехода пользователя на другую страницу;

ShowsNavigationUI – определяет, должны ли в обслуживающем данную страницу
хосте отображаться навигационные элементы управления;

Title – устанавливает имя, которое должно применяться для страницы
в хронологии навигации;

Window Title – устанавливает заголовок окна, который отображается в строке
заголовка.

Добавим в проект начальную страницу. Для этого в Обозревателе
решений щелкнем правой кнопкой мыши на проекте Wpf_FIO. В контекстном меню
выберем пункт Добавить (1 –
на Рисунок 8),
а в раскрывающемся меню пункт Страница
(2 на Рисунок 7).

Рисунок 7. Меню создания страницы

В окне Добавления нового элемента необходимо
выбрать шаблон «Страница (WPF)»
(1) и задать имя страницы PageMain (2 на Рисунок 8).

Рисунок 8. Окно Добавления нового элемента

В дизайнере проекта сгенерируется страница PageMain.xaml (Рисунок 9).

Рисунок 9. Дизайнер страницы PageMain.xaml

В сгенерированной странице в качестве контейнера верхнего
уровня используется Grid.
Заменим Grid на контейнер StackPanel.

Объект StackPanel имеет
свойство Background,
которое предоставляет кисть для рисования фоновой области элемента. Данное
свойство является сложным, т.е. должно задаваться в следующем виде:

        <StackPanel.Background>

            …

        </StackPanel.Background>

Классы кистей наследуются от
класса System.Windows.Media.Brush и обеспечивают различные эффекты при заполнении фона,
переднего плана или границ элементов. Некоторые классы кистей приведены ниже:

LineaGradientBrush – рисует область, используя линейное градиентное заполнение,
представляющее собой плавный переход от одного цвета к другому;

RadialGradientBrush – рисует область, используя радиальное градиентное
заполнение, представляющее собой плавный переход от одного цвета к другому в
радиальном направлении от центральной точки;

ImageBrush – рисует область, используя графическое изображение, которое
может растягиваться, масштабироваться или многократно повторяться;

DrawingBrush – рисует область, используя объекты Drawing, которые могут быть
пользовательскими фигурами или битовыми картами;

VisualBrush – рисует область, используя объекты Visual.

Создадим градиентную заливку созданной страницы. Для
определения градиентной заливки необходимо создать объект
LinearGradientBrush.
Далее необходимо заполнить свойство LinearGradientBrush.GradientStops коллекцией объектов GradientStop. Каждый объект GradientStop имеет
свойства Offset и Color,
значение которых задаются в соответствии с синтаксисом
» свойство — атрибут «. Свойство Offset может
принимать значение от 0 до 1, определяя области
заполнения градиентом от одного цвета к другому.

Далее приведен фрагмент XAML-документа
для определения градиентной заливки страницы.

Добавим в страницу текстовую строку
«Система внутреннего учета инвестиционной компании».

Подключим созданную страницу к
фрейму. Для этого в разметке фрейма необходимо указать источник его заполнения Source, а также определим
свойства Foreground, BorderBrush и
Background.

Главная
страница приложения в дизайнере представлена на Рисунок 10.

Рисунок 10. Главная страница WPF-приложения в
дизайнере

Изменим свойство Title окна класса Window,
присвоив ему значение «Информационная система
ВУ«. Результат компиляции и выполнения WPF-приложения приведен на Рисунок 11.

Рисунок 11. Главная страница WPF-приложения

Контейнером верхнего уровня главной страницы приложения
является StackPanel.
Для данной панели свойству Background,
которое определяет кисть для рисования фоновой области, установлено сложное значение, определяющее градиентную заливку. С учетом того,
что в приложении предполагается использовать аналогичную градиентную кисть и
для других страниц, то целесообразным является сформировать значение
для данной кисти в виде ресурса, разместив его на уровне приложения. Для этого
найдите в Обозревателе решения файл приложения App.xaml и добавьте в него ресурс:

Сформированный ресурс
для градиентной кисти имеет ключ BackgroundWindowResource. Введение в XAML описание приложения ресурса требует провести изменение
свойства Background панели StackPanel,
использую расширения разметки и ссылку на статический ресурс
BackgroundWindowResource.

На странице WPF-приложения можно
размещать элементы пользовательского интерфейса (элементы
управления) для обеспечения взаимодействия пользователя с бизнес-логикой
системы.

3.      
Навигация страничного приложения

Основная страница должна обеспечивать переход на другие
страницы, обеспечивающие интерфейс для отдельных функций и выход
из системы. Для перехода на другие страницы будем использовать гиперссылки.
Гиперссылки позволяют пользователю перемещаться с одной страницы на другую.
Элемент гиперссылки, соответствующий объекту класса Hyperlink, определяется следующей строкой:

<Hyperlink NavigateUri=»PageName.xaml»>Текст Гиперссылки</Hyperlink>

Класс Hyperlink имеет
свойство NavigateUri.
Данное свойство определяет на какую страницу будет переходить приложение при щелчке на соответствующей гиперссылке.
Например, NavigateUri=»Page2.xaml».

В WPF гиперссылки являются не отдельными, а внутристроковыми
потоковыми элементами, которые должны размещаться внутри другого поддерживающего
их элемента. Это можно сделать, например в элементе TextBlock, который для гиперссылки
является контейнером.

На первой странице создадим следующие гиперссылки: Сотрудники, Клиенты,
Договора, Ценные
бумаги, Сделки и Справка. XAML-описание гиперссылки
для страницы Сотрудники приведено ниже.

Остальные гиперссылки
добавьте самостоятельно.

Для реализации функциональности первого окна WPF-приложения
осталось добавить кнопку выхода.

Результат компиляции и выполнения
WPF-приложения приведен на Рисунок 12.

Рисунок 12. Начальная страница WPF-приложения с
гиперссылками

По условию учебного примера будем
постепенно добавлять функциональность приложения в части обработки данных по сотрудникам компании.

Создадим страницу с именем PageEmployee. В качестве основного контейнера будем использовать панель StackPanel. Определим для неё
градиентную заливку, аналогичную начальной странице приложения.

Страница PageEmployee должна
обеспечивать пользователю просмотр данных по сотрудникам, ввод
данных по новому сотруднику, редактирование, поиск и удаление данных. Доступ
пользователя к функциональности системы будем предоставлять через различные меню.

4.      
Проектирование
интерфейса

В WPF можно создать основное
и контекстное меню.
Кроме того, можно создать панель
инструментов с кнопками, которые будут реализовывать функциональность,
аналогичную пунктам меню.

Основное меню создается с помощью класса
Menu, который
представляет Windows элементы управления меню, позволяющие иерархически организовать элементы,
связанные с командами и обработчиками событий. Меню формируют
из объектов MenuItem (имя пункта меню) и Separator (разделитель).
Класс MenuItem имеет свойство Header,
которое определяет текст элемента меню. Данный класс может хранить коллекцию объектов MenuItem, которая соответствует подпунктам
меню. Класс Separator отображает
горизонтальную линию, разделяющую пункты меню.

Добавим в StackPanel страницы PageEmployee XAML- описание меню,
которое на верхнем уровне будет содержать два пункта Действие и Отчет.
Пункт Действие включает
подпункты Отменить, Создать, Редактировать,
Сохранить, Найти и Удалить.
Между пунктами Отменить, Создать и пунктами Найти, Удалить
добавлены разделительные линии.

Запустим приложение
и выберем ссылку Сотрудники на странице PageEmployee. При выборе пункта
меню Действие появляется
выпадающий список и пунктами подменю (Рисунок 13).

Рисунок 13. Главное меню страницы PageEmployee

Панель инструментов представляет
специализированный контейнер для хранения коллекции
элементов, обычно кнопок. Расположим в панели инструментов кнопки,
функциональное назначение которых будет соответствовать подпунктам меню Действие, то
есть Отменить, Создать, Редактировать,
Сохранить, Найти и Удалить.

На лицевой стороне кнопок поместим графическое изображение соответствующего
действия. Для этого добавим в файл проекта папку Images и
в неё включим графические объекты, которые можно найти в стандартной библиотеке
графических объектов Visual Studio (в
файле VS2013 Image Library.zip,
его всегда можно бесплатно скачать с официального сайта Microsoft, для вас архив можно скачать по ссылке: VS2013 Image Library).

После добавления графических файлов в проект они будут
отображены в обозревателе решений (Рисунок 14).

Рисунок 14. Включение в проект папки Images с файлами рисунков

Теперь можно разработать XAML-описание
панели инструментов для страницы PageEmployee.

Для каждой кнопки зададим свойство Name – имя объекта в программе и свойство ToolTip с текстом
всплывающей подсказки при наведении указателя мыши на кнопку.

Свойство Margin определяет внешние отступы для
кнопки. Задание графического объекта для кнопки осуществляется определением для
объекта Image источника Source,
который должен соответствовать полному пути к графическому файлу.

В дизайнере Visual Studio страница
PageEmployee примет вид, приведенный на Рисунок 15. 

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

Рисунок 15. Страниц PageEmployee с панелью инструментов в
дизайнере

<Grid Margin=«5»>

        <!—Линейный градиент относится к кистям (Brush) его  можно применить на любом элементе.—>

        <Grid.RowDefinitions>

            <RowDefinition Height=«Auto»></RowDefinition>

            <RowDefinition Height=«Auto»></RowDefinition>

            <RowDefinition Height=«Auto»></RowDefinition>

            <RowDefinition Height=«Auto»></RowDefinition>

            <RowDefinition Height=«Auto»></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition></ColumnDefinition>

            <ColumnDefinition Width=«Auto»></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Rectangle Width=«150» Height=«100» Margin=«5»>

            <Rectangle.Fill>

                <LinearGradientBrush>

                    <GradientStop Color=«Blue» Offset=«0»/>

                    <GradientStop Color=«White» Offset=«1» />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <TextBlock Grid.Column=«1» VerticalAlignment=«Center» Margin=«5»>Линейный градиент по диагонали</TextBlock>

        <Rectangle Width=«150» Height=«100» Margin=«5» Grid.Row=«1»>

            <Rectangle.Fill>

                <LinearGradientBrush>

                    <GradientStop Color=«Blue» Offset=«0»/>

                    <GradientStop Color=«White» Offset=«0.5» />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <TextBlock Grid.Row=«1» Grid.Column=«1» VerticalAlignment=«Center» Margin=«5»>Значение Offset = 0.5 для белого цвета</TextBlock>

        <Rectangle Width=«150» Height=«100» Grid.Row=«2» Margin=«5»>

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint=«0,0» EndPoint=«0,1» >

                    <GradientStop Color=«Blue» Offset=«0»/>

                    <GradientStop Color=«White» Offset=«1» />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <TextBlock Grid.Row=«2» Grid.Column=«1» VerticalAlignment=«Center» Margin=«5»>Горизонтальный линейный градиент</TextBlock>

        <Rectangle Width=«150» Height=«100» Grid.Row=«3» Margin=«5»>

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint=«0,0» EndPoint=«0,0.5» SpreadMethod=«Reflect»>

                    <GradientStop Color=«Blue» Offset=«0»/>

                    <GradientStop Color=«White» Offset=«1» />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <TextBlock Grid.Row=«3» Grid.Column=«1» VerticalAlignment=«Center» Margin=«5»>Устанавливаем свойство в методе SpreadMethod=«Reflect»</TextBlock>

        <Rectangle Width=«150» Height=«100» Grid.Row=«4» Margin=«5»>

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint=«0,0» EndPoint=«1,1»>

                    <GradientStop Color=«Yellow» Offset=«0.0» />

                    <GradientStop Color=«Red» Offset=«0.25» />

                    <GradientStop Color=«Blue» Offset=«0.75» />

                    <GradientStop Color=«LimeGreen» Offset=«1.0» />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <TextBlock Grid.Row=«4» Grid.Column=«1» VerticalAlignment=«Center» Margin=«5»>Многоцветный градиент</TextBlock>

    </Grid>

LinearGradientBrush

Кисть LinearGradientBrush позволяет создавать смешанное заполнение, которое представляет собой переход от одного цвета к другому.

Рассмотрим пример простейшего градиента. Он заштриховывает прямоугольник по диагонали от синего цвета (в левом верхнем углу) к белому (в правом нижнем углу):

Для создания этого градиента необходимо добавить по одному объекту GradientStop для каждого цвета. Также нужно поместить каждый цвет в градиент, используя значение Offset от 0 до 1.

В этом примере GradientStop для синего цвета имеет смещение 0, а это означает, что он располагается в самом начале градиента. GradientStop для белого цвета имеет смещение 1, что размещает его в конце. Изменяя эти значения, можно управлять плавностью перехода одного цвета в другой.

Например, если установить GradientStop для белого цвета в 0.5. то градиент будет переходить от синего (в левом верхнем углу) к белому цвету в середине прямоугольника (точка между двумя углами). Правая сторона прямоугольника будет полностью белой (второй градиент на рисунке ниже).

Предыдущий код разметки создает градиент с диагональным наполнением, который простирается от одного угла до другого. Однако может понадобиться создать градиент, который распространяется сверху вниз или слева направо, либо же воспользоваться другим диагональным углом. Эти детали управляются свойствами StartPoint и EndPoint класса LinearGradientBrush. Упомянутые свойства позволяют выбирать точку, в которой начинается первый цвет, и изменять точку, в которой переход цвета завершается чистым вторым цветом. (Промежуточная область заполняется плавным переходом одного цвета в другой.)

Однако здесь имеется одна особенность. Координаты, используемые для указания начальной и конечной точек, не являются реальными координатами. Вместо этого LinearGradientBrush назначает точке в левом верхнем углу области, которую нужно заполнить, координату (0,0), а точке в правом нижнем углу — координату (1,1), независимо от реальной высоты и ширины области.

Чтобы создать горизонтальное заполнение сверху вниз, можно указать начальную точку (0,0) левого верхнего угла, а конечную точку — (0,1), представляющую левый нижний угол. Чтобы создать вертикальное заполнение слева направо (без наклона), можно использовать стартовую точку (0,0) и конечную точку (1,0). На рисунке ниже горизонтальный градиент — третий сверху.

Есть возможность схитрить, указав начальную и конечную точки так, чтобы они не были выровнены по углам градиента. Например, можно протянуть градиент от (0, 0) до (0, 0.5) — точки на середине левой стороны, на полпути вниз. Это создаст сжатый линейный градиент — один цвет начнется вверху, переходя во второй цвет на середине прямоугольника. Нижняя половина фигуры будет заполнена вторым цветом. Однако это поведение можно изменить с помощью свойства LinearGradientBrush.SpreadMethod. По умолчанию оно имеет значение Pad (означающее, что области вне градиента заполняются соответствующим сплошным цветом), но допускается присвоить этому свойству значение Reflect (для обращения градиента — переходом от второго цвета обратно к первому) или же Repeat (для дублирования той же цветовой последовательности). На рисунке эффект Reflect показан в четвертом сверху градиенте.

LinearGradientBrush также позволяет создавать градиенты с более чем двумя цветами, добавляя более двух объектов GradientStop. Ниже представлен общий пример иллюстрирующий все вышесказанное:

Кисть LinearGradientBrush может быть указана в любом месте, где используется SolidColorBrush — например, для заполнения фоновой поверхности элемента (через свойство Background), фонового цвета текста (используя свойство Foreground) или для заполнения границы (с помощью свойства BorderBrush). На рисунке показан пример заполненного градиентом элемента TextBlock:

Источник

Xamarin.Forms Кисти: линейные градиенты Xamarin.Forms Brushes: Linear gradients

LinearGradientBrush Класс является производным от GradientBrush класса и закрашивает область линейным градиентом, который смешивает два или более цвета вдоль линии, известной как ось градиента. The LinearGradientBrush class derives from the GradientBrush class, and paints an area with a linear gradient, which blends two or more colors along a line known as the gradient axis. GradientStop объекты используются для указания цветов в градиенте и их позиций. GradientStop objects are used to specify the colors in the gradient and their positions. Дополнительные сведения об GradientStop объектах см. в разделе Xamarin.Forms кисти: градиенты. For more information about GradientStop objects, see Xamarin.Forms Brushes: Gradients.

Класс LinearGradientBrush определяет следующие свойства: The LinearGradientBrush class defines the following properties:

Линейные градиенты также можно создавать с помощью linear-gradient() функции CSS. Linear gradients can also be created with the linear-gradient() CSS function.

Создание LinearGradientBrush Create a LinearGradientBrush

StartPoint Свойства и EndPoint задаются относительно закрашиваемой области. The StartPoint and EndPoint properties are relative to the area being painted. (0, 0) представляет верхний левый угол закрашиваемой области, а (1, 1) — нижний правый угол закрашиваемой области. (0,0) represents the top-left corner of the area being painted, and (1,1) represents the bottom-right corner of the area being painted. На следующей диаграмме показана ось градиента для кисти по диагонали линейного градиента. The following diagram shows the gradient axis for a diagonal linear gradient brush:

На этой схеме пунктирная линия показывает ось градиента, которая выделяет путь интерполяции градиента от начальной точки к конечной точке. In this diagram, the dashed line shows the gradient axis, which highlights the interpolation path of the gradient from the start point to the end point.

Создание горизонтального линейного градиента Create a horizontal linear gradient

Чтобы создать горизонтальный линейный градиент, создайте LinearGradientBrush объект и установите его StartPoint в значение (0, 0) и задайте значение EndPoint (1, 0). To create a horizontal linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (1,0). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции. Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

Создание вертикального линейного градиента Create a vertical linear gradient

Чтобы создать Вертикальный линейный градиент, создайте LinearGradientBrush объект и задайте для его свойства StartPoint значение (0, 0) и значение EndPoint (0, 1). To create a vertical linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (0,1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции. Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

Создание диагонального линейного градиента Create a diagonal linear gradient

Чтобы создать диагональный линейный градиент, создайте LinearGradientBrush объект и задайте для него значение StartPoint (0, 0), а в качестве значения EndPoint (1, 1). To create a diagonal linear gradient, create a LinearGradientBrush object and set its StartPoint to (0,0) and its EndPoint to (1,1). Затем добавьте в коллекцию два или более GradientStop объектов, LinearGradientBrush.GradientStops которые определяют цвета градиента и их позиции. Then, add two or more GradientStop objects to the LinearGradientBrush.GradientStops collection, that specify the colors in the gradient and their positions.

Источник

Разработка корпоративных приложений на базе WPF

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

1. Создание приложения

Как правило, корпоративное приложение представляет собой программу, реализующую определенную бизнес-задачу (бизнес-функцию). Приложение должно взаимодействовать с данными, которые располагаются в базе данных информационной системы. Архитектура приложения обычно включает слой представления, бизнес-логики и данных. Функциональность каждого слоя приложения во многом определяется предметной областью информационной системы, но имеются и общие, основополагающие функции, которые присущи практически любому корпоративному приложению. Так в приложении необходимо разработать слой представления, который обеспечит интерфейс пользователя с системой. Интерфейс может быть создан с использованием Windows окон и страниц WPF, которые наполняются различными визуальными элементами контроля. Элементы контроля должны поддерживать визуальное представление функциональности системы для пользователя, проводить верификацию вводимых данных и взаимодействовать с бизнес-классами. Слой бизнес-логики приложения должен обеспечивать основную функциональность приложения: формировать бизнес-классы, реализовывать алгоритмы обработки данных, обеспечивать соединение с данными и их кэширование. Реализация данного слоя приложения может быть построена на базе классов, реализующих бизнес-логику, методами классов интерфейсных элементов или методами классов модели данных. Слой данных должен обеспечить взаимодействие приложения с данными системы управления базами данных. В корпоративных приложениях для этого наиболее целесообразно использовать платформу ADO.NET Entity Framework и модель EDM (Entity Data Model). Модель EDM описывает структуру данных независимо от формы хранения.

Для изучения вопросов проектирования корпоративных приложений рассмотрим основные подходы при разработке отдельной функции информационной системы, которая обеспечивает обработку данных по сотрудникам компании. Для учебного примера используется база данных TitlePersonal с небольшим набором таблиц и полей, а функциональность приложения предполагает обеспечение ввода, корректировки и удаление данных о сотрудниках компании. Разрабатываемое приложение должно обеспечивать хранение и обработку следующих данных по сотрудникам компании: фамилия; имя; отчество; должность; дата рождения; телефон; адрес электронной почты.

1. просмотр данных по сотрудникам;

2. ввод данных по новому сотруднику;

3. редактирование данных по сотруднику;

4. удаление данных по сотруднику;

5. поиск данных по сотруднику.

После нажатия кнопки «ОК» будет сформирован шаблон проекта. При этом инструментальная система сгенерирует следующий XAML-документ:

Window x : Class =»Wpf_Erina.MainWindow»
xmlns =»http://schemas.microsoft.com/winfx/2006/xaml/presentation»
xmlns : x =»http://schemas.microsoft.com/winfx/2006/xaml»
Title =»MainWindow» Height =»350″ Width =»525″>
Grid >

Grid >
Window >

Дизайнер проекта приведен на Рисунок 2.

x : Class =»Wpf_Erina.MainWindow»

два пространства имен

Title =»MainWindow» Height =»350″ Width =»525″

Метод InitializeComponent() генерируется во время компиляции приложения и в исходном коде не присутствует.

2. Формирование начальной страницы приложения

В последнее время разработчики корпоративных приложений начали осознавать преимущества технологий веб-дизайна, которые базируются на качественном дизайне, четком и понятном интерфейсе. Технология WPF позволяет создавать страничную модель (приложения), с готовыми средствами навигации. Как правило, для каждой страницы приложения создается файл XAML и файл отдельного кода, например на языке C#. При компиляции такого приложения компилятор создает производный класс страницы, который объединяет написанный код с генерируемыми автоматически связующими элементами.

Страницы можно размещать внутри окон и внутри других страниц. В WPF при создании страничных приложений контейнером наивысшего уровня могут быть следующие объекты:

Для вставки страницы внутрь окна будем использовать класс Frame (Рисунок 4). Автоматически будет сгенерирован экземпляр класса Frame с фиксированными границами (Рисунок 5).

В XAML-документ проекта будет добавлена следующая строка:

Frame Content =»Frame» HorizontalAlignment =»Left» Height =»100″ Margin =»144,95,0,0″ VerticalAlignment =»Top» Width =»100″/>

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

Frame Name =» frame 1″ Margin =»3″ />

В результате фрейм заполнит всё окно (Рисунок 6):

Класс Page имеет следующие свойства:

Background – принимает кисть, которая устанавливает заливку для фона;

Content – принимает один элемент, который отображается на странице. Обычно в роли такого элемента выступает контейнер макета (элемент Grid или StackPanel );

KeepAlive – определяет, должен ли объект страницы оставаться действующим после перехода пользователя на другую страницу;

ShowsNavigationUI – определяет, должны ли в обслуживающем данную страницу хосте отображаться навигационные элементы управления;

Title – устанавливает имя, которое должно применяться для страницы в хронологии навигации;

Window Title – устанавливает заголовок окна, который отображается в строке заголовка.

В окне Добавления нового элемента необходимо выбрать шаблон «Страница (WPF)» (1) и задать имя страницы PageMain (2 на Рисунок 8).

В дизайнере проекта сгенерируется страница PageMain.xaml (Рисунок 9).

Классы кистей наследуются от класса System.Windows.Media.Brush и обеспечивают различные эффекты при заполнении фона, переднего плана или границ элементов. Некоторые классы кистей приведены ниже:

LineaGradientBrush – рисует область, используя линейное градиентное заполнение, представляющее собой плавный переход от одного цвета к другому;

RadialGradientBrush – рисует область, используя радиальное градиентное заполнение, представляющее собой плавный переход от одного цвета к другому в радиальном направлении от центральной точки;

ImageBrush – рисует область, используя графическое изображение, которое может растягиваться, масштабироваться или многократно повторяться;

Далее приведен фрагмент XAML-документа для определения градиентной заливки страницы.

Добавим в страницу текстовую строку «Система внутреннего учета инвестиционной компании».

Главная страница приложения в дизайнере представлена на Рисунок 10.

На странице WPF-приложения можно размещать элементы пользовательского интерфейса ( элементы управления) для обеспечения взаимодействия пользователя с бизнес-логикой системы.

3. Навигация страничного приложения

Hyperlink NavigateUri =»PageName.xaml»> Текст Гиперссылки Hyperlink >

Остальные гиперссылки добавьте самостоятельно.

Для реализации функциональности первого окна WPF-приложения осталось добавить кнопку выхода.

Результат компиляции и выполнения WPF-приложения приведен на Рисунок 12.

По условию учебного примера будем постепенно добавлять функциональность приложения в части обработки данных по сотрудникам компании.

4. Проектирование интерфейса

В WPF можно создать основное и контекстное меню. Кроме того, можно создать панель инструментов с кнопками, которые будут реализовывать функциональность, аналогичную пунктам меню.

После добавления графических файлов в проект они будут отображены в обозревателе решений (Рисунок 14).

Для каждой кнопки зададим свойство Name – имя объекта в программе и свойство ToolTip с текстом всплывающей подсказки при наведении указателя мыши на кнопку.

В дизайнере Visual Studio страница PageEmployee примет вид, приведенный на Рисунок 15.

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

В учебном примере будем использовать элемент контроля DataGrid для табличного отображения данных о сотрудниках. В качестве заголовка таблицы применим текстовый блок » Список сотрудников «.

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

DataGridTextColumn – для отображения в ячейках столбцов текстового содержимого;

DataGridCheckBoxColomn – для отображения в ячейках столбцов логических данных;

DataGridComboBoxColomn – для отображения в ячейках столбцов данных, когда имеется набор элементов для выбора;

DataGrid поддерживает множество способов настройки отображения данных. В Таблица 1 приведен список стандартных сценариев.

Таблица 1. Сценарии настройки отображения данных

Переменные цвета фона

Определение поведения при выборе ячейки и строки

Настройка внешнего вида заголовков, ячеек и строк

Доступ к выбранным элементам

Настройка взаимодействия с пользователем

Отмена или изменение автоматически созданных столбцов

Задайте для свойства FrozenColumnCount значение 1 и переместите столбец в крайнюю левую позицию, задав для свойства DisplayIndex значение 0.

В качестве источника данных используются данные XML.

XAML-документ описания интерфейсных элементов страницы PageEmployee имеет следующий вид.

С учетом добавленных интерфейсных элементов страница PageEmployee в дизайнере примет вид, приведенный на Рисунок 17.

После запуска приложения страница PageEmployee будет иметь вид, приведенный на Рисунок 18.

На данном этапе проектирования приложения на странице PageEmployee размещены все необходимые элементы контроля.

5. Разработка бизнес-логики

xmlns : command =»clr-namespace:Wpf_Erina.Commands»

Для класса CommandBinding свойство Command определяет ссылку на соответствующую команду, а свойства Executed и CanExecute задают обработчики событий при выполнении команды.

· первоначальная загрузка страницы (1);

· просмотр данных по всем сотрудникам (2);

· редактирование данных по отдельному сотруднику (3);

· создание новой записи по сотруднику в базе данных (4).

На Рисунок 19 приведена диаграмма состояний приложения, на которой кружками обозначены состояния, а дуги соответствуют переходам при выполнении определенной команды.

На основе диаграммы состояний построим таблицу доступности команд в различных состояниях (Таблица 2).

Таблица 2. Доступность команд в различных состояниях приложения

Источник

Заливка фигур с помощью градиентной кисти Using a Gradient Brush to Fill Shapes

Можно использовать градиентную кисть для заливки фигуры с постепенно изменяющимся цветом. You can use a gradient brush to fill a shape with a gradually changing color. Например, можно использовать горизонтальный градиент для заливки фигуры цветом, который изменяется постепенно по мере перемещения от левого края фигуры к правому краю. For example, you can use a horizontal gradient to fill a shape with color that changes gradually as you move from the left edge of the shape to the right edge. Представьте себе прямоугольник с левым ребром, который является черным (представлен красным, зеленым и синим компонентами 0, 0, 0) и правой границей красного цвета (представленной в 255, 0, 0). Imagine a rectangle with a left edge that is black (represented by red, green, and blue components 0, 0, 0) and a right edge that is red (represented by 255, 0, 0). Если размер прямоугольника составляет 256 пикселей, красный компонент данного пикселя будет на единицу больше, чем красный компонент пикселя слева. If the rectangle is 256 pixels wide, the red component of a given pixel will be one greater than the red component of the pixel to its left. В крайнем левом пикселе строки есть компоненты цвета (0, 0, 0), второй пиксель имеет (1, 0, 0), третий пиксель имеет (2, 0, 0) и т. д., пока не будет получен самый правый пиксель, имеющий компоненты цвета (255, 0, 0). The leftmost pixel in a row has color components (0, 0, 0), the second pixel has (1, 0, 0), the third pixel has (2, 0, 0), and so on, until you get to the rightmost pixel, which has color components (255, 0, 0). Эти интерполяции цветовых значений составляют градиент цвета. These interpolated color values make up the color gradient.

Линейный градиент меняет цвет при перемещении по горизонтали, по вертикали или параллельно на указанную наклонную линию. A linear gradient changes color as you move horizontally, vertically, or parallel to a specified slanted line. Цвет градиента контура изменяется при перемещении по внутреннему и границе пути. A path gradient changes color as you move about the interior and boundary of a path. Можно настроить градиенты вдоль пути для достижения широкого спектра эффектов. You can customize path gradients to achieve a wide variety of effects.

На следующем рисунке показан прямоугольник, заполненный линейной градиентной кистью, и эллипс, заполненный с помощью кисти градиента вдоль пути: The following illustration shows a rectangle filled with a linear gradient brush and an ellipse filled with a path gradient brush:

в этом разделе In This Section

Практическое руководство. Создание линейного градиента How to: Create a Linear Gradient
Показывает, как создать линейный градиент с помощью LinearGradientBrush класса. Shows how to create a linear gradient using the LinearGradientBrush class.

Практическое руководство. Создание градиента вдоль контура How to: Create a Path Gradient
Описывает создание градиента контура с помощью PathGradientBrush класса. Describes how to create a path gradient using the PathGradientBrush class.

Практическое руководство. Применение гамма-коррекции к градиенту How to: Apply Gamma Correction to a Gradient
Объясняется, как использовать гамма-коррекцию с градиентной кистью. Explains how to use gamma correction with a gradient brush.

Источник

Видео

I’ve got a MainResources.xaml file in which I have a style that defines how each of my windows in my application look:

  <Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
    <Setter Property="Background" Value="WhiteSmoke" />
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="5" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
  </Style>

Instead of «WhiteSmoke» I want my background to be this gradient:

    <LinearGradientBrush>
        <GradientStop Color="#ccc" Offset="0"/>
        <GradientStop Color="#bbb" Offset="1"/>
    </LinearGradientBrush>

But the following attempt causes VS2008 to tell me «Style setters do not support child elements»:

<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
    <Setter Property="Background">
        <LinearGradientBrush>
            <GradientStop Color="#ccc" Offset="0"/>
            <GradientStop Color="#bbb" Offset="1"/>
        </LinearGradientBrush>
    </Setter>
    <Setter Property="BorderBrush" Value="LightGray" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="CornerRadius" Value="5" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
</Style>

What is the correct way to put a gradient color as the background for this style?

Содержание

1. Как закрасить область с линейным градиентом
2. Пример
3. Xamarin.Forms Кисти: линейные градиенты
4. Создание LinearGradientBrush
5. Создание горизонтального линейного градиента
6. Создание вертикального линейного градиента
7. Создание диагонального линейного градиента
8. Разработка корпоративных приложений на базе WPF
9. 1. Создание приложения
10. 2. Формирование начальной страницы приложения
11. 3. Навигация страничного приложения
12. 4. Проектирование интерфейса
13. 5. Разработка бизнес-логики
14. LinearGradientBrush
15. Общие сведения о закраске сплошным цветом и градиентом
16. Закрашивание области сплошным цветом
17. Использование SolidColorBrush в XAML
18. Закрашивание с использованием SolidColorBrush в коде
19. Закрашивание области с помощью градиента
20. Линейные градиенты
21. Ось градиента
22. Радиальные градиенты
23. Задание прозрачных и частично прозрачных ограничений градиента
24. Задание непрозрачности цвета в XAML
25. Задание непрозрачности цвета в коде
26. Закрашивание с помощью объектов Image, Drawing, Visual и Pattern