Как преобразовать эти кнопки-переключатели в векторные кнопки-переключатели? - PullRequest
Новая
       12

Как преобразовать эти кнопки-переключатели в векторные кнопки-переключатели?

2 голосов
/ 09 февраля 2010

Я только что реализовал эти ToggleButtons, используя ControlTemplates, которые устанавливают содержимое изображения в соответствии с заявленным IsChecked. Изображения сделаны в Photoshop, но я хочу, чтобы они использовались как векторы WPF.

Кнопки выглядят так, когда IsChecked = False:

alt text

А когда IsChecked = True, я просто заменяю изображение на другой PNG:

alt text

Я разработал изображения кнопок в фотошопе. Они имеют следующие слои изображения:

  • Полупрозрачная форма (квадрат с двумя круглыми углами для краевых кнопок)
  • Светопрозрачные линии для линий деления
  • Icon
  • Текст
  • Полупрозрачный градиент для эффекта отражения стекла

Я понимаю, что это не самый гибкий дизайн, и я предпочел бы иметь те же кнопки в векторной форме, но я не знаю, как это сделать.

Вот xaml от одной из кнопок (не стесняйтесь предлагать и другие варианты того, как реализовать кнопки): 

    <ControlTemplate x:Key="ResetButtonTemplate" TargetType="{x:Type ToggleButton}">
        <Image x:Name="ImageReset" Source="images\button_reset_gray.png"/>
        <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="False">
                <Setter Property="Cursor" Value="Hand" />
            </Trigger>
            <Trigger Property="IsChecked" Value="True">
                <Setter TargetName="ImageReset" Property="Source" Value="images\button_reset_red.png"/>
                <Setter Property="IsEnabled" Value="False" />
                <Setter Property="Cursor" Value="Arrow" />
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>


        <StackPanel Orientation="Horizontal" Margin="20">
            <ToggleButton Name="buttonRun" Width="102" Height="102" Template="{StaticResource RunButtonTemplate}" Checked="buttonRun_Checked" />
            <ToggleButton Name="buttonPause" Width="102" Height="102" Template="{StaticResource PauseButtonTemplate}" Checked="buttonPause_Checked" />
            <ToggleButton Name="buttonReset" Width="102" Height="102" Template="{StaticResource ResetButtonTemplate}" Checked="buttonReset_Checked" />
        </StackPanel>

1 Ответ

1 голос
/ 10 февраля 2010

Попробуйте взглянуть на Expression Studio. Некоторые приложения в наборе имеют возможность импортировать форматы фотошопа.

Хотя в худшем случае создание таких изображений вручную в Blend не представляет особой проблемы.

...