Using Vectors in an App Bar (Windows 8 + Windows Phone 8.1)

I’m going to do this backwards. I’ll start assuming you already have your vector icon in XAML. Then, how to import your vector icon from Illustrator to XAML.

The basics:

Your button should look like this:

<AppBarButton x:Name=”MyButton”

    Label=”do stuff”

    Style=”{StaticResource HeadphoneVectorIcons}”/>

And the style should look like this:

<Style x:Key=”HeadphoneVectorIcons”
        TargetType=”ButtonBase”>
    <Setter Property=”ContentTemplate”>
        <Setter.Value>
            <DataTemplate>
                <Path Margin=”8″
                     Stretch=”Uniform”
                     Fill=”{Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}}”
                     Data=”[My Icon Data]” />
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

And is should look a little something like this:

image

Importing your icons from Illustrator

Open Blend.

Click on File –> Import… –> Import Adobe Illustrator File

image

If your vector graphic has multiple layers, select all the layers you want as a single icon and right-click on them to select “Combine -> Unite”

image

Take your single path data and put it into the data property in the style above.

Where I got this icon (in case you want to practice)

From this place.

3 thoughts on “Using Vectors in an App Bar (Windows 8 + Windows Phone 8.1)

Comments are closed.