This project is read-only.

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}" />

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");

It is also possible to use these kinds of icons 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 image   image    

image

CODE.Framework-Icon-Add image   image    

image

CODE.Framework-Icon-Admin image   image    

image

CODE.Framework-Icon-AlignCenter image   image    

image

CODE.Framework-Icon-AlignLeft image   image    

image 

CODE.Framework-Icon-AlignRight image   image    

 image

CODE.Framework-Icon-ArrowDown     image    

 image

CODE.Framework-Icon-ArrowDownLeft     image    

 image

CODE.Framework-Icon-ArrowDownRight     image    

image

CODE.Framework-Icon-ArrowLeft     image    

image 

CODE.Framework-Icon-ArrowRight     image    

 image

CODE.Framework-Icon-ArrowUp     image    

image 

CODE.Framework-Icon-ArrowUpLeft     image    

image 

CODE.Framework-Icon-ArrowUpRight     image    

 image

CODE.Framework-Icon-Attach image   image    

image 

CODE.Framework-Icon-AttachCamera image   image    

 image

CODE.Framework-Icon-Audio image   image    

 image

CODE.Framework-Icon-Bold image   image    

 image

CODE.Framework-Icon-Bookmarks image   image    

image 

CODE.Framework-Icon-BrowsePhotos     image    

image 

CODE.Framework-Icon-Bullets     image    

image 

CODE.Framework-Icon-Calendar image   image    

image 

CODE.Framework-Icon-Caption     image    

image 

CODE.Framework-Icon-Cc     image    

image 

CODE.Framework-Icon-Characters image   image    

image 

CODE.Framework-Icon-Clock image   image    

 image

CODE.Framework-Icon-ClosePane image   image    

image 

CODE.Framework-Icon-Collapsed     image    

 image

CODE.Framework-Icon-Comment     image    

 image

CODE.Framework-Icon-Contact image   image    

 image

CODE.Framework-Icon-Contact2 image   image    

image 

CODE.Framework-Icon-ContactInfo image   image    

image 

CODE.Framework-Icon-Copy image   image    

image 

CODE.Framework-Icon-Crop     image    

image 

CODE.Framework-Icon-Cut image   image    

 image

CODE.Framework-Icon-Day     image    

 image

CODE.Framework-Icon-DisableUpdates     image    

image 

CODE.Framework-Icon-Discard image   image    

image

CODE.Framework-Icon-Dislike     image    

image 

CODE.Framework-Icon-DockBottom     image    

 image

CODE.Framework-Icon-DockLeft     image    

 

CODE.Framework-Icon-DockRight     image    

 

CODE.Framework-Icon-Document image   image    

 

CODE.Framework-Icon-Download image   image    

 

CODE.Framework-Icon-Edit image   image    

 

CODE.Framework-Icon-Emoji image   image    

 

CODE.Framework-Icon-Emoji2 image   image    

 

CODE.Framework-Icon-Expanded          

 

CODE.Framework-Icon-Favorite image   image    

 

CODE.Framework-Icon-Filter     image    

 

CODE.Framework-Icon-Flag     image    

 

CODE.Framework-Icon-Folder image   image    

 

CODE.Framework-Icon-Font     image    

 

CODE.Framework-Icon-FontColor     image    

 

CODE.Framework-Icon-Globe image   image      
CODE.Framework-Icon-Go     image    

 

CODE.Framework-Icon-HangUp     image      
CODE.Framework-Icon-Help image   image      
CODE.Framework-Icon-HideBcc     image      
CODE.Framework-Icon-Highlight     image      
CODE.Framework-Icon-Home image   image      
CODE.Framework-Icon-Import     image      
CODE.Framework-Icon-ImportAll     image      
CODE.Framework-Icon-Important image   image      
CODE.Framework-Icon-Italic image   image      
CODE.Framework-Icon-Keyboard image   image      
CODE.Framework-Icon-Like     image      
CODE.Framework-Icon-LikeDislike     image      
CODE.Framework-Icon-Link     image      
CODE.Framework-Icon-List     image      
CODE.Framework-Icon-Login image   image      
CODE.Framework-Icon-Mail image   image      
CODE.Framework-Icon-Mail2 image   image      
CODE.Framework-Icon-MailForward image   image      
CODE.Framework-Icon-MailReply image   image      
CODE.Framework-Icon-MailReplyAll image   image      
CODE.Framework-Icon-MapPin     image      
CODE.Framework-Icon-Menu     image      
CODE.Framework-Icon-Message image   image      
CODE.Framework-Icon-MissingIcon image   image      
CODE.Framework-Icon-More     image      
CODE.Framework-Icon-MoveToFolder     image      
CODE.Framework-Icon-MusicInfo     image      
CODE.Framework-Icon-Mute image   image      
CODE.Framework-Icon-Next image   image      
CODE.Framework-Icon-No     image      
CODE.Framework-Icon-OpenFile     image      
CODE.Framework-Icon-OpenLocal     image      
CODE.Framework-Icon-Orientation     image      
CODE.Framework-Icon-OtherUser     image      
CODE.Framework-Icon-Out image   image      
CODE.Framework-Icon-Page image   image      
CODE.Framework-Icon-Page2 image   image      
CODE.Framework-Icon-Paste image   image      
Code.Framework-Icon-Pause image   image      
CODE.Framework-Icon-People image   image      
CODE.Framework-Icon-Permissions     image      
CODE.Framework-Icon-Phone     image      
CODE.Framework-Icon-Photo image   image      
CODE.Framework-Icon-Pictures     image      
CODE.Framework-Icon-Pin     image      
CODE.Framework-Icon-Placeholder     image      
CODE.Framework-Icon-Play     image      
CODE.Framework-Icon-Presence     image      
CODE.Framework-Icon-Preview image   image      
CODE.Framework-Icon-PreviewLink     image      
CODE.Framework-Icon-Previous image   image      
CODE.Framework-Icon-Print image   image      
CODE.Framework-Icon-Priority     image      
CODE.Framework-Icon-ProtectedDocument     image      
CODE.Framework-Icon-Read     image      
CODE.Framework-Icon-Redo image   image      
CODE.Framework-Icon-Refresh image   image      
CODE.Framework-Icon-Remote     image      
CODE.Framework-Icon-Remove image   image      
CODE.Framework-Icon-Rename     image      
CODE.Framework-Icon-Repair     image      
CODE.Framework-Icon-RotateCamera     image      
CODE.Framework-Icon-Save image   image      
CODE.Framework-Icon-SaveLocal image   image      
CODE.Framework-Icon-Search image   image      
CODE.Framework-Icon-SelectAll     image      
CODE.Framework-Icon-Send image   image      
CODE.Framework-Icon-SetLockscreen     image      
CODE.Framework-Icon-Settings image   image      
CODE.Framework-Icon-SetTitle     image      
CODE.Framework-Icon-Shop     image      
CODE.Framework-Icon-ShowBcc     image      
CODE.Framework-Icon-ShowResults     image      
CODE.Framework-Icon-Shuffle     image      
CODE.Framework-Icon-SkipAhead image   image      
CODE.Framework-Icon-SkipBack image   image      
CODE.Framework-Icon-Skydrive     image      
CODE.Framework-Icon-Slideshow     image      
CODE.Framework-Icon-Sort     image      
CODE.Framework-Icon-Stop image   image      
CODE.Framework-Icon-StopSlideshow     image      
CODE.Framework-Icon-Switch     image      
CODE.Framework-Icon-Sync     image      
CODE.Framework-Icon-Today     image      
CODE.Framework-Icon-Trim     image      
CODE.Framework-Icon-TwoPage     image      
CODE.Framework-Icon-Underline image   image      
CODE.Framework-Icon-Undo image   image      
CODE.Framework-Icon-Unfavorite     image      
CODE.Framework-Icon-UnPin     image      
CODE.Framework-Icon-Upload image   image      
CODE.Framework-Icon-UserRights     image      
CODE.Framework-Icon-UserRoles     image      
CODE.Framework-Icon-Users image   image      
CODE.Framework-Icon-Video image   image      
CODE.Framework-Icon-VideoChat     image      
CODE.Framework-Icon-View     image      
CODE.Framework-Icon-ViewAll     image      
CODE.Framework-Icon-Volume image   image      
CODE.Framework-Icon-Webcam     image      
CODE.Framework-Icon-Week     image      
CODE.Framework-Icon-World image   image      
CODE.Framework-Icon-Yes     image      
CODE.Framework-Icon-Zoom     image      
CODE.Framework-Icon-ZoomIn     image      
CODE.Framework-Icon-ZoomOut     image      

Last edited Mar 15, 2015 at 6:37 AM by MarkusEgger, version 49

Comments

MarkusEgger Apr 11, 2014 at 3:12 AM 
Somehow I missed this comment when it was originally posted.

Anyway: To add your own icons, you can simply add more resource dictionaries with icons and reference those dictionaries from App.xaml as merged dictionaries. I often add resource dictionaries for icons to the Images folder. These icons are then always available, no matter what theme the up runs on.

If you want theme-specific icons, you simply add those to each theme's folder (as resource dictionaries) and reference it from the main resource dictionary for the theme (so if the theme is called "MyTheme", the main resource file for it would be "MyTheme.xaml"). This way, you can create icons for each theme and they will be automatically loaded or unloaded with the theme. Just make sure you have the same set of icons (same names/keys) for all themes, or else some of the themes may not have any icons to show.

Note that it is also possible to define icons with the same name as the ones listed here, in which case, yours override the default ones.

FletcherJ Jul 4, 2013 at 4:04 AM 
This is really nice, thanks!

Would it be possible to have a short piece on how to add our own icons, where we can reference them in the same way, and be able to specify default as well as theme specific icons. And if there are any differences in how it might be applied given a starting point of the following file types: icon, gif, bmp, cur, jpg, png, or ani (animated cursor).