Windows Store Apps können auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen und Auflösungen genutzt werden. Deshalb empfiehlt es sich, Logos, Icons und andere Grafiken in verschiedenen Skalierungsfaktoren bereitzustellen, damit diese auf allen Geräten scharf dargestellt werden können. Die Alternative dazu sind Vektorgrafiken, die beliebig vergrößert werden können und ihre Schärfe beibehalten. Jedoch werden diese nur in JavaScript-Apps unterstützt.

Es gibt jedoch eine Möglichkeit, Vektorgrafiken in einer App zu verwenden: Denn diese können vorher in XAML-Code konvertiert werden. Dieser Code kann dann in Windows 8 Apps, Windows Phone Apps, WPF oder Silverlight eingebunden werden.

Als Beispiel soll folgende Vektorgrafik in XAML konvertiert werden:

Die Ausgangsgrafik im EPS-Format. Die Ausgangsgrafik im EPS-Format.

Öffnen mit Expression Design

Zunächst benötigt man das kostenlos erhältliche Programm Microsoft Expression Design. Es gibt zahlreiche andere Programme, die einen XAML-Export anbieten, jedoch habe ich mit Expression Design bisher die besten Erfahrungen gemacht.

Expression Design unterstützt folgende Vektorformate: AI, EPS, WMF. Vektorgrafiken im SVG-Format müssen erst in eines der oben genannten Formate konvertiert werden. Dazu bietet sich das ebenfalls kostenlos erhältliche Programm Inkscape an. Damit kann die Grafik einfach geöffnet und beispielsweise als EPS exportiert werden.

Geöffnete Vektorgrafik in Expression Design. Geöffnete Vektorgrafik in Expression Design.

In XAML konvertieren

Nun werden die gewünschten Elemente des Logos markiert und über den Menüpunkt: Bearbeiten > XAML kopieren kopiert.

Die Grafik wird direkt als XAML-Code in die Zwischenablage kopiert. Die Grafik wird direkt als XAML-Code in die Zwischenablage kopiert.

Dadurch wird folgender XAML-Code erzeugt:

1
2
3

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="70" Height="53" Canvas.Left="0" Canvas.Top="0">
    <Path Width="70.0787" Height="53.5627" Canvas.Left="0" Canvas.Top="-0.229332" Stretch="Fill" Fill="#FF000000" Data="F1 M 70.0787,26.52C 70.0787,16.1507 60.0787,7.708 47.792,7.708C 47.5,7.708 47.1933,7.724 46.8907,7.73467C 41.864,2.74 34.4267,-0.229332 26.5987,-0.229332C 11.932,-0.229332 0,9.792 0,22.1147C 0,28.7547 3.56267,35.068 9.60933,39.292C 9.42133,42.5773 6.75467,46.8227 5.70267,48.208C 4.96933,49.172 4.844,50.468 5.38,51.5573C 5.92133,52.6453 7.02667,53.3333 8.24533,53.3333C 15.536,53.3333 23.5213,47.6253 27.396,44.448C 30.5627,44.3693 33.636,43.7867 36.5787,42.7813C 39.7293,44.3333 43.2653,45.2027 46.9213,45.3173C 50.6093,48.3333 56.8547,52.5733 62.76,52.5733C 63.9733,52.5733 65.0787,51.8853 65.62,50.8013C 66.156,49.7133 66.036,48.416 65.3027,47.448C 64.3173,46.1453 62.5413,43.1347 62.2653,40.8173C 67.188,37.2653 70.0787,32.0307 70.0787,26.52 Z M 26.62,38.068L 26.6093,38.068C 25.7347,38.0107 24.8387,38.2493 24.1667,38.8227C 21.4373,41.1613 17.9947,43.5933 14.6613,45.1827C 15.6613,42.64 16.328,39.7133 15.8333,36.9267C 15.672,36.0253 15.1307,35.2347 14.344,34.76C 9.28667,31.692 6.38533,27.0773 6.38533,22.1147C 6.38533,13.312 15.4533,6.15601 26.604,6.15601C 31,6.15601 35.224,7.30134 38.6773,9.34933C 38.3907,9.45867 38.1147,9.57733 37.8387,9.69733C 37.6827,9.76 37.5267,9.82267 37.3747,9.89066C 36.8333,10.1253 36.3067,10.3853 35.7973,10.6613C 35.688,10.7187 35.588,10.7813 35.484,10.8387C 35.0787,11.068 34.6827,11.3013 34.2973,11.5467C 34.136,11.6507 33.9733,11.76 33.8173,11.8693C 33.4893,12.0933 33.172,12.3173 32.864,12.5573C 32.708,12.672 32.5573,12.7867 32.412,12.9067C 32.068,13.1827 31.74,13.468 31.4213,13.76C 31.328,13.844 31.2293,13.9213 31.14,14.0107C 30.74,14.3907 30.36,14.7867 29.9947,15.192C 29.9013,15.2973 29.812,15.4067 29.724,15.5107C 29.4587,15.8227 29.2027,16.14 28.9587,16.468C 28.8493,16.6147 28.74,16.7653 28.636,16.916C 28.4173,17.224 28.2133,17.536 28.0213,17.8493C 27.9267,18 27.8333,18.1453 27.7507,18.3013C 27.5213,18.692 27.3067,19.0987 27.1147,19.5053C 27.084,19.5773 27.0413,19.6507 27.0053,19.724C 26.7867,20.2027 26.5933,20.6973 26.4173,21.1973C 26.364,21.344 26.328,21.4893 26.2813,21.64C 26.1667,22.0053 26.0573,22.3693 25.9693,22.744C 25.9267,22.9267 25.8853,23.104 25.8493,23.2813C 25.776,23.6507 25.7133,24.0253 25.6667,24.396C 25.64,24.5627 25.6147,24.7293 25.5987,24.896C 25.5467,25.432 25.5107,25.9733 25.5107,26.52C 25.5107,27.2187 25.5733,27.9013 25.656,28.5827C 25.6827,28.7547 25.7027,28.9213 25.7347,29.088C 25.844,29.76 25.9787,30.432 26.188,31.1253C 26.38,31.7707 26.62,32.396 26.8907,33.016C 26.964,33.1773 27.0307,33.3333 27.1093,33.4893C 27.4013,34.1093 27.7187,34.724 28.136,35.38C 28.4947,35.9533 28.9013,36.5053 29.3333,37.0413C 29.4427,37.1773 29.552,37.3173 29.6667,37.4533C 29.776,37.5773 29.8747,37.7187 29.9893,37.844C 28.8853,37.9947 27.76,38.068 26.62,38.068 Z M 57.484,36.3333C 56.6973,36.8067 56.156,37.5987 55.9947,38.5C 55.656,40.3907 55.9427,42.3493 56.4947,44.1507C 54.2507,42.9213 52.0053,41.2867 50.1613,39.7027C 49.584,39.208 48.8493,38.9373 48.084,38.9373C 47.9733,38.9373 47.8693,38.9427 47.792,38.948C 44.4173,38.948 41.1827,38.12 38.4427,36.5413C 34.344,34.1867 31.896,30.4427 31.896,26.52C 31.896,25.7347 31.9893,24.964 32.1667,24.2133C 32.3493,23.464 32.62,22.74 32.964,22.0413C 34.172,19.5987 36.344,17.52 39.1507,16.0933C 39.636,15.8493 40.1453,15.6307 40.6667,15.4267C 42.2813,14.792 44.0467,14.3587 45.932,14.1867C 46.5413,14.1307 47.1613,14.0933 47.792,14.0933C 56.5573,14.0933 63.6933,19.672 63.6933,26.52C 63.6933,30.364 61.4267,33.9373 57.484,36.3333 Z "/>
</Canvas>

In der App verwenden

In der App kann der XAML-Code dann an einer beliebigen Stelle eingefügt werden. Es empfiehlt sich einen eigenen Style in den App-Resourcen festzulegen, damit die Grafik leicht wiederverwendet werden kann. Damit Breite und Höhe flexibel festgelegt werden können, kann das Canvas noch in einer ViewBox gekapselt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13

<Style x:Key="BalloonImage" TargetType="ContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ContentControl">
                <Viewbox>
                    <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="70" Height="53" Canvas.Left="0" Canvas.Top="0">
                        <Path Width="70.0787" Height="53.5627" Canvas.Left="0" Canvas.Top="-0.229332" Stretch="Fill" Fill="#FF000000" Data="F1 M 70.0787,26.52C 70.0787,16.1507 60.0787,7.708 47.792,7.708C 47.5,7.708 47.1933,7.724 46.8907,7.73467C 41.864,2.74 34.4267,-0.229332 26.5987,-0.229332C 11.932,-0.229332 0,9.792 0,22.1147C 0,28.7547 3.56267,35.068 9.60933,39.292C 9.42133,42.5773 6.75467,46.8227 5.70267,48.208C 4.96933,49.172 4.844,50.468 5.38,51.5573C 5.92133,52.6453 7.02667,53.3333 8.24533,53.3333C 15.536,53.3333 23.5213,47.6253 27.396,44.448C 30.5627,44.3693 33.636,43.7867 36.5787,42.7813C 39.7293,44.3333 43.2653,45.2027 46.9213,45.3173C 50.6093,48.3333 56.8547,52.5733 62.76,52.5733C 63.9733,52.5733 65.0787,51.8853 65.62,50.8013C 66.156,49.7133 66.036,48.416 65.3027,47.448C 64.3173,46.1453 62.5413,43.1347 62.2653,40.8173C 67.188,37.2653 70.0787,32.0307 70.0787,26.52 Z M 26.62,38.068L 26.6093,38.068C 25.7347,38.0107 24.8387,38.2493 24.1667,38.8227C 21.4373,41.1613 17.9947,43.5933 14.6613,45.1827C 15.6613,42.64 16.328,39.7133 15.8333,36.9267C 15.672,36.0253 15.1307,35.2347 14.344,34.76C 9.28667,31.692 6.38533,27.0773 6.38533,22.1147C 6.38533,13.312 15.4533,6.15601 26.604,6.15601C 31,6.15601 35.224,7.30134 38.6773,9.34933C 38.3907,9.45867 38.1147,9.57733 37.8387,9.69733C 37.6827,9.76 37.5267,9.82267 37.3747,9.89066C 36.8333,10.1253 36.3067,10.3853 35.7973,10.6613C 35.688,10.7187 35.588,10.7813 35.484,10.8387C 35.0787,11.068 34.6827,11.3013 34.2973,11.5467C 34.136,11.6507 33.9733,11.76 33.8173,11.8693C 33.4893,12.0933 33.172,12.3173 32.864,12.5573C 32.708,12.672 32.5573,12.7867 32.412,12.9067C 32.068,13.1827 31.74,13.468 31.4213,13.76C 31.328,13.844 31.2293,13.9213 31.14,14.0107C 30.74,14.3907 30.36,14.7867 29.9947,15.192C 29.9013,15.2973 29.812,15.4067 29.724,15.5107C 29.4587,15.8227 29.2027,16.14 28.9587,16.468C 28.8493,16.6147 28.74,16.7653 28.636,16.916C 28.4173,17.224 28.2133,17.536 28.0213,17.8493C 27.9267,18 27.8333,18.1453 27.7507,18.3013C 27.5213,18.692 27.3067,19.0987 27.1147,19.5053C 27.084,19.5773 27.0413,19.6507 27.0053,19.724C 26.7867,20.2027 26.5933,20.6973 26.4173,21.1973C 26.364,21.344 26.328,21.4893 26.2813,21.64C 26.1667,22.0053 26.0573,22.3693 25.9693,22.744C 25.9267,22.9267 25.8853,23.104 25.8493,23.2813C 25.776,23.6507 25.7133,24.0253 25.6667,24.396C 25.64,24.5627 25.6147,24.7293 25.5987,24.896C 25.5467,25.432 25.5107,25.9733 25.5107,26.52C 25.5107,27.2187 25.5733,27.9013 25.656,28.5827C 25.6827,28.7547 25.7027,28.9213 25.7347,29.088C 25.844,29.76 25.9787,30.432 26.188,31.1253C 26.38,31.7707 26.62,32.396 26.8907,33.016C 26.964,33.1773 27.0307,33.3333 27.1093,33.4893C 27.4013,34.1093 27.7187,34.724 28.136,35.38C 28.4947,35.9533 28.9013,36.5053 29.3333,37.0413C 29.4427,37.1773 29.552,37.3173 29.6667,37.4533C 29.776,37.5773 29.8747,37.7187 29.9893,37.844C 28.8853,37.9947 27.76,38.068 26.62,38.068 Z M 57.484,36.3333C 56.6973,36.8067 56.156,37.5987 55.9947,38.5C 55.656,40.3907 55.9427,42.3493 56.4947,44.1507C 54.2507,42.9213 52.0053,41.2867 50.1613,39.7027C 49.584,39.208 48.8493,38.9373 48.084,38.9373C 47.9733,38.9373 47.8693,38.9427 47.792,38.948C 44.4173,38.948 41.1827,38.12 38.4427,36.5413C 34.344,34.1867 31.896,30.4427 31.896,26.52C 31.896,25.7347 31.9893,24.964 32.1667,24.2133C 32.3493,23.464 32.62,22.74 32.964,22.0413C 34.172,19.5987 36.344,17.52 39.1507,16.0933C 39.636,15.8493 40.1453,15.6307 40.6667,15.4267C 42.2813,14.792 44.0467,14.3587 45.932,14.1867C 46.5413,14.1307 47.1613,14.0933 47.792,14.0933C 56.5573,14.0933 63.6933,19.672 63.6933,26.52C 63.6933,30.364 61.4267,33.9373 57.484,36.3333 Z "/>
                    </Canvas>
                </Viewbox>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Zur eigentlichen Darstellung kann dann ein einfaches ContentControl verwendet werden, dem dann der vorher definierte Style zugewiesen wird. Durch die ViewBox wird die Grafik auf die festgelegte Größe des ContentControls skaliert.

1

<ContentControl Style="{StaticResource BalloonImage}" Width="800"/>

Fazit

XAML ist eine mächtige Sprache, die auch zum Zeichnen von Vektordaten verwendet werden kann. Wenn Grafiken bereits als Vektordateien vorliegen ist es somit praktisch, den hier gezeigten Weg zu gehen. Dadurch muss die Grafik nicht in mehreren Skalierungsfaktoren für die App bereitgestellt werden.

Beispielprojekt

Das Beispielprojekt ist hier zu finden.