Векторная графика как значок кнопки - PullRequest
Новая
       10

Векторная графика как значок кнопки

1 голос
/ 08 апреля 2011

Выполнение этого в Silverlight кажется сложнее, чем должно быть, и у меня также нет 100% решения. У меня есть несколько векторных иконок, созданных моим дизайнером. Я импортирую их в Expression Design. Все они представлены в виде одного листа значков, где я выбираю один значок и его части, выполняю операции с деталями> Объединить, щелкните правой кнопкой мыши> экспорт и выберите «XAML Silverlight 4 / WPF Canvas». Создаемый файл выглядит так: 

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document" Width="36.0254" Height="38.3402" Clip="F1 M 0,0L 36.0254,0L 36.0254,38.3402L 0,38.3402L 0,0">
    <Canvas x:Name="Layer_1" Width="799.564" Height="600.326" Canvas.Left="0" Canvas.Top="0">
    <Path x:Name="Path" Width="36.1326" Height="38.3401" Canvas.Left="-0.000118291" Canvas.Top="2.00272e-005" Stretch="Fill" Fill="#FF000000" Data="F1 M 28.1747,10.0387C 28.1747,15.5867 23.6801,20.0827 18.1321,20.0827C 12.5881,20.0827 8.09204,15.5867 8.09204,10.0387C 8.09204,4.49471 12.5881,2.00272e-005 18.1321,2.00272e-005C 23.6801,2.00272e-005 28.1747,4.49471 28.1747,10.0387 Z M 10.0131,19.6989C 10.0131,19.6989 17.9891,27.2895 25.9651,19.6989C 25.9651,19.6989 37.6877,26.0415 35.9584,38.3402L 0.115723,38.3402C 0.115723,38.3402 -1.80688,26.6162 10.0131,19.6989 Z "/>
</Canvas>

Затем я вытаскиваю только геометрию пути, добавляю ее в стиль ContentControl и помещаю в словарь ресурсов. Это выглядит так: 

<Style x:Key="UserIcon" TargetType="ContentControl">
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Grid>
                    <Path Stretch="Uniform" Fill="White" Data="F1 M 28.1747,10.0387C 28.1747,15.5867 23.6801,20.0827 18.1321,20.0827C 12.5881,20.0827 8.09204,15.5867 8.09204,10.0387C 8.09204,4.49471 12.5881,2.00272e-005 18.1321,2.00272e-005C 23.6801,2.00272e-005 28.1747,4.49471 28.1747,10.0387 Z M 10.0131,19.6989C 10.0131,19.6989 17.9891,27.2895 25.9651,19.6989C 25.9651,19.6989 37.6877,26.0415 35.9584,38.3402L 0.115723,38.3402C 0.115723,38.3402 -1.80688,26.6162 10.0131,19.6989 Z " />
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

Наконец, кнопка выглядит так: 

<Button>
    <ContentControl Style="{StaticResource UserIcon" />
</Button>

Это работает нормально, но а) это хлопотно, и б) оно ограничено одним критическим способом. Мне нужна возможность менять цвет для таких вещей, как зависание и активность. Проблема в том, что привязка шаблона не работает. То есть Я не могу сделать: 

<Path Stretch="Uniform" Fill="{TemplateBinding Foreground}" ...

Выбор «TemplateBinding» не только не отображается в редакторе VS.Net, но он просто не применяет цвета вообще, если я просто попробую его (игнорируя предложение VS.Net, что оно не работает). Итак, как и сейчас, я должен определить совершенно отдельный ресурс для чего-то вроде x: Name = "HoveredUserIcon".

Мне бы хотелось иметь более простой рабочий процесс в целом, но, по крайней мере, я бы хотел решить проблемы с окраской.

Спасибо.

1 Ответ

0 голосов
/ 08 апреля 2011

Вам нужно взглянуть на StateGroups:

http://www.interact -sw.co.uk / iangblog / 2008/06/10 / visual-state

Этона самом деле очень легко сделать незначительные отклонения вашего контроля и заставить его работать так, как вы задумали.

В этом блоге есть симпатичное небольшое видео, в котором рассматривается Expression Blend:

http://blogs.msdn.com/b/expression/archive/2009/10/02/visual-state-manager-tips-for-design-and-authoring.aspx

...