Standard CODE Framework Icons
Standard Icon Resources
All the CODE Framework WPF themes support a list of standard icons in the form of Brush resources that can be used to fill any WPF object (typically, this is used as the fill color for a rectangle of the desired size).
Note that all icons are defined as vector graphics expressed as Brushes, so they can be used as “fill colors” wherever brushes are used. They can also be used by resource name in elements that support brush resources directly. Since icons are based on vector graphics, they can be used at any size without loss of quality.
Here’s an example where an icon is used as a “fill color”:
<Rectangle Height="36" Width="36" Fill="{DynamicResource CODE.Framework.Canvas-Icon-Paste}" />
Note: There also is a special ThemeIcon object that simplifies this task further. Here is the equivalent of the prior example using this control:
<mvvm:ThemeIcon StandardIcon="Paste" />
For more information about the ThemeIcon control, see ThemeIcon.
The following is an example for an object that supports resources directly:
new ViewAction("Full Screen",
execute: (a, o) => FullScreen(),
brushResourceKey: "CODE.Framework-Icon-ZoomIn");
Note that there also is a more strongly-typed shortcut that makes it easier to find icons:
new ViewAction("Full Screen",
execute: (a, o) => FullScreen(),
standardIcon: StandardIcons.ZoomIn);
Using the StandardIcons enum, it is easier to see what all the supported standard icons are, and it is easier to remember their names. It is also less error prone to use this enum, since it is strongly typed and compiler-checked. Note however that this is just a shortcut to set the brush resource key. In other words: When the standard icon is set using the enum, code behind the scenes simply assigns the appropriate brush resource key.
Note that using the StandardIcons enum limits your choices to the list of icons defined in the enum. If you want to use your own icons of different names, simply set the brush resource key directly. For instance, you can do the following:
new ViewAction("Full Screen",
execute: (a, o) => FullScreen(),
brushResourceKey: "MyGreatIcon");
Note: For more info on how to create your own icons, see Custom Icons.
It is also possible to use standard icon resources programmatically. For instance, if you want to assign a brush to an object, you can do the following:
var rect = new Rectangle();
rect.Fill = Application.Current.FindResource("CODE.Framework-Icon-ZoomIn") as Brush;
Or, a view model could have a property that retrieves a brush (which one could later use for binding):
public Brush SomeLogo
{
get
{
return Application.Current.FindResource("CODE.Framework-Icon-ZoomIn") as Brush;
}
}
Metro icons are all monochrome and use a single defined color/brush to draw themselves. That color can be changed, simply by redefining those color resources. Here is the default definition for those colors:
<Color x:Key="CODE.Framework-Metro-IconForegroundColor">Black</Color>
<SolidColorBrush x:Key="CODE.Framework-Metro-IconForegroundBrush" Color="{DynamicResource CODE.Framework-Metro-IconForegroundColor}" />
When using standard view models, the model class provides methods to load brush resources. The simplest way to load a brush resource in a standard view model is through the GetBrushFromResource() method:
public class CustomerQuickInformation : StandardViewModel
{
public CustomerQuickInformation()
{
Image1 = GetBrushFromResource("CODE.Framework-Icon-Home");
}
}
This loads the resource and performs a few additional tasks such as making sure resource uses appropriately themed colors. Note that this can at times be a performance intensive task and should thus be used with care. If you have to load hundreds of brush resources (as is often the case in large lists) and many or all of those items share the same icon, there are more specific methods such as LoadSharedImage1FromBrushResource() that perform the same task but in a highly optimized way that works particularly well for numerous instances of the same view model:
public class CustomerQuickInformation : StandardViewModel
{
public CustomerQuickInformation()
{
LoadSharedImage1FromBrushResource("CODE.Framework-Icon-Home");
}
}
Note there this loads the brush and assigns it internally to Image1. There are equivalent methods for all image and logo properties.
Side-Note: Other Icons
For a very large selection of additional icon resources (specifically designed for XAML use, but also available as SVG and various bitmap formats such as JPG, PNG,…) check out www.Xamalot.com!
List of Supported Icons
The following is a list of supported icons:
Note: Whenever no icon is specified for a specific theme, the Metro icon is used as a default.
| Resource Name | Battleship | Geek | Metro | Vapor | Wildcat | Workplace |
| CODE.Framework-Icon-Accounts |  |
|
|
|
|
|
| CODE.Framework-Icon-Add | |
|
|
|
|
|
| CODE.Framework-Icon-Admin | |
|
|
|
|
|
| CODE.Framework-Icon-AlignCenter | |
|
|
|
|
|
| CODE.Framework-Icon-AlignLeft | |
|
|
|
|
|
| CODE.Framework-Icon-AlignRight | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowDown | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowDownLeft | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowDownRight | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowLeft | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowRight | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowUp | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowUpLeft | |
|
|
|
|
|
| CODE.Framework-Icon-ArrowUpRight | |
|
|
|
|
|
| CODE.Framework-Icon-Attach | |
|
|
|
|
|
| CODE.Framework-Icon-AttachCamera | |
|
|
|
|
|
| CODE.Framework-Icon-Audio | |
|
|
|
|
|
| CODE.Framework-Icon-Bold | |
|
|
|
|
|
| CODE.Framework-Icon-Bookmarks | |
|
|
|
|
|
| CODE.Framework-Icon-BrowsePhotos | |
|
|
|
|
|
| CODE.Framework-Icon-Bullets | |
|
|
|
|
|
| CODE.Framework-Icon-Calendar | |
|
|
|
|
|
| CODE.Framework-Icon-Caption | |
|
|
|
|
|
| CODE.Framework-Icon-Cc | |
|
|
|
|
|
| CODE.Framework-Icon-Characters | |
|
|
|
|
|
| CODE.Framework-Icon-Clock | |
|
|
|
|
|
| CODE.Framework-Icon-ClosePane | |
|
|
|
|
|
| CODE.Framework-Icon-Collapsed | |
|
|
|
|
|
| CODE.Framework-Icon-Comment | |
|
|
|
|
|
| CODE.Framework-Icon-Contact | |
|
|
|
|
|
| CODE.Framework-Icon-Contact2 | |
|
|
|
|
|
| CODE.Framework-Icon-ContactInfo | |
|
|
|
|
|
| CODE.Framework-Icon-Copy | |
|
|
|
|
|
| CODE.Framework-Icon-Crop | |
|
|
|
|
|
| CODE.Framework-Icon-Cut | |
|
|
|
|
|
| CODE.Framework-Icon-Data | |
|
|
|
|
|
| CODE.Framework-Icon-Data2 | |
|
|
|
|
|
| CODE.Framework-Icon-Data3 | |
|
|
|
|
|
| CODE.Framework-Icon-Day | |
|
|
|
|
|
| CODE.Framework-Icon-DisableUpdates | |
|
|
|
|
|
| CODE.Framework-Icon-Discard | |
|
|
|
|
|
| CODE.Framework-Icon-Dislike | |
|
|
|
|
|
| CODE.Framework-Icon-DockBottom | |
|
|
|
|
|
| CODE.Framework-Icon-DockLeft | |
|
|
|
|
|
| CODE.Framework-Icon-DockRight | |
|
|
|
|
|
| CODE.Framework-Icon-Document | |
|
|
|
|
|
| CODE.Framework-Icon-Download | |
|
|
|
|
|
| CODE.Framework-Icon-Edit | |
|
|
|
|
|
| CODE.Framework-Icon-Emoji | |
|
|
|
|
|
| CODE.Framework-Icon-Emoji2 | |
|
|
|
|
|
| CODE.Framework-Icon-Expanded | |
|
|
|
|
|
| CODE.Framework-Icon-Favorite | |
|
|
|
|
|
| CODE.Framework-Icon-Filter | |
|
|
|
|
|
| CODE.Framework-Icon-Flag | |
|
|
|
|
|
| CODE.Framework-Icon-Folder | |
|
|
|
|
|
| CODE.Framework-Icon-Font | |
|
|
|
|
|
| CODE.Framework-Icon-FontColor | |
|
|
|
|
|
| CODE.Framework-Icon-Globe | |
|
|
|
|
|
| CODE.Framework-Icon-Go | |
|
|
|
|
|
| CODE.Framework-Icon-HangUp | |
|
|
|
|
|
| CODE.Framework-Icon-Help | |
|
|
|
|
|
| CODE.Framework-Icon-HideBcc | |
|
|
|
|
|
| CODE.Framework-Icon-Highlight | |
|
|
|
|
|
| CODE.Framework-Icon-Home | |
|
|
|
|
|
| CODE.Framework-Icon-Import | |
|
|
|
|
|
| CODE.Framework-Icon-ImportAll | |
|
|
|
|
|
| CODE.Framework-Icon-Important | |
|
|
|
|
|
| CODE.Framework-Icon-Italic | |
|
|
|
|
|
| CODE.Framework-Icon-Keyboard | |
|
|
|
|
|
| CODE.Framework-Icon-Like | |
|
|
|
|
|
| CODE.Framework-Icon-LikeDislike | |
|
|
|
|
|
| CODE.Framework-Icon-Link | |
|
|
|
|
|
| CODE.Framework-Icon-List | |
|
|
|
|
|
| CODE.Framework-Icon-Login | |
|
|
|
|
|
| CODE.Framework-Icon-Mail | |
|
|
|
|
|
| CODE.Framework-Icon-Mail2 | |
|
|
|
|
|
| CODE.Framework-Icon-MailForward | |
|
|
|
|
|
| CODE.Framework-Icon-MailReply | |
|
|
|
|
|
| CODE.Framework-Icon-MailReplyAll | |
|
|
|
|
|
| CODE.Framework-Icon-MapPin | |
|
|
|
|
|
| CODE.Framework-Icon-Menu | |
|
|
|
|
|
| CODE.Framework-Icon-Message | |
|
|
|
|
|
| CODE.Framework-Icon-MissingIcon | |
|
|
|
|
|
| CODE.Framework-Icon-Money | |
|
|
|
|
|
| CODE.Framework-Icon-More | |
|
|
|
|
|
| CODE.Framework-Icon-MoveToFolder | |
|
|
|
|
|
| CODE.Framework-Icon-MusicInfo | |
|
|
|
|
|
| CODE.Framework-Icon-Mute | |
|
|
|
|
|
| CODE.Framework-Icon-Next | |
|
|
|
|
|
| CODE.Framework-Icon-No | |
|
|
|
|
|
| CODE.Framework-Icon-OpenFile | |
|
|
|
|
|
| CODE.Framework-Icon-OpenLocal | |
|
|
|
|
|
| CODE.Framework-Icon-Orientation | |
|
|
|
|
|
| CODE.Framework-Icon-OtherUser | |
|
|
|
|
|
| CODE.Framework-Icon-Out | |
|
|
|
|
|
| CODE.Framework-Icon-Page | |
|
|
|
|
|
| CODE.Framework-Icon-Page2 | |
|
|
|
|
|
| CODE.Framework-Icon-Paste | |
|
|
|
|
|
| CODE.Framework-Icon-Pause | |
|
|
|
|
|
| CODE.Framework-Icon-People | |
|
|
|
|
|
| CODE.Framework-Icon-Permissions | |
|
|
|
|
|
| CODE.Framework-Icon-Phone | |
|
|
|
|
|
| CODE.Framework-Icon-Photo | |
|
|
|
|
|
| CODE.Framework-Icon-Pictures | |
|
|
|
|
|
| CODE.Framework-Icon-Pin | |
|
|
|
|
|
| CODE.Framework-Icon-Placeholder | |
|
|
|
|
|
| CODE.Framework-Icon-Play | |
|
|
|
|
|
| CODE.Framework-Icon-Presence | |
|
|
|
|
|
| CODE.Framework-Icon-Preview | |
|
|
|
|
|
| CODE.Framework-Icon-PreviewLink | |
|
|
|
|
|
| CODE.Framework-Icon-Previous | |
|
|
|
|
|
| CODE.Framework-Icon-Print | |
|
|
|
|
|
| CODE.Framework-Icon-Priority | |
|
|
|
|
|
| CODE.Framework-Icon-ProtectedDocument | |
|
|
|
|
|
| CODE.Framework-Icon-Read | |
|
|
|
|
|
| CODE.Framework-Icon-Redo | |
|
|
|
|
|
| CODE.Framework-Icon-Refresh | |
|
|
|
|
|
| CODE.Framework-Icon-Remote | |
|
|
|
|
|
| CODE.Framework-Icon-Remove | |
|
|
|
|
|
| CODE.Framework-Icon-Rename | |
|
|
|
|
|
| CODE.Framework-Icon-Repair | |
|
|
|
|
|
| CODE.Framework-Icon-RotateCamera | |
|
|
|
|
|
| CODE.Framework-Icon-Save | |
|
|
|
|
|
| CODE.Framework-Icon-SaveLocal | |
|
|
|
|
|
| CODE.Framework-Icon-Search | |
|
|
|
|
|
| CODE.Framework-Icon-SelectAll | |
|
|
|
|
|
| CODE.Framework-Icon-Send | |
|
|
|
|
|
| CODE.Framework-Icon-SetLockscreen | |
|
|
|
|
|
| CODE.Framework-Icon-Settings | |
|
|
|
|
|
| CODE.Framework-Icon-SetTitle | |
|
|
|
|
|
| CODE.Framework-Icon-Shop | |
|
|
|
|
|
| CODE.Framework-Icon-ShowBcc | |
|
|
|
|
|
| CODE.Framework-Icon-ShowResults | |
|
|
|
|
|
| CODE.Framework-Icon-Shuffle | |
|
|
|
|
|
| CODE.Framework-Icon-SkipAhead | |
|
|
|
|
|
| CODE.Framework-Icon-SkipBack | |
|
|
|
|
|
| CODE.Framework-Icon-Skydrive | |
|
|
|
|
|
| CODE.Framework-Icon-Slideshow | |
|
|
|
|
|
| CODE.Framework-Icon-Sort | |
|
|
|
|
|
| CODE.Framework-Icon-SortAscending | |
|
|
|
|
|
| CODE.Framework-Icon-SortDescending | |
|
|
|
|
|
| CODE.Framework-Icon-Stop | |
|
|
|
|
|
| CODE.Framework-Icon-StopSlideshow | |
|
|
|
|
|
| CODE.Framework-Icon-Switch | |
|
|
|
|
|
| CODE.Framework-Icon-Sync | |
|
|
|
|
|
| CODE.Framework-Icon-Today | |
|
|
|
|
|
| CODE.Framework-Icon-Trim | |
|
|
|
|
|
| CODE.Framework-Icon-TwoPage | |
|
|
|
|
|
| CODE.Framework-Icon-Underline | |
|
|
|
|
|
| CODE.Framework-Icon-Undo | |
|
|
|
|
|
| CODE.Framework-Icon-Unfavorite | |
|
|
|
|
|
| CODE.Framework-Icon-UnPin | |
|
|
|
|
|
| CODE.Framework-Icon-Upload | |
|
|
|
|
|
| CODE.Framework-Icon-User | |
|
|
|
|
|
| CODE.Framework-Icon-UserRights | |
|
|
|
|
|
| CODE.Framework-Icon-UserRoles | |
|
|
|
|
|
| CODE.Framework-Icon-Users | |
|
|
|
|
|
| CODE.Framework-Icon-Video | |
|
|
|
|
|
| CODE.Framework-Icon-VideoChat | |
|
|
|
|
|
| CODE.Framework-Icon-View | |
|
|
|
|
|
| CODE.Framework-Icon-ViewAll | |
|
|
|
|
|
| CODE.Framework-Icon-Volume | |
|
|
|
|
|
| CODE.Framework-Icon-Webcam | |
|
|
|
|
|
| CODE.Framework-Icon-Week | |
|
|
|
|
|
| CODE.Framework-Icon-World | |
|
|
|
|
|
| CODE.Framework-Icon-Yes | |
|
|
|
|
|
| CODE.Framework-Icon-Zoom | |
|
|
|
|
|
| CODE.Framework-Icon-ZoomIn | |
|
|
|
|
|
| CODE.Framework-Icon-ZoomOut | |
|
|
|
|
|