Laden...

Wie Vektor Icons als Resourcen/Binding in XAML verwenden?

Erstellt von Ares vor 10 Jahren Letzter Beitrag vor 10 Jahren 2.104 Views
A
Ares Themenstarter:in
167 Beiträge seit 2005
vor 10 Jahren
Wie Vektor Icons als Resourcen/Binding in XAML verwenden?

Hallo,

Es geht um ein Projekt für Windows Phone 8. Ich habe eine ganze Menge von einfachen Icons (nur Konturen, keine Farben, etc.) im Illustrator .ai Vektor Formt. Diese würde ich gerne an verschiedenen Stellen der App in verschiedenen Größen, etc. verwenden.

Mit Blend konnte ich die .ai Datei importieren und daraus automatisch XAML generieren. Das Ganze habe ich dann als ResourceDictionary in einer eigenen XAML Datei "Icons.xaml" gespeichert:


<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <Canvas x:Name="TestIcon" Height="27.985" Canvas.Left="5.506" Canvas.Top="2.007" Width="20.988">
        <Path Data="F1M26.992,21.488L26.899,21.488C26.538,22.892 25.005,24.217 22.914,24.75 20.205,25.439 17.598,24.538 17.091,22.736 16.583,20.934 18.367,18.915 21.074,18.225 22.509,17.86 23.911,17.945 24.993,18.37L24.993,4.497C24.993,4.221 24.769,3.997 24.493,3.997 24.473,3.997 24.456,4.007 24.436,4.009L24.435,4.001 11.443,5.5 11.444,5.508C11.196,5.537,11,5.74,11,5.996L11,23.486 10.908,23.486C10.547,24.891 9.013,26.217 6.923,26.749 4.215,27.438 1.608,26.537 1.099,24.735 0.592,22.933 2.375,20.914 5.083,20.224 6.518,19.859 7.92,19.943 9.001,20.369L9.001,2.948 26.992,1.055z M27.491,0C27.473,0,27.457,0.009,27.439,0.01L27.439,0.003 8.45,2.001 8.45,2.009C8.2,2.036,8.002,2.24,8.002,2.498L8.002,19.088C7.013,18.935 5.924,18.977 4.821,19.259 1.571,20.093 -0.534,22.662 0.118,24.997 0.772,27.331 3.936,28.548 7.185,27.714 9.74,27.057 11.581,25.33 11.937,23.486L12,23.486 12,22.948C12.002,22.886,12.001,22.822,12,22.758L12,6.442 23.993,5.058 23.993,17.089C23.005,16.936 21.914,16.978 20.811,17.261 17.562,18.095 15.457,20.664 16.11,22.998 16.763,25.332 19.928,26.549 23.177,25.715 25.731,25.059 27.571,23.331 27.928,21.488L27.991,21.488 27.991,20.949C27.993,20.886,27.992,20.823,27.991,20.761L27.991,0.499C27.991,0.223,27.767,0,27.491,0" Fill="#FF376EB5" Height="27.977" Canvas.Left="0" Stretch="None" Canvas.Top="0" Width="27.993">
            <Path.Clip>
                <RectangleGeometry Rect="0,-0.001,27.992,27.977"/>
            </Path.Clip>
        </Path>
    </Canvas>

</ResourceDictionary>

Problem 1: Wie greife ich in einer beliebigen anderen XAML Datei auf die Icons.xaml zu, so dass ich dort z.B. TestIcon verwenden kann?

Bislang habe ich es nur geschafft TestIcon direkt in der XAML Datei zu verwenden in er ich es auch definiert habe:


<phone:PhoneApplicationPage
    ...>

    <phone:PhoneApplicationPage.Resources>
        <Canvas x:Name="TestIcon"...>
            ....
        </Canvas>
    </phone:PhoneApplicationPage.Resources>

    ...

    <Button ...>
        <ContentPresenter Height="32" Width="32" Content="{StaticResource TestIcon}" />
    </Button>

</phone:PhoneApplicationPage>

Problem 2: Wie spreche ich die so definierte StaticResource als Bindign an?


    <Button ...>
        <ContentPresenter Height="32" Width="32" Content="{Binding IconName}" />
    </Button>

Wenn das Binding hier als IconName "TestIcon" liefert, funktioniert das nicht. Wie wird das korrekt angegeben?

Problem 3: Wie kann ich das Icon auf Button 1 mit Farbe A und auf Button 2 mit Farbe B verwenden? Bislang bestimmt die Fill-Eigenschaft des Path die Farbe. Damit hat das Icon dann aber überall die gleiche Farbe.

Problem 4: Wie kann ich das Icon als Source für ein Image verwenden? Ich habe dazu nur die Information gefunden, dass man das Icon statt auf einer Canvas als DrawingImage angeben sollte. Das scheint aber nur bei WPF zu funktionieren, während mir DrawingImage bei meinem Windows Phone 8 Projekt immer als unbekannt angezeigt wird. Wie ist hier das korrekte vorgehen?

Vielen Dank!

4.942 Beiträge seit 2008
vor 10 Jahren

Hallo Ares,

zu 1: Stichwort "MergedDirectories", s. z.B. Using a Resource Dictionary in WPF
Mit Phone-Projekten habe ich aber keine Erfahrung, d.h. ob das auch genauso funktioniert 😉

zu 2: Stichworte (Type)Converter sowie FindResource()-Methode (wenn ich die Frage richtig verstanden habe)

zu 3 und 4: leider k.A.