I am new to WPF and trying to build a basic app with a toolbar and icons. I am testing XamRibbon from Infragistics and ButtonTool that shows on the Ribbon require ImageSource to show an image like so:
<igRibbon:ButtonTool Caption="Edit"
igRibbon:RibbonGroup.MaximumSize="ImageAndTextLarge"
LargeImage="{StaticResource stop}"
SmallImage="{StaticResource stop}" />
I have a XAML icon defined in my dictionary with key 'stop' but the icons I am using are all in Canvas form like this:
<Canvas Width="32" Height="32" Canvas.Left="0" Canvas.Top="0">
<Canvas Clip="M15.82,31.2118l2.0148,-3.8306l-0.0332,-0.0332l0.1068,-0.1068l0.5615,-1.0675l0.253,0.253l8.5884,-8.5885l-0.0112,-0.0111l1.6101,-1.5876c0.4557,-0.4557,0.923,-0.5523,1.234,-0.5523c0.311,0,0.7784,0.0967,1.239,0.5572l0.6169,0.6168V0H0v32h15.7137C15.656,31.7398,15.6889,31.4614,15.82,31.2118z">
<Canvas>
<Canvas.RenderTransform>
<TransformGroup>
<TranslateTransform X="-1" Y="-1"/>
</TransformGroup>
</Canvas.RenderTransform>
<Polygon Points="17,28 17,24.5 15,24.5 15,28 3,28 3,30 29,30 29,28" Fill="#4EA17E" StrokeLineJoin="Miter"/>
<Path Data="M18.475,31h-4.9c-0.3038,0,-0.575,-0.1962,-0.575,-0.5v-2.95c0,-0.3038,0.2712,-0.55,0.575,-0.55h4.9c0.3038,0,0.55,0.2462,0.55,0.55V30.5C19.025,30.8038,18.7788,31,18.475,31z" Fill="#797979"/>
<Path Data="M28,1H4c-0.5523,0,-1,0.4477,-1,1v5c0,0.5523,0.4477,1,1,1h24c0.5523,0,1,-0.4477,1,-1V2C29,1.4477,28.5523,1,28,1zM7,6H5V3h2V6zM28,9H4c-0.5523,0,-1,0.4477,-1,1v5c0,0.5523,0.4477,1,1,1h24c0.5523,0,1,-0.4477,1,-1v-5C29,9.4477,28.5523,9,28,9zM7,14H5v-3h2V14zM28,17H4c-0.5523,0,-1,0.4477,-1,1v5c0,0.5523,0.4477,1,1,1h24c0.5523,0,1,-0.4477,1,-1v-5C29,17.4477,28.5523,17,28,17zM7,22H5v-3h2V22z" Fill="#3E79B4"/>
<Path Data="M7,22H5v-3h2V22zM7,11H5v3h2V11zM7,3H5v3h2V3z" Fill="#FFFFFF"/>
</Canvas>
</Canvas>
<Canvas>
<Path Data="M19.2158,27.348l9.0199,-9.0199l2.1233,2.1233l-9.0199,9.0199L19.2158,27.348zM29.6123,16.9515c0.3525,-0.3525,0.7113,-0.3525,1.0638,0l1.0596,1.0596c0.3525,0.3525,0.3525,0.7113,0,1.0638l-0.8743,0.8743l-2.1388,-2.1202L29.6123,16.9515zM16.7052,31.677l2.0176,-3.8361l2.1233,2.1233l-3.8361,2.0176c-0.061,0.0321,-0.1358,0.0207,-0.1846,-0.028l-0.0923,-0.0923C16.6845,31.8128,16.6732,31.738,16.7052,31.677z" Fill="#3E79B4"/>
</Canvas>
How can I convert Canvas XAML to something that can be used as ImageSource like a DrawingImage for example? I hope this makes sense.
I used the Blend for Visual studio to convert your Canvas as DrawingBrush. Now I can simply use what Blend Gave me. Only copy and paste I did.
<Image Height="32" Width="32">
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<DrawingGroup>
<DrawingGroup ClipGeometry="M15.82,31.2118L17.8348,27.3812 17.8016,27.348 17.9084,27.2412 18.4699,26.1737 18.7229,26.4267 27.3113,17.8382 27.3001,17.8271 28.9102,16.2395C29.3659,15.7838 29.8332,15.6872 30.1442,15.6872 30.4552,15.6872 30.9226,15.7839 31.3832,16.2444L32.0001,16.8612 32.0001,0 0,0 0,32 15.7137,32C15.656,31.7398,15.6889,31.4614,15.82,31.2118z">
<DrawingGroup>
<DrawingGroup.Transform>
<MatrixTransform Matrix="1,0,0,1,-1,-1" />
</DrawingGroup.Transform>
<GeometryDrawing Brush="#FF4EA17E" Geometry="M17,28 L17,24.5 15,24.5 15,28 3,28 3,30 29,30 29,28 z" />
<GeometryDrawing Brush="#FF797979" Geometry="M18.475,31L13.575,31C13.2712,31,13,30.8038,13,30.5L13,27.55C13,27.2462,13.2712,27,13.575,27L18.475,27C18.7788,27,19.025,27.2462,19.025,27.55L19.025,30.5C19.025,30.8038,18.7788,31,18.475,31z" />
<GeometryDrawing Brush="#FF3E79B4" Geometry="M28,1L4,1C3.4477,1,3,1.4477,3,2L3,7C3,7.5523,3.4477,8,4,8L28,8C28.5523,8,29,7.5523,29,7L29,2C29,1.4477,28.5523,1,28,1z M7,6L5,6 5,3 7,3 7,6z M28,9L4,9C3.4477,9,3,9.4477,3,10L3,15C3,15.5523,3.4477,16,4,16L28,16C28.5523,16,29,15.5523,29,15L29,10C29,9.4477,28.5523,9,28,9z M7,14L5,14 5,11 7,11 7,14z M28,17L4,17C3.4477,17,3,17.4477,3,18L3,23C3,23.5523,3.4477,24,4,24L28,24C28.5523,24,29,23.5523,29,23L29,18C29,17.4477,28.5523,17,28,17z M7,22L5,22 5,19 7,19 7,22z" />
<GeometryDrawing Brush="White" Geometry="M7,22L5,22 5,19 7,19 7,22z M7,11L5,11 5,14 7,14 7,11z M7,3L5,3 5,6 7,6 7,3z" />
</DrawingGroup>
</DrawingGroup>
<GeometryDrawing Brush="#FF3E79B4" Geometry="M19.2158,27.348L28.2357,18.3281 30.359,20.4514 21.3391,29.4713 19.2158,27.348z M29.6123,16.9515C29.9648,16.599,30.3236,16.599,30.6761,16.9515L31.7357,18.0111C32.0882,18.3636,32.0882,18.7224,31.7357,19.0749L30.8614,19.9492 28.7226,17.829 29.6123,16.9515z M16.7052,31.677L18.7228,27.8409 20.8461,29.9642 17.01,31.9818C16.949,32.0139,16.8742,32.0025,16.8254,31.9538L16.7331,31.8615C16.6845,31.8128,16.6732,31.738,16.7052,31.677z" />
</DrawingGroup>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
I think this is the easiest solution.
I don't use Infragistics controls, but I believe they follow the standard WPF controls.
I used image control and try to display your canvas path image.
define the Geometry from your canvas path in resource
<Geometry x:Key="StopGeometry">M13,11.3814v18.115c0.0083,0.2845,0.2134,0.5036,0.4896,0.5036h4c0.2807,0,0.5104,-0.2297,0.5104,-0.5104v-18.088l7.6585,7.6695c0.1259,0.1261,0.3415,0.0369,0.3415,-0.1413v-6.2525c0,-0.2125,-0.0845,-0.4162,-0.2349,-0.5663l-9.934,-9.9139c-0.2999,-0.2654,-0.4015,-0.2654,-0.6944,0.0157L5.235,12.0908c-0.1504,0.1501,-0.235,0.3539,-0.235,0.5664v6.2414c0,0.1782,0.2154,0.2674,0.3414,0.1414L13,11.3814z</Geometry>
in XAML
<Image Height="100" Width="100">
<Image.Source>
<DrawingImage >
<DrawingImage.Drawing>
<GeometryDrawing Brush="#3E79B4" Geometry="{StaticResource StopGeometry}"/>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
