Wie verwenden von xaml-Vektor-Bilder als Bild-Quelle in Windows 8 app

Meisten AppBar buttons basieren auf einem Stil, aufgenommen in StandardStyles genannt AppBarButtonStyle.

Anpassen der text der Schaltfläche setzen Sie die AutomationProperties.Name angefügte Eigenschaft, anpassen das Symbol in der Schaltfläche legen Sie die Inhalt Eigenschaft, und es ist auch eine gute Idee, um die AutomationProperties.AutomationId angefügte Eigenschaft für die Zugänglichkeit von Gründen.

Hier ist ein Beispiel für eine Schaltfläche individuell mit Hilfe dieses Ansatzes:

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

Wie oben erwähnt, zur Anpassung der Symbol legen Sie die Inhalt Eigenschaft. Die Herausforderung ist, wie man die Inhalte, so zeigt es Ihre Gewohnheit Vektorgrafiken.

Es stellt sich heraus, Sie können jeden Pfad Xaml, auch deine, in eine Viewbox ändern Sie den Maßstab. Das war mein Erster Ansatz, aber es funktioniert nicht. In der Tat, es scheint, jedes mal, wenn Sie mit Xaml erweitert notation um die Inhalt Eigenschaft für ein button-es funktioniert nicht.

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

Eigentlich denke ich, das ist ein bug, aber zum Glück gibt es einen workaround.

Tim Heuer schrieb ein ausgezeichnete Artikel auf die einfachste Art der Verwendung von Xaml Pfad wie die Grafik für einen button. Dass dieser Artikel hier:

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

Kurz gesagt, müssen Sie einen Stil definieren, der festlegt, bis alle Bindungen richtig:

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

Dann erstellen Sie einen Stil, erbt von diesem Stil, und Sie fügen Sie in Ihrem Pfad. Hier ist das Format für Ihre Grafik, die Sie oben aufgeführt sind:

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

Und schließlich, verwenden Sie es in Ihre AppBar, wie diese:

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

Dev-support, design support und mehr awesome Güte auf den Weg:
http://bit.ly/winappsupport