What's already working:
I want to use SVG-icons in my applications. So I have downloaded a few icons from Material.io and converted them with Inkscape into XAML files.
The content of these files is then used in a <VisualBrush> as a <Rectangle.OpacityMask>.
By doing so I can change foreground and backfground color as I wish.
Thats important because I want to be able change icon color as, without thaving to redesign them.
The VisualBrushes and colors are in a resources dictionary in the real application, but for better explanation I copied all together in one window.
Example code:
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="24" Height="24" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<!-- from SVG (baseline-chevron_right-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data >
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero" />
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
Wat's not working:
The icons scale in a different way as I want.
If I use
<VisualBrush Stretch="None">, the icons all have the same size, but they dont increase in size, when I make my rectangles bigger. Thats exactly what I expect from Stretch = "None", but not what I need.
If I use
<VisualBrush Stretch="Uniform">, the icons scale up to the rectangle size but they get too big, and vary in size. (the "chevron" is way bigger than the "export" icon). I think the VisualBrush is ignoring the size of the Canvas and Path, and instead using the size of visible part of the path.
Other variants of stretch like Fill also dont work:
What I need:
The icons should grow and shrink with rectangle size, as normal icons would do. But they should grow/shink at the same ratio.
Question:
Is there a possible setting that gets me the desired behavior?
Bonus:
I want to achieve the desired functionality without reworking the ViewBox or its content, because thats autogenerated code from Inkscape.
Full code of my testing page:
<Window x:Class="Testprojekt.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Testprojekt"
mc:Ignorable="d"
Title="MainWindow" WindowStyle="None" Width="88" Height="200" FontSize="8" >
<Grid >
<StackPanel >
<Label>Stretch="None"</Label>
<!-- Rectangle size = SVG-size , Stretch="None" -->
<StackPanel Orientation="Horizontal">
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="24" Height="24" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<!-- from SVG (baseline-chevron_right-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data>
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="24" Height="24" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<!-- from SVG (baseline-save_alt-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data>
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</StackPanel>
<!-- Rectangle size > SVG-size , Stretch="None" -->
<StackPanel Orientation="Horizontal">
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="32" Height="32" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<!-- from SVG (baseline-chevron_right-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data>
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="32" Height="32" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<!-- from SVG (baseline-save_alt-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data>
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</StackPanel>
<Label>Stretch="Uniform"</Label>
<!-- Rectangle size = SVG-size , Stretch="Uniform" -->
<StackPanel Orientation="Horizontal">
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="24" Height="24" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<!-- from SVG (baseline-chevron_right-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data >
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero" />
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="24" Height="24" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<!-- from SVG (baseline-save_alt-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path.Data>
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</StackPanel>
<!-- Rectangle size > SVG-size , Stretch="Uniform" -->
<StackPanel Orientation="Horizontal">
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="32" Height="32" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<!-- from SVG (baseline-chevron_right-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Path.Data >
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero" />
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<Grid Background="Green" Margin="4">
<Rectangle Fill="Blue" Width="32" Height="32" >
<Rectangle.OpacityMask>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<!-- from SVG (baseline-save_alt-24px)-->
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
<Canvas Width="24" Height="24">
<Canvas.RenderTransform>
<TranslateTransform X="0" Y="0"/>
</Canvas.RenderTransform>
<Canvas.Resources/>
<!--Unknown tag: metadata-->
<!--Unknown tag: sodipodi:namedview-->
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Fill="#000000" Width="24" Height="24">
<Path.Data>
<PathGeometry Figures="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" FillRule="NonZero"/>
</Path.Data>
</Path>
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Path.Data>
<PathGeometry Figures="M0 0h24v24H0z" FillRule="NonZero"/>
</Path.Data>
</Path>
</Canvas>
</Viewbox>
<!-- end from SVG-->
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
</StackPanel>
</StackPanel>
</Grid>