使用XAML图像作为WPF窗口背景

Question

有没有什么建议可以将XAML矢量图像作为窗口背景？有很多代码显示如何使用jpg，但我更喜欢基于矢量的图像。

如果可以将其作为资源，则会更好，但我对最佳方法感到困惑。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Viewbox x:Key="Background2" Stretch="Fill">
        <Canvas >
            <!-- Ebene 1/<Path> -->
            <Path Fill="#ff000000" Data="F1 M 841.890,595.275 L 0.000,595.275 L 0.000,0.000 L 841.890,0.000 L 841.890,595.275 Z"/>
            <!-- Ebene 1/<Path> -->
            <Path Data="F1 M 265.910,218.277 C 265.910,169.332 223.865,129.655 172.000,129.655 C 120.135,129.655 78.090,169.332 78.090,218.277 C 78.090,267.222 120.135,306.898 172.000,306.898 C 223.865,306.898 265.910,267.222 265.910,218.277 Z">
                <Path.Fill>
                    <RadialGradientBrush MappingMode="Absolute" GradientOrigin="172.733,217.234" Center="172.733,217.234" RadiusX="81.912" RadiusY="81.912">
                        <RadialGradientBrush.GradientStops>
                            <GradientStop Offset="0.00" Color="#ff0d4976"/>
                            <GradientStop Offset="0.41" Color="#ff06243b"/>
                            <GradientStop Offset="1.00" Color="#ff000000"/>
                        </RadialGradientBrush.GradientStops>
                        <RadialGradientBrush.Transform>
                            <MatrixTransform Matrix="1.146,0.000,0.000,1.082,-26.038,-16.750" />
                        </RadialGradientBrush.Transform>
                    </RadialGradientBrush>
                </Path.Fill>
            </Path>
        </Canvas>
    </Viewbox>
</ResourceDictionary>

如果您移除Viewbox，上面的资源代码将正常工作。窗口的代码如下：

  <Window x:Class="Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window2" Height="700" Width="800">
        <Window.Resources>
            <ResourceDictionary Source="Resources/Dictionary2.xaml" />
        </Window.Resources>
        <Grid>
         <StaticResource ResourceKey="Background2"/>   
        </Grid>
    </Window>

- Mitch

Answer 1

试试这个

<Window.Resources>
    <Canvas x:Key="Background2">
        <!-- Ebene 1/<Path> -->
        <Path Fill="#ff000000" Data="F1 M 841.890,595.275 L 0.000,595.275 L 0.000,0.000 L 841.890,0.000 L 841.890,595.275 Z"/>
        <!-- Ebene 1/<Path> -->
        <Path Data="F1 M 265.910,218.277 C 265.910,169.332 223.865,129.655 172.000,129.655 C 120.135,129.655 78.090,169.332 78.090,218.277 C 78.090,267.222 120.135,306.898 172.000,306.898 C 223.865,306.898 265.910,267.222 265.910,218.277 Z">
            <Path.Fill>
                <RadialGradientBrush MappingMode="Absolute"
                           GradientOrigin="172.733,217.234"
                           Center="172.733,217.234"
                           RadiusX="81.912" RadiusY="81.912">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Offset="0.00" Color="#ff0d4976"/>
                        <GradientStop Offset="0.41" Color="#ff06243b"/>
                        <GradientStop Offset="1.00" Color="#ff000000"/>
                    </RadialGradientBrush.GradientStops>
                    <RadialGradientBrush.Transform>
                        <MatrixTransform 
                             Matrix="1.146,0.000,0.000,1.082,-26.038,-16.750" />
                    </RadialGradientBrush.Transform>
                </RadialGradientBrush>
            </Path.Fill>
        </Path>
    </Canvas>
</Window.Resources>

<Grid >
    <Grid.Background>
        <VisualBrush Stretch="Fill" Visual="{StaticResource Background2}" />
    </Grid.Background>
</Grid>

如果绝对必要，您只需要进行一些更改，将该资源移动到您的资源字典中即可。

- Simon Fox

---

谢谢Simon，我差点放弃了。你的解决方案一次就成功了。我现在考虑将其移动到资源字典中，这样我就可以选择用户可选的背景。再次感谢。 - Mitch

Answer 2

很多工具，包括Illustrator，在不同的格式中允许您导出XAML图像。您的理想目标是一个包含Canvas或Grid面板的ResourceDictionary，其中包含您的矢量图像。然后，您可以在Window.Resources中引用该字典，并将图像面板（即Canvas或Grid）简单地添加到顶级窗口面板中。

因此，您的图像.XAML文件需要类似于以下内容：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Canvas x:Name="MyXamlImage">
        ...
    </Canvas>
</ResourceDictionary>

然后在你的Window中应该有类似这样的内容：

<Window x:Class="YourNamespace.YourWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="YourWindow" Height="300" Width="300">
    <Window.Resources>
        <ResourceDictionary Source="MyResourceDictionary.xaml">
    </Window.Resources>
    <Grid>
        <StaticResource ResourceKey="MyXamlImage"/>
        ...
    </Grid>
</Window>

- Charlie

---

嗨，Charlie，那个方法有点用，但画布的大小是固定的，我需要它随着窗口的大小调整。以前我把画布放在一个Stretch="Fill"的Viewbox中，所以它可以自动调整大小，但我不知道如何使用你的方法来适应这种情况。有什么想法吗？ - Mitch

你仍然可以将 Canvas 包装在 Viewbox 中。只需将 Viewbox 设置为 ResourceDictionary 的顶部元素，并给它一个名称，而不是 Canvas。 - Charlie

尝试将Viewbox设置为顶层元素，但现在它根本不显示。非常奇怪... - Mitch

添加了一些示例代码。我必须使用x:Key而不是x:Name，否则会出现错误“添加到IDictionary的所有对象都必须具有Key属性或其他类型的关键字与它们相关联。”在Canvas中一切正常，但当我用Viewbox包装它时，什么也没有显示。 - Mitch