Jak używać obrazów wektorowych Xaml jako źródła obrazu w oknie 8 app

Question

Stworzyłem pewne zasoby w inkscape i chciałbym użyć ich jako ikon w aplikacji Windows 8. Zrobiłem trochę czytania i szwy, że podczas .Net 4.5 obsługuje SVG, the modern ui profile does not. Przekonwertowałem svg na xaml przy użyciu this tool.

Otrzymuję następujące 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> 

Jeśli dodaję to bezpośrednio do moich aplikacji xaml, to wyłączy on jednak skalę.

Chciałbym użyć tego jako źródła obrazu dla obiektu obrazu, jeśli to możliwe.

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

Czy można to zrobić?

Answer 1

Większość przycisków AppBar bazuje na stylu zawartym w StandardStyles o nazwie AppBarButtonStyle.

Aby dostosować tekst przycisku można ustawić dołączony własność AutomationProperties.Name, aby dostosować ikonę przycisku ustawić właściwość zawartość, i to również dobry pomysł, aby ustawić AutomationProperties.AutomationId dołączona właściwość ze względów związanych z ułatwieniami dostępu.

Oto przykład jednego przycisku dostosować za pomocą tego podejścia:

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

Jak wspomniano powyżej, aby dostosować ikonę ustawić zawartość nieruchomości. Wyzwanie polega na tym, jak ustawić zawartość, aby wyświetlała niestandardową grafikę wektorową.

Okazuje się, że możesz zmienić dowolną ścieżkę Xaml, nawet twoją, w Viewbox, aby zmienić jej skalę. To było moje pierwsze podejście, ale nie działa. Wydaje się, że za każdym razem, gdy korzystasz z notacji rozwiniętej Xaml, możesz ustawić właściwość dla przycisku, który nie działa.

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

I rzeczywiście, że jest to błąd, ale na szczęście istnieje obejście.

Tim Heuer napisał doskonałą artykuł na najprostszym sposobem użycia XAML Path jako grafiki na przycisku. Że artykuł jest tutaj:

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

Krótko mówiąc, trzeba zdefiniować styl, który ustawia się wszystkie powiązania poprawnie:

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

Następnie należy utworzyć styl, który dziedziczy ten styl i wklejasz na swoją ścieżkę. Oto styl kompozycji ty wymienione powyżej:

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

i wreszcie go używać w swojej AppBar tak:

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

wsparcie Dev, wsparcie projektowe i bardziej niesamowita dobroć po drodze: http://bit.ly/winappsupport

Answer 2

Jestem całkiem pozytywne nie można po prostu wstrzyknąć PathData się na ImageSource i oczekiwać, że magicznie działać, chyba że to przez Drawing obiekt jako Source. Możesz jednak zaadaptować swój Path do ContentControl w celu ponownego użycia w ten sam sposób, bez konieczności przechodzenia przez problemy z obiektami Drawing dla każdej instancji.

Więc zamiast;

<Image Source="..."/> 

Wystarczy zrobić coś takiego i rzuć go w Object.Resources lub 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> 

Po prostu plopuj go na widoku, gdziekolwiek i tyle razy, ile chcesz;

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

Będziesz jednak chciał grać z tą Drogą. Wydaje się ustawić duży rozmiar, ale mam nadzieję, że stanowi dobrą alternatywę dla twoich okoliczności. Twoje zdrowie!