2009-08-22 12 views
6

Des suggestions sur la façon de créer une image vectorielle XAML en tant qu'arrière-plan de fenêtre? Il y a beaucoup de code montrant cela avec jpg mais je préfère une image vectorielle. L'avoir en tant que ressource serait un bonus aussi, mais je suis perplexe quant à la meilleure approche.Utilisation d'une image XAML en tant que fond de fenêtre WPF

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

Le code de ressource ci-dessus fonctionne correctement si vous supprimez la Viewbox. Le code de la fenêtre est: -

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

Répondre

5

Essayez cette

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

Vous devrez juste faire quelques changements pour déplacer la ressource vers votre dictionnaire de ressources si abs absolument nécessaire.

+0

Acclamations Simon, j'avais presque abandonné celui-ci. Votre solution a fonctionné la première fois. J'envisage maintenant de le déplacer vers un dictionnaire de ressources afin que je puisse avoir une sélection d'arrière-plans sélectionnables par l'utilisateur. Merci encore. – Mitch

1

Beaucoup d'outils, y compris Illustrator, vous permettent d'exporter des images dans différents formats XAML. Votre objectif idéal est un ResourceDictionary qui contient un panneau Canvas ou Grid, qui contient votre image vectorielle. Ensuite, vous pouvez référencer le dictionnaire dans votre Window.Resources et simplement ajouter le panneau d'image (qui est un Canvas ou Grid) à votre panneau de fenêtre de niveau supérieur.

donc votre fichier XAML d'image doit ressembler à ceci:

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

Ensuite, dans votre Window vous devriez avoir quelque chose comme:

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

Salut Charlie, ça marche un peu mais la taille du Canevas est fixe et j'en ai besoin pour redimensionner avec la fenêtre. Auparavant, j'avais mis le canevas dans une Viewbox avec Stretch = "Fill" afin qu'il soit redimensionné, mais je ne suis pas sûr de savoir comment l'adapter en utilisant votre méthode. Des idées? – Mitch

+0

Vous pouvez toujours envelopper le canevas dans une Viewbox. Faites de la Viewbox l'élément supérieur de votre ResourceDictionary et donnez-lui un nom à la place du Canvas. – Charlie

+0

J'ai essayé de faire de la Viewbox l'élément supérieur, mais il ne s'affiche plus du tout. Très étrange .. – Mitch

Questions connexes