DrawingImages as Ressouces for buttons

[markusalbrecht-procam]

Hi,
I am looking for any sample how to use DrawingImages within a ressource file so we can reuse those in our menus.
We are currently using SVG Images as source but the problem is that those cannot be used with theming colors foreground/background therefor we need to swtich to DrawingImage.

The plan is to create a ressource file with all the icons e.g.: like we did in WPF:

<Style x:Key="Win11NewFolder" TargetType="{x:Type ContentControl}">
	<Setter Property="ContentTemplate">
		<Setter.Value>
			<DataTemplate>
				<Viewbox>
					<Image Width="48" Height="48" RenderOptions.BitmapScalingMode="HighQuality">
						<Image.Source>
							<DrawingImage>
								<DrawingImage.Drawing>
									<DrawingGroup ClipGeometry="M0,0 V60 H60 V0 H0 Z">
										<DrawingGroup Opacity="1">
											<GeometryDrawing Brush="#FFC68B00" Geometry="F1 M60,60z M0,0z M59,19L59,11A4,4,0,0,0,55,7L28.472,7C26.957,7,25.572,6.144,24.894,4.789L24.105,3.211A4.001,4.001,0,0,0,20.527,1L5,1A4,4,0,0,0,1,5L1,25 58,25z"/>
											<GeometryDrawing Brush="#FFE8ECEF" Geometry="F1 M60,60z M0,0z M54,24L54,13A2,2,0,0,0,52,11L8,11A2,2,0,0,0,6,13L6,24z"/>
											<GeometryDrawing Brush="#f0ca95" Geometry="F1 M60,60z M0,0z M59,19L59,49A4,4,0,0,1,55,53L5,53A4,4,0,0,1,1,49L1,25A4,4,0,0,1,5,21L31.528,21C33.043,21,34.428,20.144,35.106,18.789L35.895,17.211A4.001,4.001,0,0,1,39.473,15L55.001,15A4,4,0,0,1,59.001,19z"/>
											<GeometryDrawing Brush="#FF1E88E5">
												<GeometryDrawing.Geometry>
													<EllipseGeometry Center="30,43" RadiusX="16" RadiusY="16"/>
												</GeometryDrawing.Geometry>
											</GeometryDrawing>
											<GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M60,60z M0,0z M40,42L40,44C40,44.55,39.55,45,39,45L32,45 32,52C32,52.55,31.55,53,31,53L29,53C28.45,53,28,52.55,28,52L28,45 21,45C20.45,45,20,44.55,20,44L20,42C20,41.45,20.45,41,21,41L28,41 28,34C28,33.45,28.45,33,29,33L31,33C31.55,33,32,33.45,32,34L32,41 39,41C39.55,41,40,41.45,40,42z"/>
										</DrawingGroup>
									</DrawingGroup>
								</DrawingImage.Drawing>
							</DrawingImage>
						</Image.Source>
					</Image>
				</Viewbox>
			</DataTemplate>
		</Setter.Value>
	</Setter>
</Style>

Those can then be bound to the ImageSource of Buttons via the Key for example:

The problem is I did not find any explanation how this should look like in AvaloniaUI axaml ressources. Is anyone doing something already or having any simple sample how this can be approached ?

[BreakByBrick]

Hello!

You can use your DrawingImage as a resource for multiple Images. For example, define it with a key, and use it according to the given key.
You can also bind Brush to the desired dynamic resource associated with the current theme.

<ResourceDictionary xmlns="https://github.com/avaloniaui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    x:ClassModifier="internal">

        <!--Adding a resource-->
	<DrawingImage x:Key="MyImageSource">
		<DrawingImage.Drawing>
			<GeometryDrawing Brush="{DynamicResource Theme.PathIcon.ForegroundBrush}"
							 Geometry="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z" />
		</DrawingImage.Drawing>
	</DrawingImage>

</ResourceDictionary>

--------------------------------

<!--Using resource-->
<Image Source="{StaticResource MyImageSource}"/>