Question

已在做什么：

我想在我的应用程序中使用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>

Wat不起作用：

图标按我想要的方式缩放。

如果我使用<VisualBrush Stretch="None">，则图标的大小都相同，但是当我将矩形变大时，它们的大小不会增加。那正是我对Stretch =“ None”的期望，但不是我所需要的。
如果我使用<VisualBrush Stretch="Uniform">，则图标会按比例放大到矩形大小，但它们会变得太大，并且大小会有所不同。（“人字形”比“导出”图标大得多）。我认为VisualBrush忽略了Canvas和Path的大小，而是使用路径的 visible 部分的大小。
诸如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>

如何以相同方式拉伸WPF中的VisualBrush图标

0 个答案: