wpf создание меню в коде

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

Все меню конструируются из объектов 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 для начала.

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

Источник

Русские Блоги

.NET CORE (C #) Простое меню WPF Привязка MVVM

.NET CORE (C #) Простое меню WPF Привязка MVVM

Чтение навигации

1. История

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

2. Реализация кода

Библиотека управления MaterialDesign

Структура каталогов решения:

2.1 Введение в стиль управления MD

Файл [App.xaml], установите начальный вид [Views / MainView.xaml] в StartupUri и добавьте 4 файла стилей элемента управления MD в узел [Application.Resources]

2.2 Models

Два простых класса сущностей меню:

2.2.1 Меню информации о новом файле

Файл [ItemCount.cs] определяет количество новых файлов, отображаемых в правой части пункта меню, и цвет фона дисплея:

2.2.2 Информация о пункте меню

Файл [MenuItem.cs] определяет имя, изображение и информацию о новом файле, отображаемую в пункте меню:

Среди них значок пункта меню использует библиотеку значков шрифтов, которая поставляется с элементом управления MD, который можно легко использовать с помощью перечисления [PackIconKind]. Значок шрифта, предоставляемый библиотекой, очень богат, в настоящее время их 4836 (значение перечисления 7883),
Вот несколько последних:

2.3 ViewModels

Файл [MainViewModel.cs] определяет только несколько простых атрибутов: логотип отображения формы, список привязки меню. Определение атрибута относительно простое, поскольку представление MainView.xaml не отображает много содержимого:

2.4 Views

Файл [MainView.xaml.cs] служит серверной частью представления [MainView.xaml], связывает ViewModel и реализует функцию перетаскивания формы с помощью левой кнопки мыши:

3. Эта статья ссылается на

4. Исходный код

Все коды в статье приведены. В изображениях используется внешняя ссылка на веб-сайте веб-мастеров. Вы можете напрямую скопировать код и организовать файлы кода в соответствии с каталогом решения для запуска. Исходное видео автора и исходный код прилагаются. См. [3. Ссылка на эту статью].

Если не указано иное, статьиDotnet9 Организуйте и опубликуйте, добро пожаловать на перепечатку.

Укажите адрес статьи для перепечатки: https://dotnet9.com/7339.html

Добро пожаловать, чтобы отсканировать QR-код ниже, чтобы подписаться на официальный аккаунт Dotnet9 в WeChat, этот сайт будет своевременно публиковать последние технические статьи

Интеллектуальная рекомендация

Использование эффекта значка анимации в формате svga в проекте vue

Android-ToggleButton

Используйте Google Web Toolkit, Apache Derby и Eclipse для создания приложения AJAX, часть 1: Front Dream:

GWT позволяет легко построить богатые клиентские интерфейсы браузера Ajax, чем построить традиционный интерфейс Java GUI. Однако даже отличные технологии, такие как GWT, не могут быть построены отдель.

Webpack использует понимание

*установка Введите свой проект, установите webpack в зависимости проекта, чтобы вы могли использовать локальную версию webpack проекта. npm install [email protected] (этот формат предназначен д.

Источник

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

Источник