Come utilizzare le immagini vettoriali xaml come sorgente di immagini nella finestra 8 app

Ho creato alcune risorse in inkscape e vorrei utilizzarle come icone in un'applicazione Windows 8. Ho fatto un po 'di lettura e mi sembra che mentre .Net 4.5 supporta SVG, the modern ui profile does not. Ho convertito lo svg in xaml usando this tool.Come utilizzare le immagini vettoriali xaml come sorgente di immagini nella finestra 8 app

Ottengo il seguente xaml.

<Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="svg2997" Width="744.09448" Height="1052.3622" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> 
    <Canvas x:Name="layer1"> 
    <Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" /> 
    </Canvas> 
</Canvas>

Se aggiungo questo direttamente a mie applicazioni XAML si renderà tuttavia la scala è lontano.

Mi piacerebbe utilizzare questo come sorgente di immagini per un oggetto immagine, se possibile.

<Image HorizontalAlignment="Left" Height="100" Margin="127,37,0,0" VerticalAlignment="Top" Width="100" Source="Assets/plus_circle.xaml"/>

Questo può essere fatto?

fonte

2013-02-10 Chris Gonzales

Qual è l'elemento xaml che contiene l'elemento immagine? Che cosa succede alle proporzioni se rimuovi larghezza, altezza e/o attributi del margine dall'elemento immagine? – Nathan

La gerarchia è . Non sei sicuro di cosa intendi per "aspect ratio"? Usando il codice precedente non riesco a visualizzare l'immagine. –

"Se aggiungo questo direttamente alle mie app xaml, renderà comunque la scala molto lontana." - Stavo cancellando quella frase per quanto riguarda le proporzioni. Non è stato chiaro per me quando ho letto la tua domanda la prima volta che non lo visualizzi affatto quando usi la sorgente di immagini - anche se è abbastanza chiaro nel titolo ... – Nathan

La maggior parte dei pulsanti AppBar si basa su uno stile incluso in StandardStyles denominato AppBarButtonStyle.

Per personalizzare il testo del pulsante si imposta la proprietà associata AutomationProperties.Name, per personalizzare l'icona nel pulsante si imposta la proprietà contenuti, ed è anche una buona idea per impostare il AutomationProperties.AutomationId proprietà allegata per motivi di accessibilità.

Ecco un esempio di un pulsante personalizzato utilizzando questo approccio:

<Style x:Key="FolderButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> 
    <Setter Property="AutomationProperties.AutomationId" Value="FolderAppBarButton"/> 
    <Setter Property="AutomationProperties.Name" Value="Folder"/> 
    <Setter Property="Content" Value="&#xE188;"/> 
</Style>

Come accennato in precedenza, per personalizzare l'icona si imposta la Content proprietà. La sfida è come imposti il contenuto in modo che mostri la tua arte vettoriale personalizzata.

Si scopre che è possibile posizionare qualsiasi percorso Xaml, anche il proprio, in una vista Viewbox per modificarne la scala. Questo è stato il mio primo approccio, ma non funziona. In effetti, sembra che ogni volta che usi la notazione estesa Xaml per impostare la proprietà Content per un pulsante che non funziona.

<Style x:Key="SquareButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}"> 
<Setter Property="AutomationProperties.AutomationId" Value="SquareAppBarButton"/> 
<Setter Property="AutomationProperties.Name" Value="Square"/> 
<Setter Property="Content"> 
    <Setter.Value> 
     <!-- This square will never show --> 
     <Rectangle Fill="Blue" Width="20" Height="20" /> 
    </Setter.Value> 
</Setter>

Io in realtà penso che questo è un bug, ma per fortuna c'è una soluzione.

Tim Heuer ha scritto un eccellente articolo sul modo più semplice per utilizzare un Xaml percorso come l'opera d'arte per un pulsante. Questo articolo è qui:

http://timheuer.com/blog/archive/2012/09/03/using-vectors-as-appbar-button-icons.aspx

In breve, è necessario definire uno stile che imposta tutte le associazioni in modo corretto:

<Style x:Key="PathAppBarButtonStyle" BasedOn="{StaticResource AppBarButtonStyle}" TargetType="ButtonBase"> 
<Setter Property="ContentTemplate"> 
    <Setter.Value> 
     <DataTemplate> 
      <Path Width="20" Height="20" 
       Stretch="Uniform" 
       Fill="{Binding Path=Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}" 
       Data="{Binding Path=Content, RelativeSource={RelativeSource Mode=TemplatedParent}}"/> 
     </DataTemplate> 
    </Setter.Value> 
</Setter>

Poi si crea uno stile che eredita da quello stile e tu incolli nel tuo percorso. Qui è lo stile per la grafica che hai elencato sopra:

<Style x:Key="CrossButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource PathAppBarButtonStyle}"> 
    <Setter Property="AutomationProperties.AutomationId" Value="CrossAppBarButton"/> 
    <Setter Property="AutomationProperties.Name" Value="Cross"/> 
    <Setter Property="Content" Value="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z"/> 
</Style>

E, infine, lo si utilizza nella vostra AppBar come questo:

<Button Style="{StaticResource CrossButtonStyle}" />

supporto Dev, supporto alla progettazione e la bontà più impressionante sulla strada: http://bit.ly/winappsupport

fonte

2013-02-11 22:53:59

Grazie ancora Jared. Sei sempre lì per ricordarmi quanto può essere fantastico XAML. Inoltre, quanto poco capisco. Ho bisogno di passare meno tempo in JVS e più tempo con XAML. –

Wow, dalla domanda OP non ho mai saputo che avesse qualcosa a che fare con i pulsanti in primo luogo haha –

lol, buon punto Chris W! Immagino di aver fatto un'ipotesi perché ha detto "Icone" e le icone sono solitamente utilizzate nei pulsanti (specialmente i pulsanti AppBar). Ma lo stesso trucco DataTemplate potrebbe essere applicato ovunque. Di solito si vedono persone che usano una Viewbox per ridimensionare i percorsi, ma il mio istinto mi dice che Viewbox è costoso. Il trucco di Tim Heuer sembra essere molto più leggero. Grazie per essere su SO e aiutare a rispondere alle domande Chris W., lo apprezzo. E Chris G., applica sicuramente alcune di quelle abilità folli che devi vincere 8. :) Le persone che conosco stanno già guadagnando bene! –

Sono abbastanza positivo non si può solo iniettare PathData in un ImageSource e si aspettano di lavorare magicamente meno che non sia attraverso un Drawing oggetto come Source. Tuttavia, ciò che puoi fare è adottare lo Path in un ContentControl per riutilizzarlo allo stesso modo, senza dover passare attraverso il problema degli oggetti Drawing per ogni istanza.

Quindi anziché;

<Image Source="..."/>

Basta fare una cosa del genere e plop nel vostro Object.Resources o ResourceDictionary;

<Style x:Key="YourThingy" TargetType="ContentControl"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ContentControl"> 
        <Path Fill="#FFCCCCCC" Stroke="#FF000000" StrokeThickness="1.34377062" StrokeMiterLimit="4" x:Name="path3007" Data="M372.58272,134.72445C167.96301,134.72445 2.06820310000001,300.58818 2.06820310000001,505.20789 2.06820310000001,709.8276 167.96301,875.72241 372.58272,875.72241 577.20243,875.72241 743.06616,709.8276 743.06616,505.20789 743.06616,300.58818 577.20243,134.72445 372.58272,134.72445z M280.73888,251.77484L455.94149,251.77484 455.94149,413.70594 628.16035,413.70594 628.16035,588.97071 455.94149,588.97071 455.94149,773.71514 280.73888,773.71514 280.73888,588.97071 106.22005,588.97071 106.22005,413.70594 280.73888,413.70594 280.73888,251.77484z" /> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style>

Quindi basta accenderlo sul tuo punto di vista ovunque e tutte le volte che vuoi;

<ContentControl Style="{StaticResource YourThingy}"/>

Potrai comunque voglia di giocare con il Sentiero del tuo. Sembra impostato su grandi dimensioni, ma si spera che questo fornisca una buona alternativa per la tua situazione. Saluti!

fonte

2013-02-10 06:29:44

Come utilizzare le immagini vettoriali xaml come sorgente di immagini nella finestra 8 app

risposta

Problemi correlati