Reusable polygon

Question

I want to have a canvas in xaml where i place some icons. These icons are polygons like this one:

<Polygon Points="0,0 20,50, 0,50 20,0" Fill="Red" Stretch="Uniform"/>

But i want to use an icon several times, so i want to define it in the resources and include it by reference into the canvas at a certain position, someway like this:

<Page.Resources>
   <Polygon Key="icon1" Points="0,0 20,50, 0,50 20,0" Fill="Red" Stretch="Uniform"/>
   <Polygon Key="icon2" Points="0,0 10,30, 10,60 20,0" Fill="Blue" Stretch="Uniform"/>
   ...
</Page.Resources>    
<Canvas>
   <Polygon Reference="icon1" X="0" Y="0"/>
   <Polygon Reference="icon2" X="10" Y="10"/>   
   <Polygon Reference="icon1" X="20" Y="20"/>   
   ...          
</Canvas>

I found a possible solution on http://www.codeproject.com/KB/WPF/GraphicInXAMLAndWPF.aspx where the polygons are stored in a drawing image, but seems to be to much overhead.

Someone has an better idea how to solve this?

score 7 · Accepted Answer · edited May 23 '17 at 12:00

Probably the most obvious and flexible method is to create a UserControl. You can add a new file of type UserControl from the solution explorer, add your Polygon to the 'LayoutRoot' Grid that Visual Studio will create. You can then create as many instances as you like of your user control!

However, checking for similar problems on SO, you could use a content control to render the polygon, note, you would have to use x:Shared="false" to ensure that you are not trying to re-use the same polygon each time.

<Page.Resources>
   <Polygon x:Key="icon1"  x:Shared="False"
            Points="0,0 20,50, 0,50 20,0" Fill="Red" Stretch="Uniform"/>
   <Polygon x:Key="icon2"  x:Shared="False"
            Points="0,0 10,30, 10,60 20,0" Fill="Blue" Stretch="Uniform"/>
   ...
</Page.Resources>    
<Canvas>
    <ContentControl Content="{StaticResource icon1}" Canvas.Top="0" Canvas.Left="0"/>
    <ContentControl Content="{StaticResource icon2}" Canvas.Top="0" Canvas.Left="10"/>
    <ContentControl Content="{StaticResource icon1}" Canvas.Top="0" Canvas.Left="20"/>
   ...          
</Canvas>

See the following:

Vector image as reusable XAML fragment

I already thought of this, but i think, there must be an easier solution with less overhead. Its only a tiny polygon. — SpeziFish, Feb 02 '11 at 08:46
Two amendments to your solution: 1) it must be "x:Key" 2) for positioning use "Margin" — SpeziFish, Feb 02 '11 at 09:00
I have updated the answer to use x:Key for positioning, the Canvas attached properties should work. — ColinE, Feb 02 '11 at 09:03
And I would add that since they are icons they can be shared so no need to disable sharing — Ignacio Soler Garcia, Oct 01 '11 at 08:46

Reusable polygon

1 Answers1