Toast
Toast

Reputation: 657

How to include an XAML icon in another XAML file

I've downloaded the Visual Studio Image Library, which contains XAML icons. For example, this is the content of the file FolderClosed_16x.xaml:

<!-- This file was generated by the AiToXaml tool.-->
<!-- Tool Version: 14.0.22307.0 -->
<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="F1M0,0L16,0 16,16 0,16z" />
              <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
              <GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M1.9998,3.0004L1.9998,4.0004 8.8738,4.0004 8.3738,3.0004z" />
              <GeometryDrawing Brush="#FFDBB679" Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
            </DrawingGroup.Children>
          </DrawingGroup>
        </DrawingBrush.Drawing>
      </DrawingBrush>
    </Rectangle.Fill>
  </Rectangle>
</Viewbox>

I've added this file to my project in Visual Studio. How do I use the icon in another XAML file? Pasting these lines inside my XAML file works as expected, but I'd like to keep all icon files in a directory and reference them in multiple places. Is this possible without modifying the icon files?

I'd like to use it like this in my MainWindow.xaml, but this doesn't work:

<ContentControl Template="{StaticResource Icons/FolderClosed_16x.xaml}" />

Upvotes: 1

Views: 565

Answers (2)

Toast
Toast

Reputation: 657

This is the solution that I ended up using. I have one xaml file in my project that contains all the icons and they all have an x:Key:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   
    <!-- Folder Closed -->
    <Rectangle x:Key="FolderClosed" Width="16" Height="16" x:Shared="false">
        <Rectangle.Fill>
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>
                            <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M0,0L16,0 16,16 0,16z" />
                            <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
                            <GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M1.9998,3.0004L1.9998,4.0004 8.8738,4.0004 8.3738,3.0004z" />
                            <GeometryDrawing Brush="#FFDBB679" Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Rectangle.Fill>
    </Rectangle>

    <!-- more icons go here -->
</ResourceDictionary>

In a file that uses the icon, I reference my icons file:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Icons.xaml"/>
            <!-- other files can be referenced here -->
        </ResourceDictionary.MergedDictionaries>

        <!-- other resources can be defined here here -->
    </ResourceDictionary>
</Window.Resources>

And in the same file, I use the icon like this:

<ContentControl Content="{StaticResource FolderClosed}" />

Upvotes: 2

mm8
mm8

Reputation: 169200

You should define the Viewbox as a type or resource.

  1. Create new `UserControl´ (Project->Add user Control (WPF) in Visual Studio) called FolderClosed_16x.

  2. Replace the contents of the FolderClosed_16x.xaml file with this:

     <Viewbox x:Class="WpfApp1.FolderClosed_16x"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              Width="16" Height="16">
         <Rectangle Width="16" Height="16">
             <Rectangle.Fill>
                 <DrawingBrush>
                     <DrawingBrush.Drawing>
                         <DrawingGroup>
                             <DrawingGroup.Children>
                                 <GeometryDrawing Brush="#00FFFFFF" Geometry="F1M0,0L16,0 16,16 0,16z" />
                                 <GeometryDrawing Brush="#FFF6F6F6" Geometry="F1M1.5,1L9.61,1 10.61,3 13.496,3C14.323,3,14.996,3.673,14.996,4.5L14.996,12.5C14.996,13.327,14.323,14,13.496,14L1.5,14C0.673,14,0,13.327,0,12.5L0,2.5C0,1.673,0.673,1,1.5,1" />
                                 <GeometryDrawing Brush="#FFEFEFF0" Geometry="F1M1.9998,3.0004L1.9998,4.0004 8.8738,4.0004 8.3738,3.0004z" />
                                 <GeometryDrawing Brush="#FFDBB679" Geometry="F1M2,3L8.374,3 8.874,4 2,4z M13.496,4L10,4 9.992,4 8.992,2 1.5,2C1.225,2,1,2.224,1,2.5L1,12.5C1,12.776,1.225,13,1.5,13L13.496,13C13.773,13,13.996,12.776,13.996,12.5L13.996,4.5C13.996,4.224,13.773,4,13.496,4" />
                             </DrawingGroup.Children>
                         </DrawingGroup>
                     </DrawingBrush.Drawing>
                 </DrawingBrush>
             </Rectangle.Fill>
         </Rectangle>
     </Viewbox>
    
  3. Change the base type in FolderClosed_16x.xaml.cs to Viewbox:

     public partial class FolderClosed_16x : Viewbox
     {
         public FolderClosed_16x()
         {
             InitializeComponent();
         }
     }
    
  4. Reference the control as usual from another view:

     <local:FolderClosed_16x />
    

Upvotes: 1

Related Questions