Если в каждый элемент MenuItem мы будем встраивать дескриптор <MenuItem.Icon> с элементом Image, то разметка сильно разбухнет и станет нечитабельным. Чтобы сделать код более элегантным, воспользуемся новым механизмом WPF - логическими ресурсами. Ресурсы хороши тем, что их можно использовать многократно в различных местах приложения. В нашем приложении одни и те же иконки понадобятся в меню, панели инструментов и контекстном меню.
Каждый элемент, производный от класса FrameworkElement, включая окно Window, наследует от FrameworkElement коллекцию Resources типа словаря ресурсов System.Windows. ResourceDictionary. В эту коллекцию можно помещать описания пар ключ-объект, ссылки на которые потом можно подключать к элементам управления для встраивания объектов. Такой прием называется расширением разметки интерфейсных элементов.
Обязательным элементом при объявлении и использовании ресурса является ключ x:Key="идентификатор_ключа", которому можно присваивать произвольное имя. В пределах одной коллекции ключи должны быть уникальными. Использование ссылки на ресурс для свойства элемента выполняется по синтаксису
Свойство="{StaticResource идентификатор_ключа}" или Свойство="{DynamicResource идентификатор_ключа}"
Синтаксический анализатор разметки XAML присвоит свойству объявленный в ресурсе объект. Если применяется ссылка на статический ресурс, то объявление ресурса должно предшествовать его использованию. Встретив ссылку на ресурс анализатор начинает поиск объекта с заданным ключом вначале в коллекции Resources того элемента, где расположена ссылка. Не найдя нужную пару анализатор поднимается на уровень выше и просматривает коллекцию родительского элемента и так далее, пока не будет найдена соответствующая ссылке пара. Таким образом, ресурсы можно объявлять в любом элементе, но лучше сосредоточить их в коллекции <Window.Resources> окна или <Application.Resources> приложения.
- Добавьте после открывающего дескриптора окна объявление логического ресурса, а в самозакрывающемся дескрипторе элемена меню - его использование по ключу
<Window x:Class="Notepad1.Window1"............................................... > <Window.Resources> <!-- File --> <Image x:Key="iconNew" Source="Images/NewDocument.bmp" Width="16" Height="16" /> </Window.Resources> <DockPanel LastChildFill="True"> <!-- Меню --> <Menu DockPanel.Dock="Top"> <MenuItem Header="_File"> <!-- Сокращенные варианты подключения иконок с использованием статических ресурсов --> <MenuItem Header="_New" InputGestureText="Ctrl+N" Icon="{StaticResource iconNew}" />............................................... </MenuItem>............................................... </Menu> </DockPanel></Window>
- Запустите приложение и убедитесь, что иконка присутствует слева от названия пункта меню New, но разметка элемента меню стала значительно короче
- Расширьте объявление ресурсов на все иконки
<Window.Resources> <!-- File --> <Image x:Key="iconNew" Source="Images/NewDocument.bmp" Width="16" Height="16" /> <Image x:Key="iconOpen" Source="Images/Open.bmp" Width="16" Height="16" /> <Image x:Key="iconSave" Source="Images/Save.bmp" Width="16" Height="16" /> <Image x:Key="iconPageSetup" Source="Images/PrintSetup.bmp" Width="16" Height="16" /> <Image x:Key="iconPrintPreview" Source="Images/PrintPreview.bmp" Width="16" Height="16" /> <Image x:Key="iconPrint" Source="Images/Print.bmp" Width="16" Height="16" /> <!-- Edit --> <Image x:Key="iconUndo" Source="Images/Edit_Undo.bmp" Width="16" Height="16" /> <Image x:Key="iconRedo" Source="Images/Edit_Redo.bmp" Width="16" Height="16" /> <Image x:Key="iconCut" Source="Images/Cut.bmp" Width="16" Height="16" /> <Image x:Key="iconCopy" Source="Images/Copy.bmp" Width="16" Height="16" /> <Image x:Key="iconPaste" Source="Images/Paste.bmp" Width="16" Height="16" /> <Image x:Key="iconDelete" Source="Images/Delete.bmp" Width="16" Height="16" /> <Image x:Key="iconFind" Source="Images/Find.bmp" Width="16" Height="16" /> <Image x:Key="iconFont" Source="Images/Font.bmp" Width="16" Height="16" /> </Window.Resources>
- Дополните разметку создания главного меню ссылками на ресурс объекта рисунка для свойства Icon
<!-- Меню --> <Menu DockPanel.Dock="Top"> <MenuItem Header="_File"> <!-- Сокращенные варианты подключения иконок с использованием статических ресурсов --> <MenuItem Header="_New" InputGestureText="Ctrl+N" Icon="{StaticResource iconNew}" /> <MenuItem Header="_Open..." InputGestureText="Ctrl+O" Icon="{StaticResource iconOpen}" /> <MenuItem Header="_Save" InputGestureText="Ctrl+S" Icon="{StaticResource iconSave}" /> <MenuItem Header="Save _As..." /> <Separator /> <MenuItem Header="Page Set_up..." Icon="{StaticResource iconPageSetup}" /> <MenuItem Header="P_rint Preview" InputGestureText="Ctrl+F2" Icon="{StaticResource iconPrintPreview}" /> <MenuItem Header="_Print..." InputGestureText="Ctrl+P" Icon="{StaticResource iconPrint}" /> <Separator /> <MenuItem Header="E_xit" /> </MenuItem> <MenuItem Header="_Edit"> <MenuItem Header="_Undo" InputGestureText="Ctrl+Z" Icon="{StaticResource iconUndo}" /> <MenuItem Header="_Redo" InputGestureText="Ctrl+Y" Icon="{StaticResource iconRedo}" /> <Separator></Separator> <MenuItem Header="Cu_t" InputGestureText="Ctrl+X" Icon="{StaticResource iconCut}" /> <MenuItem Header="_Copy" InputGestureText="Ctrl+C" Icon="{StaticResource iconCopy}" /> <MenuItem Header="_Paste" InputGestureText="Ctrl+V" Icon="{StaticResource iconPaste}" /> <MenuItem Header="De_lete" InputGestureText="Del" Icon="{StaticResource iconDelete}" /> <Separator></Separator> <MenuItem Header="_Find..." InputGestureText="Ctrl+F" Icon="{StaticResource iconFind}" /> <MenuItem Header="Find _Next" InputGestureText="F3" /> <MenuItem Header="_Replace..." InputGestureText="Ctrl+H" /> <MenuItem Header="_Go To..." InputGestureText="Ctrl+G" /> <Separator></Separator> <MenuItem Header="Select _All" InputGestureText="Ctrl+A" /> </MenuItem> <MenuItem Header="F_ormat"> <MenuItem Header="_Font..." Icon="{StaticResource iconFont}" /> <Separator /> <MenuItem Header="_Word Wrap" IsCheckable="True" IsChecked="True" InputGestureText="Ctrl+W" /> </MenuItem> <MenuItem Header="_Help"> <MenuItem Header="_About" /> </MenuItem> </Menu>
- Запустите приложение и проверьте наличие иконок в элементах главного меню