How to make VisualBrush-icons in WPF stretch the same way
up vote
1
down vote
favorite
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 2 hours ago
drvolcano
908
|
show 3 more comments
up vote
1
down vote
favorite
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 2 hours ago
drvolcano
908
useStretch="Fill"?
– ASh
2 hours ago
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
2 hours ago
ASh, thanks for you support. I added this point to my question.
– drvolcano
2 hours ago
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
2 hours ago
Clemens, thats a good idea,<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.
– drvolcano
2 hours ago
|
show 3 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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 2 hours ago
drvolcano
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 2 hours ago
drvolcano
908
asked 2 hours ago
drvolcano
908
edited 2 hours ago
asked 2 hours ago
drvolcano
908
asked 2 hours ago
drvolcano
908
asked 2 hours ago
drvolcano
908
908
useStretch="Fill"?
– ASh
2 hours ago
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
2 hours ago
ASh, thanks for you support. I added this point to my question.
– drvolcano
2 hours ago
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
2 hours ago
Clemens, thats a good idea,<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.
– drvolcano
2 hours ago
|
show 3 more comments
useStretch="Fill"?
– ASh
2 hours ago
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
2 hours ago
ASh, thanks for you support. I added this point to my question.
– drvolcano
2 hours ago
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
2 hours ago
Clemens, thats a good idea,<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.
– drvolcano
2 hours ago
use
Stretch="Fill"?– ASh
2 hours ago
use
Stretch="Fill"?– ASh
2 hours ago
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
2 hours ago
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
2 hours ago
ASh, thanks for you support. I added this point to my question.
– drvolcano
2 hours ago
ASh, thanks for you support. I added this point to my question.
– drvolcano
2 hours ago
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
2 hours ago
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
2 hours ago
Clemens, thats a good idea,
<Rectangle Width="24" Height="24" Fill="Transparent" /> does the trick.– drvolcano
2 hours ago
Clemens, thats a good idea,
<Rectangle Width="24" Height="24" Fill="Transparent" /> does the trick.– drvolcano
2 hours ago
|
show 3 more comments
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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
2 hours ago
Already tried all of the possible stretch-variants. It gets even worse, because the icons simply get wider
– drvolcano
2 hours ago
ASh, thanks for you support. I added this point to my question.
– drvolcano
2 hours ago
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
2 hours ago
Clemens, thats a good idea,
<Rectangle Width="24" Height="24" Fill="Transparent" />does the trick.– drvolcano
2 hours ago