В xaml коде для элемента windows определите линейную градиентную заливку фона
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.