ContextMenu и пользовательские UserControl в WPF: MenuItem, привязка карточек через xmlns и DataContext

Контекстное меню #

Мы часто видим, и даже иногда используем дополнительное меню, которое открывается по нажатию ПКМ. Такое меню (которое называется контекстным) мы можем создавать самостоятельно.

Контекстное меню привязывается к какому-либо объекту, т.е. у разных элементов управления могут быть разные контекстные меню. Создам, например, текстовое поле и сделаю для него контекстное меню.

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

1
<TextBox x:Name="Txt" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="10">
2
    <TextBox.ContextMenu>
3

4
    </TextBox.ContextMenu>
5
</TextBox>

Уже внутри начну реализовывать отдельный тэг — ContextMenu. Состоит он из MenuItem, который, по сути, является точно такой же кнопкой с кликом или командой. Также внутри можно ставить сепараторы — линеечки для разграничения кнопок.

1
<TextBox.ContextMenu>
2
    <ContextMenu>
3
        <MenuItem Header="Элемент 1"/>
4
        <MenuItem Header="Элемент 2"/>
5
        <MenuItem Header="Элемент 3"/>
6
        <Separator/>
7
        <MenuItem Header="Элемент 4"/>
8
        <MenuItem Header="Элемент 5"/>
9
    </ContextMenu>
10
</TextBox.ContextMenu>

При таком контекстном меню, ПКМ по объекту будет выглядеть так.

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

1
<ContextMenu>
2
    <RadioButton Content="Это контекстное меню"/>
3
    <TextBox Text="Тут можно тыкать"/>
4
    <MenuItem Header="Элемент 3"/>
5
    <Separator/>
6
    <MenuItem Header="Элемент 4"/>
7
    <MenuItem Header="Элемент 5"/>
8
</ContextMenu>

Каждому из этих объектов можно дать имя и взаимодействовать с ним. Это все ещё кнопки, которые могут иметь какое-то действие. Например, выведу в MessageBox значение из текстового поля, если я выбрала такой пункт внутри контекстного меню.

1
private void MenuItem_Click(object sender, RoutedEventArgs e)
2
{
3
    MessageBox.Show(Txt.Text);
4
}

Результат будет следующим.

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

1
<ContextMenu>
2
    <MenuItem Header="Вывести в MessageBox" Click="MenuItem_Click">
3
        <MenuItem Header="Элемент 1"/>
4
        <MenuItem Header="Элемент 2"/>
5
        <Separator/>
6
        <MenuItem Header="Элемент 3"/>
7
    </MenuItem>
8
</ContextMenu>

Пользовательские элементы управления #

Если мы хотим разнообразить интерфейс более интересными и проработанными элементами, мы можем создать свои элементы управления, а затем добавлять их в интерфейс.

Как вообще понять, что в интерфейсе есть карточка? Очень просто — если мы видим какой-то элемент, который часто повторяется, и состоит из нескольких объектов (картинка, текст, описание, ссылка, бла-бла-бла) — это карточка.

И вместо того, чтобы постоянно делать грид с картинкой, текстом и прочим, можно просто создать один элемент и не морочиться с Ctrl + C, Ctrl + V.

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

Создание UserControl #

Для начала создадим элемент управления через ПКМ по проекту → Добавить → Пользовательский элемент управления (WPF).

В появившемся окне назовем наш объект и добавим его в проект.

Как и в случае со страницами, пользовательские элементы управления не имеют фона (чтобы они смогли подстроится под фон основного окна) и первый тэг называется UserControl. Всё остальное полностью идентично — вся логика для этого элемента также находится в xaml.cs, все элементы интерфейса, сетки и картинки остались прежними.

Рассмотрим ещё раз наш пример элемента управления.

Всё, что мы здесь видим — картинка с человеком и текст, в который вписано ФИО. Скачаем картинку из интернета с таким человечком, и начнем создавать интерфейс элемента.

• Grid.ColumnDefinition — разделим сетку на 2 столбца: для картинки и для текста.
• Width="4*" — второй столбец в 4 раза больше чем первый.
• Image — расположим картинку в первой колонке. Дадим ей имя UserImage.
• TextBlock — расположим текст во второй колонке. Дадим ей текст-заглушку «Фамилия Имя Отчество» и дадим имя UserName.
• Уменьшим высоту самого окна под желаемую.

Отображение карточек через код #

Модель нашего элемента мы создали, осталось отобразить их в виде списка. Вернемся в главное окно (MainWindow) и создадим ListBox для отображения списка. Дадим ему название UserList.

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

Чтобы создать наш пользовательский элемент прямо из кода, мы возьмем его название — UserView — и будем относится к нему как к сложному типу данных. Сложные типы данных создаются по принципу типданных название = new типданных, так что и свой элемент я создам как UserView first = new UserView();.

Создадим три таких элемента и запишем их в коллекцию. Эту коллекцию укажем как источник элементов для ListBox через название.свойство (UserList.ItemsSource).

И после запуска мы сразу увидим подобный интерфейс, как на примере.

Вся остальная работа со списком остаётся прежней:

• Все элементы находятся в ListBox. Если мы хотим обработать изменение выбора, используем событие SelectionChanged. Выбранный элемент — SelectedItem. С помощью них я смогу взять данные из выбранного элемента управления.
• Если мне нужно обработать кнопки внутри элемента управления, я буду работать с ним в файле элемента управления (в данном случае — в UserView).

Так, например, если я хочу взять информацию из выбранного в листбоксе объекта, я возьму его при помощи SelectedItem as <вставьте название вашей карточки>, а потом из элементов внутри карточки я буду брать значения.

Например, вот так я возьму имя у выбранной карточки и выведу её в MessageBox.

1
private void UserList_SelectionChanged(object sender, SelectionChangedEventArgs e)
2
{
3
    var name = (UserList.SelectedItem as UserView).UserName.Text;
4
    MessageBox.Show(name);
5
}

Использование карточек внутри окна через XAML #

Но всё это — создание и работа с карточками через код. Да, выделить по-другому, кроме как через код, элемент нельзя, но зато можно создавать его через интерфейс. Давайте попробуем.

Удалю созданные карточки из кода и перейду в XAML. Чтобы создать карточки внутри списка, мне необходимо его открыть и вместо обычных тэгов (типа Button) ввести туда тэг с названием моей карточки — UserView.

Если карточка находится в корне проекта, Visual Studio сама предложит как правильно написать этот тэг.

1
<ListBox x:Name="UserList">
2
    <local:UserView/>
3
</ListBox>

Но если карточка находится, например, в папке…

…то тогда сначала надо добавить ссылку на эту папку, а потом уже писать тэг-карточку. Ссылки добавляются при помощи xmlns:любоеимя="ссылка". Вместо ссылки можете просто имя папки написать, Visual Studio разберется как правильно писать.

1
xmlns:cardsssssssssssss="clr-namespace:тестыWPFFramework.cards"

1
<ListBox x:Name="UserList" SelectionChanged="UserList_SelectionChanged">
2
    <cardsssssssssssss:UserView/>
3
    <cardsssssssssssss:UserView/>
4
    <cardsssssssssssss:UserView/>
5
</ListBox>

(Если у вас вместо отображения карточки появляется ошибка, просто нажмите Ctrl+B, или вверху, где файл/правка/вид, нажмите на «Сборка» → «Собрать решение».)

Хорошо, создавать мы их теперь можем в неограниченном количестве. Но они все выглядят не так, как мы хотим — нет картинки (это ок, запустите — появится), вместо нормальных имен стоит та заглушка — Фамилия Имя Отчество. Как поставить нормальные значения из XAML?

Привязки для свойств карточки #

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

Привязки будут простыми. Из сложного — карточке нужно сказать, что её контекст данных — она сама. Перейдем в код UserView и напишем 1 строчку.

1
public partial class UserView : UserControl
2
{
3
    public UserView()
4
    {
5
        InitializeComponent();
6
        DataContext = this;
7
    }
8
}

Затем, чтобы сделать свойства, которые можно будет менять в XAML, нужно создать переменную. Хочу создать свойство для текста карточки — создам стринговую переменную FIO, обязательно с get/set.

1
public partial class UserView : UserControl
2
{
3
    public string FIO { get; set; }
4

5
    public UserView()
6
    {
7
        InitializeComponent();
8
        DataContext = this;
9
    }
10
}

К нему привяжу свойство текста в карточке — вместо «Фамилия Имя Отчество».

1
<TextBlock x:Name="UserName" Text="Фамилия Имя Отчество"/>

1
<TextBlock x:Name="UserName" Text="{Binding FIO}"/>

Пересоберу проект при помощи Ctrl+B или Сборка → Собрать решение, и теперь я смогу изменять это FIO в окне, используя свойство FIO.

1
<ListBox x:Name="UserList" SelectionChanged="UserList_SelectionChanged">
2
    <cardsssssssssssss:UserView FIO="фамилия фамилия фамилия"/>
3
    <cardsssssssssssss:UserView FIO="иванов иван иванович"/>
4
    <cardsssssssssssss:UserView FIO="жаров жар жарович"/>
5
</ListBox>

Это свойство также будет отображаться через интерфейс — в вкладке «Разное».

Если в интерфейсе что-то не отображается — опять пересоберите проект. А так — всё супер.

Полный код примера #

UserView.xaml (в папке cards) — карточка с картинкой и привязкой FIO:

1
<UserControl x:Class="тестыWPFFramework.cards.UserView"
2
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
             Height="112" d:DesignWidth="800">
5
    <Grid>
6
        <Grid.ColumnDefinitions>
7
            <ColumnDefinition/>
8
            <ColumnDefinition Width="4*"/>
9
        </Grid.ColumnDefinitions>
10
        <Image Source="/Images/User.png" x:Name="UserImage"/>
11
        <TextBlock x:Name="UserName" FontSize="20" Grid.Column="1"
12
                   VerticalAlignment="Center" Margin="20"
13
                   Text="{Binding FIO}"/>
14
    </Grid>
15
</UserControl>

UserView.xaml.cs — DataContext = this и публичное свойство FIO:

1
using System.Windows.Controls;
2

3
namespace тестыWPFFramework.cards
4
{
5
    public partial class UserView : UserControl
6
    {
7
        public string FIO { get; set; }
8

9
        public UserView()
10
        {
11
            InitializeComponent();
12
            DataContext = this;
13
        }
14
    }
15
}

MainWindow.xaml — xmlns на папку cards, ListBox с карточками, ContextMenu у TextBox:

1
<Window x:Class="тестыWPFFramework.MainWindow"
2
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
        xmlns:cards="clr-namespace:тестыWPFFramework.cards"
5
        Title="MainWindow" Height="275" Width="403">
6
    <Grid>
7
        <ListBox x:Name="UserList" SelectionChanged="UserList_SelectionChanged">
8
            <cards:UserView FIO="фамилия фамилия фамилия"/>
9
            <cards:UserView FIO="иванов иван иванович"/>
10
            <cards:UserView FIO="жаров жар жарович"/>
11
        </ListBox>
12
    </Grid>
13
</Window>

MainWindow.xaml.cs — обработчик выбора карточки:

1
using System.Windows;
2
using System.Windows.Controls;
3
using тестыWPFFramework.cards;
4

5
namespace тестыWPFFramework
6
{
7
    public partial class MainWindow : Window
8
    {
9
        public MainWindow()
10
        {
11
            InitializeComponent();
12
        }
13

14
        private void UserList_SelectionChanged(object sender, SelectionChangedEventArgs e)
15
        {
16
            var card = UserList.SelectedItem as UserView;
17
            if (card != null)
18
                MessageBox.Show(card.FIO);
19
        }
20
    }
21
}