使用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> 

上面的資源代碼工作正常，如果您刪除視框。該窗口的代碼是： -

<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> 

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> 

如果是abs，你只需要進行一些修改即可將資源移動到資源字典中毫無必要。

Answer 2

很多工具（包括Illustrator）都允許您以不同格式導出XAML圖像。您的理想目標是ResourceDictionary，其中包含一個Canvas或Grid面板，其中包含您的矢量圖像。然後，您可以參考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>