как сделать меню в wpf

Как сделать меню в wpf

В WPF предлагаются два элемента управления меню: Menu (для главных меню) и ContextMenu (для всплывающих меню, присоединяемых к другим элементам). Как и для всех остальных классов, WPF выполняет визуализацию для элементов управления Menu и ContextMenu. Это означает, что упомянутые элементы управления не являются простыми оболочками Win32 и могут использоваться несколькими необычными способами.

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

Класс Menu

В WPF не делается никаких предположений по поводу того, где должно размещаться автономное меню. Обычно оно пристыковывается в верхней части окна с помощью элемента управления DockPanel или верхней строки элемента управления Grid либо просто растягивается по всей ширине окна. Однако на самом деле меню можно размещать где угодно, даже рядом с другими элементами управления. Более того, в окно можно добавлять столько меню, сколько нужно. Хотя особого смысла в этом и нет, но также существует возможность размещать строки меню стопками и вразброс по всему пользовательскому интерфейсу.

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

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

Источник

Элементы меню

Все меню конструируются из объектов MenuItem и Separator. Класс MenuItem унаследован от HeaderedltemsControl, поскольку каждый элемент меню имеет заголовок (в котором содержится предназначенный для него текст) и может умещать в себе коллекцию объектов MenuItem (с помощью которой представляется подменю). Класс Separator просто отображает горизонтальную линию для разделения элементов меню.

Ниже приведена простая комбинация объектов MenuItem, которые создают элементарную структуру меню, показанную на рисунке:

WPF позволяет нарушать многие из привычных правил структуризации меню. Например, внутри Menu или MenuItem допускается размещать объекты, отличные от MenuItem. Это дает возможность создавать меню, содержащие обычные элементы WPF, начиная от Checkbox и заканчивая DocumentViewer. По ряду причин размещение в меню объектов, отличных от MenuItem, практически всегда является плохой идеей, поскольку приводит к появлению нескольких необычных проблем, которые нужно отслеживать и исправлять. Например, элемент TextBox в MenuItem будет утрачивать фокус сразу же после перемещения мыши за пределы этого MenuItem.

Если же действительно необходимо создать пользовательский интерфейс, включающий нечто вроде раскрывающихся меню с элементами управления, лучше рассмотреть вариант использования другого элемента (например, Expander) и его стилизации в соответствии с имеющимися потребностями. Элементы управления Menu и MenuItems стоит применять только тогда, когда действительно требуется поведение, свойственное меню — другими словами, когда необходима группа активизируемых щелчком команд.

Если нужно, чтобы подменю после открытия оставались видимыми до тех пора, пока пользователь не щелкнет в каком-нибудь другом месте, установите свойство StaysOpenOnClick в true.

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

Для реагирования на щелчок на элементе MenuItem можно использовать событие MenuItem.Click. Можно обеспечить его обработку для отдельных элементов, а можно просто присоединить к корневому дескриптору Menu соответствующий обработчик таких событий. Другой вариант — с помощью свойств Command, CommandParameter и CommandTarget соединить MenuItem с объектом Command, как это делалось для кнопок.

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

Помимо текстового содержимого (которое предоставляется через свойство Header), объекты MenuItem могут в действительности отображать еще несколько перечисленных ниже деталей:

миниатюрный значок в области поля сразу же слева от команды меню;

флажок в области поля (в случае указания сразу флажка и значка отображаться будет только флажок);

текст сокращенной клавиатурной команды справа от текста меню (например, текст Ctrl+O для команды Open (Открыть)).

В указании всех этих деталей нет ничего сложного. Для отображения миниатюрного значка необходимо установить свойство MenuItem.Icon. Интересно то, что свойство Icon способно принимать любой объект, что позволяет создавать для отображения даже миниатюрный векторный рисунок. Это дает возможность в полной мере воспользоваться преимуществами не зависящей от разрешения системы масштабирования WPF и отобразить больше деталей при более высоких настройках DPI системы. При желании иметь обычный значок, должен использоваться просто элемент Image с растровым изображением.

Для отображения рядом с элементом меню флажка понадобится установить свойство MenuItem.IsChecked в true. Вдобавок, если IsCheckable равно true, щелчок на данном элементе меню будет переводить его из отмеченного в неотмеченное состояние и наоборот. Однако способа организации группы элементов меню с взаимно исключающей отметкой не существует. Если необходим именно такой эффект, придется писать специальный код, снимающий отметки с других флажков при установке флажка рядом с элементом.

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

Например, следующий элемент MenuItem связывается с командой ApplicationsCommands.Open:

Доступно также несколько полезных свойств, которые позволяют узнать текущее состояние MenuItem: IsChecked, IsHighlighted, IsPressed и IsSubmenuOpen. Их можно использовать для написания триггеров, применяющих различные стили в ответ на определенные действия.

Класс ContextMenu

Как и Menu, класс ContextMenu содержит коллекцию объектов MenuItem. Разница состоит лишь в том, что ContextMenu не может размещаться в окне. Вместо этого он может использоваться только для установки свойства ContextMenu другого элемента:

Свойство ContextMenu определено в классе FrameworkElement, поэтому оно поддерживается практически всеми элементами WPF. В случае, когда это свойство установлено для элемента, у которого имеется собственное контекстное меню, стандартное меню заменяется тем, что указано в этом свойстве. Если просто нужно удалить существующее меню, установите ContextMenu в null.

Источник

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

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

нам нравится внешний вид и ощущение, что веб-приложения Microsoft в настоящее время обладают:

мы могли бы создать эти меню в WPF обычным способом:

но мы получим что-то, что выглядит как меню Winforms.

Я видел некоторые довольно впечатляющие усилия по стилизации, как этот, но все они, похоже, имеют одинаковую знакомую форму Winforms. Я также видел меню в библиотеках, таких как Mahapps Metro, но они кажутся нам слишком спартанскими.

является ли элемент управления меню WPF достаточно гибким, чтобы быть стилизованным, как показано на рисунке выше, или мы должны пойти другим путем, как создание пользовательского элемента управления меню из панелей стека и списков? Каковы компромиссы?

бонусные баллы (т. е. баунти) будут начислены за xaml / код, который делает именно это.

пример этого стиля меню в действии:
https://www.visualstudio.com/

5 ответов

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

вот результат и, как вы видите, он выглядит очень похожим:

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

вы, вероятно, ищете какую-то тему Wpf для начала.

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

Источник

Разработка корпоративных приложений на базе 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. Доступность команд в различных состояниях приложения

Источник