CODEWITHSUNDEEP
wpfxaml
Marek Stejskal
Marek Stejskal

Reputation: 2708

How to create and use ResourceDictionary of external XAML images

I would like to use icons from Visual Studio icon set for a WPF app and I would like to do it properly using ResourceDictionaries, but it seems more challenging than I thought.

The example icon is a ViewBox provided in a separate XAML file, it's named home_16x.xaml and the XAML content looks like this:

<Viewbox Width="16" Height="16" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
  <Rectangle Width="16" Height="16">
    <Rectangle.Fill>
      <DrawingBrush>
        <DrawingBrush.Drawing>
          <DrawingGroup>
            <DrawingGroup.Children>
              <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
              <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
              <GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
              <GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
            </DrawingGroup.Children>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Viewbox>

If I use the following on my page then it works, but that's not what I am after. It doesn't seem elegant and I would like to keep the option open for switching ResourceDictionaries (for themes).

<Viewbox Width="400" Height="400">
    <Frame Source="\Media\Icons\Home_16x.xaml"/>
</Viewbox>

It also shows the following in design view, which is quite confusing: enter image description here

I would really like to be able to build a dictionary of the icons, that I could call with something like (or cleaner, if possible):

<Viewbox Width="400" Height="400">
    <Frame Content="{StaticResource ResourceKey=Icons.Home}"/>
</Viewbox>

My current Icons ResourceDictionary looks like this:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Viewbox x:Key="Home">
        <Viewbox.Resources>
            <ResourceDictionary>
                <Frame x:Key="Home" Source="\Media\Icons\Home_16x.xaml"/>
            </ResourceDictionary>
        </Viewbox.Resources>
    </Viewbox>

</ResourceDictionary>

I admit I am quite lost. Any help would be much appreciated.

Upvotes: 0

Views: 488

Answers (1)

Andy
Andy

Reputation: 12276

If you use a visualbrush on say a rectangle as fill, that will stretch to whatever size the rectangle is.

Hence you could have a visualbrush in a resource dictionary:

    <DrawingBrush x:Key="HomeBrush">
        <DrawingBrush.Drawing>
            <DrawingGroup>
                <DrawingGroup.Children>
                    <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M16,16L0,16 0,0 16,0z" />
                    <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M7.8786,-0.000199999999999534L-0.000399999999999956,7.8798 -0.000399999999999956,9.4138 0.9996,10.4138 0.9996,15.9998 15.0006,15.9998 15.0006,10.4138 16.0006,9.4138 16.0006,7.8798 8.1206,-0.000199999999999534z" />
                    <GeometryDrawing Brush="#FFF0EFF1" Geometry="F1M13,14L10,14 10,9 6,9 6,14 3,14 3,7.707 8,2.707 13,7.707z" />
                    <GeometryDrawing Brush="#FF424242" Geometry="F1M0.6462,8.6461L1.3532,9.3531 2.0002,8.7071 2.0002,15.0001 7.0002,15.0001 7.0002,10.0001 9.0002,10.0001 9.0002,15.0001 14.0002,15.0001 14.0002,8.7071 14.6462,9.3531 15.3532,8.6461 8.0002,1.2931z M3.0002,7.7071L8.0002,2.7071 12.9992,7.7071 12.9992,14.0001 10.0002,14.0001 10.0002,9.0001 6.0002,9.0001 6.0002,14.0001 3.0002,14.0001z" />
                </DrawingGroup.Children>
            </DrawingGroup>
        </DrawingBrush.Drawing>
    </DrawingBrush>

And use that:

    <Rectangle Fill="{StaticResource HomeBrush}" Width="16" Height="16"/>

Or you could let your rectangle fill whatever cell of a grid it's in and omit width and height. You don't need a viewbox to scale vectors, they can stretch.

You can also use a visualbrush within a path. The path can define one shape with a geometry ( which could be from a resource ) and within that your drawingbrush could put another geometry drawing with a different colour.

An example geometry out a resource file I have:

 <Geometry x:Key="BeeIcon">
    M15.551045,25.144995L16.748029,25.144995 ....
 </Geometry>

I removed a big chunk of the geometry there.

That BeeIcon can then be re-used in different drawinggroups which is useful if you want to construct icons with several parts.

Brushes and colours for them can also be from a resource dictionary so you can switch them out for different themes or branding.

Upvotes: 1

Related Questions