Что уже работает:
Я хочу использовать SVG-иконки в своих приложениях.Поэтому я скачал несколько иконок из Material.io и преобразовал их с помощью Inkscape в файлы XAML.
Содержимое этих файлов затем используется в <VisualBrush> как <Rectangle.OpacityMask>.Поступая так, я могу менять цвет переднего и заднего фона по своему желанию.Это важно, потому что я хочу иметь возможность изменять цвет значков, не изменяя их дизайн.
VisualBrushes и цвета находятся в словаре ресурсов в реальном приложении, но для лучшего объяснения я скопировал все вместе в одном окне..
Пример кода:
<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>
Ват не работает:
Значения масштабируются по-разному, как яхочу.
Если я использую <VisualBrush Stretch="None">, все значки имеют одинаковый размер, но они не увеличиваются в размере, когда я увеличиваю свои прямоугольники.Это именно то, что я ожидаю от Stretch = "None", но не то, что мне нужно.
Если я использую <VisualBrush Stretch="Uniform"> значки масштабируются до размера прямоугольника, но они становятся слишком большими и различаются по размеру.(«шеврон» намного больше, чем значок «экспорт»).Я думаю, что VisualBrush игнорирует размер Canvas и Path и вместо этого использует размер видимой части пути.
Другие варианты растяжения, такие как Fill, также не работают:
ЧтоМне нужно:
Значки должны расти и уменьшаться с размером прямоугольника, как обычные значки.Но они должны расти / светиться в одинаковом соотношении.
Вопрос:
Есть ли возможностьнастройки, которые дают мне желаемое поведение?
Бонус:
Я хочу достичь желаемой функциональности без переделки ViewBox или его содержимого, потому что это автоматически сгенерированный код из Inkscape.
Полный код моей тестовой страницы:
<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>