Folks, in a video I saw a few weeks ago I learned that the Visual Studio team uses XAML for most of their images, not png or similar. I'm keen to do the same because I imagine that I would no longer need tedious sets of 16x16 32x32 48x48 ... etc images because each XAML file is composed from scalable geometry elements that would look good at any size. I downloaded the Image Library <https://www.microsoft.com/en-us/download/details.aspx?id=35825> which contains thousands of XAML, png and svg sets of standard images. But I can't figure out how to *simply* use the XAML files in a WPF app. All the examples I can find seem to have pasted the contents of the XAML images into resource files and then reference them by x:Key. I don't want to manually paste XAML around like that, I just want to add a file like *FolderClosedBlue.xaml* (for example) to my project and use it as the icon for a menu or button as simply as possible. How can I replace this sort of thing?... <MenuItem Header="_Foo Command" Command="..."> <MenuItem.Icon> < use the XAML image file somehow instead of a resource png? > </MenuItem.Icon> </MenuItem> Is there some coding trick I'm not aware of to *simply* use an image defined in a XAML file in my app? Cheers, *Greg K*
Hi Greg, I’m going to make a few assumptions here.. First up is that the “image” is a Path element defined in a resource dictionary which is then inside the xaml file. Next up, the path element will need to have a name defined using x:key=”nameofresourcehere” <ResourceDictionary> <Path x:Key=”MyXamlImage” …. /> </ ResourceDictionary > Once you have this, then in the xaml file you want the image to be included in, you’ll need to import the resource, it’s a bit verbose but it will be along the lines of <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergeDictionary> <ResourceDictionary Source=”PathToFileWithImage.xaml”/> </ResourceDictionary.MergeDictionary> </ResourceDictionary> </Window.Resources> Then to use it, <MenuItem…. Icon=”{StaticResource MyXamlImage}”> </MenuItem> Hope this helps. Ed. From: Greg Keogh via ozdotnet <ozdotnet@ozdotnet.com> Sent: Sunday, July 28, 2024 5:57 PM To: ozDotNet <ozdotnet@ozdotnet.com> Cc: Greg Keogh <gfkeogh@gmail.com> Subject: XAML images in WPF? Folks, in a video I saw a few weeks ago I learned that the Visual Studio team uses XAML for most of their images, not png or similar. I'm keen to do the same because I imagine that I would no longer need tedious sets of 16x16 32x32 48x48 ... etc images because each XAML file is composed from scalable geometry elements that would look good at any size. I downloaded the Image Library <https://www.microsoft.com/en-us/download/details.aspx?id=35825> which contains thousands of XAML, png and svg sets of standard images. But I can't figure out how to simply use the XAML files in a WPF app. All the examples I can find seem to have pasted the contents of the XAML images into resource files and then reference them by x:Key. I don't want to manually paste XAML around like that, I just want to add a file like FolderClosedBlue.xaml (for example) to my project and use it as the icon for a menu or button as simply as possible. How can I replace this sort of thing?... <MenuItem Header="_Foo Command" Command="..."> <MenuItem.Icon> < use the XAML image file somehow instead of a resource png? > </MenuItem.Icon> </MenuItem> Is there some coding trick I'm not aware of to simply use an image defined in a XAML file in my app? Cheers, Greg K
The Visual Studio Image Library distributes xaml icons with a root element of Viewbox. It's possible to refer to the PNG files directly with <Image Source="..."> but I'm not sure you can refer to the Viewbox xaml files directly, though maybe there's a pack URI dark magic incantation. You could build each icon file as a resource in the assembly and load the Viewbox instance directly with using Application.GetResourceStream() and XamlReader.Load() and set MenuItem.Icon with a little bit of reusable code. e.g. https://learn.microsoft.com/en-us/dotnet/desktop/wpf/app-development/wpf-app... Back when I was working with WPF more (and if I recall correctly) the image resources were defined in our code as DrawingImage/GeometryDrawing instead of Viewbox, which you could bind to Image.Source, there may be a tool out there to convert those VS files. The markup method though is as you suggest, throw all viewbox elements into a ResourceDictionary and give each viewbox a resource key, then merge that resource dictionary into Window.Resources of each window xaml definition, or if you don't want to do that for each window add them to the app resources in the App.xaml file. The resource dictionary option looks like this: MyResourceDictionary.xaml - <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Viewbox x:Key="AddDocument" x:Shared="false" ... /> </ResourceDictionary> MainWindow.xaml - <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="MyResourceDictionary.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <DockPanel> <Menu DockPanel.Dock="Top"> <MenuItem Header="_File" > <MenuItem Header="_New" Icon="{StaticResource AddDocument}" /> </MenuItem> </Menu> </DockPanel> cheers, Tony On 28/07/2024 17:56, Greg Keogh via ozdotnet wrote:
Folks, in a video I saw a few weeks ago I learned that the Visual Studio team uses XAML for most of their images, not png or similar. I'm keen to do the same because I imagine that I would no longer need tedious sets of 16x16 32x32 48x48 ... etc images because each XAML file is composed from scalable geometry elements that would look good at any size.
I downloaded the Image Library <https://www.microsoft.com/en-us/download/details.aspx?id=35825> which contains thousands of XAML, png and svg sets of standard images. But I can't figure out how to /simply/ use the XAML files in a WPF app. All the examples I can find seem to have pasted the contents of the XAML images into resource files and then reference them by x:Key. I don't want to manually paste XAML around like that, I just want to add a file like *FolderClosedBlue.xaml* (for example) to my project and use it as the icon for a menu or button as simply as possible. How can I replace this sort of thing?...
<MenuItem Header="_Foo Command" Command="..."> <MenuItem.Icon> < use the XAML image file somehow instead of a resource png? > </MenuItem.Icon> </MenuItem>
Is there some coding trick I'm not aware of to /simply/ use an image defined in a XAML file in my app?
Cheers, /Greg K/
Chaps et al, After a few hours of experiments I have come to a waypoint decision on XAML images. There is no *simple* one-liner way of using an image defined as geometries in a XAML fragment. Tersely, for my mental records and in case it helps others, here's what I found: The image library provides images in this sample format where the outer XAML defines a Viewbox <Viewbox Width="16" Height="16" ...> <Rectangle Width="16 " Height="16"> *<... resources and drawing elements ...>* </Rectangle> </Viewbox> I copied some XAML files into a Resources folder and set all their Build Action to Resource. Unfortunately, a bit of convert code is required to convert the XAML into an actal Viewbox to be added to the visual tree. This is the core of my converter code: string uri = $"Resources/{name}.xaml"; var stream = Application.GetResourceStream(new Uri(uri, UriKind.Relative)).Stream; var viewBox = (Viewbox)XamlReader.Load(stream); viewBox.Height = double.NaN; viewBox.Width = double.NaN; return viewBox; The Width and Height are *unset*, otherwise they always render at 16x16. I then combine the resources and the convert in code like this, in a MenuItem for example: <MenuItem Header="_Open" Command="ApplicationCommands.Open"> <MenuItem.Icon> <*ContentControl Content="{Binding Converter={StaticResource AppConverter},ConverterParameter=FromXaml|OpenFolder}"* Style="{StaticResource XamlIconStyle}"/> </MenuItem.Icon> </MenuItem> The bold bit is the trick. This all works as I hoped, and the menu icons display nicely, and I can draw an image as 80x80 and it also displays scaled and crisp: [image: image.png] *Good news* -- This is a neat way of adding scalable images to your app, removing the need for sets of different sizes. *Bad news* -- The WPF designer randomly shows an error after editing the XAML as I did above. I sometimes see squiggly warning lines, but there is nothing wrong. I often must click *reload the designer* link and it all displays correctly again. *Worse news* -- I used the XAML icons in TreeView nodes where there could be large numbers of repeated icons, so I put them in a simple Dictionary cache. A Viewbox can only be in one place in the visual tree, so each icon appears in the tree once, making caching useless and producing this effect: [image: image.png] In summary, for now I will only use XAML images where I really need scalable images, maybe inside Buttons, Toolbars or artwork. Otherwise I'll stick to png for basic menus and tree nodes. I'm sure there are techniques for efficiently using XAML images everywhere, but my attention span is expiring. *Greg K*
TGIF everyone, I have an update for my comments last Tuesday about using XAML images in WPF apps. I noticed that the WPF designer would randomly report errors when I started using XAML images. This glitch has become so serious that it's crippling my productivity and I'm backing-out the XAML and returning to plain PNG instead. The designer is incapable of showing the XAML images by any trick I've tried. They appear as fat border placeholders with strange sizes, or they're collapsed, or the designer shows error text "Cannot locate resource" even though I know the resource is correctly defined. Other times it suggests I need to build to create assemblies for the designer even though it's freshly rebuilt. I've tried defining the images via a converter, via a MarkupExtension and via a class derived from ContentControl which sets its content from the XAML. It makes no difference. I'm sure I saw Mads say in a video that Visual Studio now uses XAML images everywhere ... so what's the trick or technique? *Greg K*
participants (3)
-
eddie.debear＠gmail.com -
Greg Keogh -
Tony McGee