How to make VisualBrush-icons in WPF stretch the same way
1
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>
wpf stretch visualbrush opacitymask
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
|
show 5 more comments
1
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>
wpf stretch visualbrush opacitymask
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
useStretch="Fill"?
– ASh
Nov 19 '18 at 8:43
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
Nov 19 '18 at 8:47
ASh, thanks for you support. I added this point to my question.
– drvolcano
Nov 19 '18 at 8:51
1
What about adding a Transparent Background to the Canvas and thus make it "render" its 24x24 area? Would make sense of course only when the Paths aren't larger than the area.
– Clemens
Nov 19 '18 at 8:52
Clemens, thats a good idea,<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.
– drvolcano
Nov 19 '18 at 9:07
|
show 5 more comments
1
1
1
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>
wpf stretch visualbrush opacitymask
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
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>
wpf stretch visualbrush opacitymask
wpf stretch visualbrush opacitymask
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
edited Nov 19 '18 at 8:50
drvolcano
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
asked Nov 19 '18 at 8:40
drvolcanodrvolcano
908
908
useStretch="Fill"?
– ASh
Nov 19 '18 at 8:43
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
Nov 19 '18 at 8:47
ASh, thanks for you support. I added this point to my question.
– drvolcano
Nov 19 '18 at 8:51
1
What about adding a Transparent Background to the Canvas and thus make it "render" its 24x24 area? Would make sense of course only when the Paths aren't larger than the area.
– Clemens
Nov 19 '18 at 8:52
Clemens, thats a good idea,<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.
– drvolcano
Nov 19 '18 at 9:07
|
show 5 more comments
useStretch="Fill"?
– ASh
Nov 19 '18 at 8:43
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
Nov 19 '18 at 8:47
ASh, thanks for you support. I added this point to my question.
– drvolcano
Nov 19 '18 at 8:51
1
What about adding a Transparent Background to the Canvas and thus make it "render" its 24x24 area? Would make sense of course only when the Paths aren't larger than the area.
– Clemens
Nov 19 '18 at 8:52
Clemens, thats a good idea,<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.
– drvolcano
Nov 19 '18 at 9:07
use
Stretch="Fill"?– ASh
Nov 19 '18 at 8:43
use
Stretch="Fill"?– ASh
Nov 19 '18 at 8:43
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
Nov 19 '18 at 8:47
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
Nov 19 '18 at 8:47
ASh, thanks for you support. I added this point to my question.
– drvolcano
Nov 19 '18 at 8:51
ASh, thanks for you support. I added this point to my question.
– drvolcano
Nov 19 '18 at 8:51
1
1
What about adding a Transparent Background to the Canvas and thus make it "render" its 24x24 area? Would make sense of course only when the Paths aren't larger than the area.
– Clemens
Nov 19 '18 at 8:52
What about adding a Transparent Background to the Canvas and thus make it "render" its 24x24 area? Would make sense of course only when the Paths aren't larger than the area.
– Clemens
Nov 19 '18 at 8:52
Clemens, thats a good idea,
<Rectangle Width="24" Height="24" Fill="Transparent" /> does the trick.– drvolcano
Nov 19 '18 at 9:07
Clemens, thats a good idea,
<Rectangle Width="24" Height="24" Fill="Transparent" /> does the trick.– drvolcano
Nov 19 '18 at 9:07
|
show 5 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370977%2fhow-to-make-visualbrush-icons-in-wpf-stretch-the-same-way%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370977%2fhow-to-make-visualbrush-icons-in-wpf-stretch-the-same-way%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
use
Stretch="Fill"?– ASh
Nov 19 '18 at 8:43
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
Nov 19 '18 at 8:47
ASh, thanks for you support. I added this point to my question.
– drvolcano
Nov 19 '18 at 8:51
1
What about adding a Transparent Background to the Canvas and thus make it "render" its 24x24 area? Would make sense of course only when the Paths aren't larger than the area.
– Clemens
Nov 19 '18 at 8:52
Clemens, thats a good idea,
<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.– drvolcano
Nov 19 '18 at 9:07