WPF Qual è il modo corretto di utilizzare i file SVG come icone in WPF

Question

Qualcuno può descrivere una procedura Step by Step consigliata per fare ciò?

MODIFICA:

Step1. Converti SVG in XAML ... è facile

Step2. Ora cosa?

Answer 1

La tua tecnica dipenderà da quale oggetto XAML produce il tuo convertitore SVG in XAML. Produce un disegno? Un'immagine? Una griglia? Una tela? Un sentiero? Una geometria? In ogni caso la tua tecnica sarà diversa.

Negli esempi che seguono presumo che si stia utilizzando l'icona su un pulsante, che è lo scenario più comune, ma si noti che le stesse tecniche funzioneranno con qualsiasi ContentControl.

Utilizzando un disegno come icona

Per usare un disegno, dipingere un rettangolo approriately dimensioni con un DrawingBrush:

<Button> 
    <Rectangle Width="100" Height="100"> 
    <Rectangle.Fill> 
     <DrawingBrush> 
     <DrawingBrush.Drawing> 

      <Drawing ... /> <!-- Converted from SVG --> 

     </DrawingBrush.Drawing> 
     </DrawingBrush> 
    </Rectangle.Fill> 
    </Rectangle> 
</Button> 

utilizzando un'immagine come icona

Un'immagine può essere utilizzata direttamente:

<Button> 
    <Image ... /> <!-- Converted from SVG --> 
</Button> 

utilizzando una griglia come icona

Una griglia può essere utilizzato direttamente:

<Button> 
    <Grid ... /> <!-- Converted from SVG --> 
</Button> 

Oppure si può includere in un Viewbox se avete bisogno di controllare la dimensione:

<Button> 
    <Viewbox ...> 
    <Grid ... /> <!-- Converted from SVG --> 
    </Viewbox> 
</Button> 

Utilizzo di una tela come icona

Questo è come utilizzare un'immagine o griglia, ma dal momento che una tela non ha dimensione fissa è necessario specificare l'altezza e la larghezza (a meno che questi sono già impostati dal convertitore SVG):

<Button> 
    <Canvas Height="100" Width="100"> <!-- Converted from SVG, with additions --> 
    </Canvas> 
</Button> 

utilizzando un percorso come un'icona

È possibile utilizzare un percorso, ma è necessario impostare il tratto o riempimento in modo esplicito:

<Button> 
    <Path Stroke="Red" Data="..." /> <!-- Converted from SVG, with additions --> 
</Button> 

o

<Button> 
    <Path Fill="Blue" Data="..." /> <!-- Converted from SVG, with additions --> 
</Button> 

Usando una forma geometrica come un'icona

È possibile utilizzare un percorso per disegnare la geometria.Se dovesse essere accarezzato, impostare la corsa:

<Button> 
    <Path Stroke="Red" Width="100" Height="100"> 
    <Path.Data> 
     <Geometry ... /> <!-- Converted from SVG --> 
    </Path.Data> 
    </Path> 
</Button> 

o se deve essere riempito, impostare il riempimento:

<Button> 
    <Path Fill="Blue" Width="100" Height="100"> 
    <Path.Data> 
     <Geometry ... /> <!-- Converted from SVG --> 
    </Path.Data> 
    </Path> 
</Button> 

Come i dati legare

Se stai facendo la conversione SVG -> XAML nel codice e desidera che XAML risultante venga visualizzato utilizzando l'associazione dati, utilizzare uno dei seguenti:

Associazione di un disegno:

<Button> 
    <Rectangle Width="100" Height="100"> 
    <Rectangle.Fill> 
     <DrawingBrush Drawing="{Binding Drawing, Source={StaticResource ...}}" /> 
    </Rectangle.Fill> 
    </Rectangle> 
</Button> 

Binding di un'immagine:

<Button Content="{Binding Image}" /> 

Binding una griglia:

<Button Content="{Binding Grid}" /> 

Binding una griglia in un Viewbox:

<Button> 
    <Viewbox ...> 
    <ContentPresenter Content="{Binding Grid}" /> 
    </Viewbox> 
</Button> 

Binding tela:

<Button> 
    <ContentPresenter Height="100" Width="100" Content="{Binding Canvas}" /> 
</Button> 

Associazione di un percorso:

<Button Content="{Binding Path}" /> <!-- Fill or stroke must be set in code unless set by the SVG converter --> 

Binding una geometria:

<Button> 
    <Path Width="100" Height="100" Data="{Binding Geometry}" /> 
</Button> 

Answer 2

È possibile utilizzare l'xaml risultante dall'SVG come pennello da disegno su un rettangolo. Qualcosa del genere:

<Rectangle> 
    <Rectangle.Fill> 
     --- insert the converted xaml's geometry here --- 
    </Rectangle.Fill> 
</Rectangle> 

Answer 3

ho trovato il modo migliore per me di utilizzare svg icona in WPF. Io uso sharpvector quadro:

Install-Package SharpVectors 

Quindi il mio XAML si presenta come segue:

<UserControl ... 
     xmlns:svgc="http://sharpvectors.codeplex.com/svgc/" 
     ...> 
    ... 
    <svgc:SvgViewbox Margin="5" Height="20" Width="20" Stretch="Uniform" Source="/View/Resources/Icons/Connection.Closed.Black.svg"/> 
    ... 
</UserControl> 

Answer 4

di Windows 10 Creatori Update (15063) supporta in modo nativo immagini SVG, anche se con alcuni grattacapi.

L'utilizzo è semplice come impostare Source per un <Image /> nel percorso di SVG. Che è equivalente all'utilizzo SvgImageSource, come segue:

<Image> 
    <Image.Source> 
     <SvgImageSource UriSource="Assets/svg/icon.svg" /> 
    </Image.Source> 
</Image> 

Tuttavia, immagini SVG caricati in questo modo (tramite XAML) may load jagged/aliased. Una soluzione è quella di specificare un valore RasterizePixelHeight o RasterizePixelWidth che è il doppio + vostra attuale altezza/larghezza:

<SvgImageSource RasterizePixelHeight="300" RasterizePixelWidth="300" UriSource="Assets/svg/icon.svg" /> <!-- presuming actual height or width is under 150 --> 

Questo può essere aggirato in modo dinamico con la creazione di un nuovo SvgImageSource in caso ImageOpened per l'immagine di base:

var svgSource = new SvgImageSource(new Uri("ms-appx://" + Icon)); 
PrayerIcon.ImageOpened += (s, e) => 
{ 
    var newSource = new SvgImageSource(svgSource.UriSource); 
    newSource.RasterizePixelHeight = PrayerIcon.DesiredSize.Height * 2; 
    newSource.RasterizePixelWidth = PrayerIcon.DesiredSize.Width * 2; 
    PrayerIcon2.Source = newSource; 
}; 
PrayerIcon.Source = svgSource; 

L'aliasing può essere difficile da vedere su schermi non ad alta risoluzione, ma ecco un tentativo di illustrarlo.

Questo è il risultato del codice precedente: un Image che utilizza l'iniziale SvgImageSource, ed una seconda Image sottostante che utilizza lo SvgImageSource creato nel caso ImageOpened:

Questa è una soffiata up vista dell'immagine superiore:

considerando questa è una vista ingrandita del la bott om (antialias corretta,) immagine:

(avrete bisogno di aprire le immagini in una nuova scheda e visualizzare in full size per apprezzare la differenza)