1

什么已经在起作用:

我想在我的应用程序中使用 SVG 图标。所以我从 Material.io 下载了一些图标,并使用 Inkscape 将它们转换为 XAML 文件。

然后将这些文件的内容<VisualBrush>用作 a <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 忽略了画布和路径的大小,而是使用路径可见部分的大小。

    拉伸=

  • 其他拉伸变体(如填充)也不起作用:

    在此处输入图像描述

我需要的:

图标应该像普通图标一样随着矩形大小而增长和缩小。但它们应该以相同的比例增长/缩小。

想要的行为

问题:

是否有可能的设置让我获得所需的行为?

奖金:

我想在不修改 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>

4

0 回答 0