Как использовать векторные изображения xaml как источник изображения в приложении окна 8

Ответ 1

Большинство кнопок AppBar основаны на стиле, включенном в StandardStyles, называемом AppBarButtonStyle.

Чтобы настроить текст кнопки, вы устанавливаете свойство AutomationProperties.Name, чтобы настроить значок на кнопке, заданной для свойства Content, и также неплохо установить AutomationProperties.AutomationId приложенное свойство по причинам доступности.

Вот пример кнопки, настроенной с использованием этого подхода:

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

Как уже упоминалось выше, для настройки значка вы устанавливаете свойство Контент. Задача состоит в том, как вы устанавливаете контент, чтобы он отображал ваше пользовательское векторное искусство.

Оказывается, вы можете поместить любой путь Xaml, даже ваш, в Viewbox, чтобы изменить масштаб. Это был мой первый подход, но он не работает. Фактически, в любое время, когда вы используете расширенную нотацию Xaml для установки свойства Content для кнопки, она не работает.

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

Я действительно думаю, что это ошибка, но, к счастью, есть обходной путь.

Тим Хейер написал превосходную статью о простейшем способе использования Xaml Path в качестве иллюстрации для кнопки. Эта статья находится здесь:

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

Короче говоря, вам нужно определить стиль, который правильно устанавливает все привязки:

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

Затем вы создаете стиль, который наследуется от этого стиля, и вы вставляете свой путь. Вот стиль для ваших работ, перечисленных выше:

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

И, наконец, вы используете его в своем AppBar следующим образом:

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

Поддержка Dev, поддержка дизайна и еще более потрясающее качество на пути: http://bit.ly/winappsupport

Ответ 2

Я довольно уверен, что вы не можете просто вставить Path Data в Image Source и ожидать, что он будет магически работать, если только через Drawing Объект Источник. Однако вы можете использовать ваш Path в качестве ContentControl для повторного использования таким же образом, не испытывая проблем с Drawing объектами для каждого экземпляра.

Итак, вместо <

<Image Source="..."/>

Просто сделайте что-нибудь подобное и переверните его в Object.Resources или 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>

Затем просто переверните его на свой взгляд где угодно и столько раз, сколько захотите;

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

Однако вы захотите сыграть с этим Путем. Кажется, это большой размер, но, надеюсь, это является хорошей альтернативой вашим обстоятельствам. Ура!