Question

我刚刚使用ControlTemplates实现了这些ToggleButtons，它根据IsChecked声明设置了Image内容。图像是在Photoshop中制作的，但我希望它们是WPF矢量。

当IsChecked = False时，按钮看起来像这样：

alt text http://i46.tinypic.com/2q3rsaw.jpg

当IsChecked = True时，我只需将图像替换为另一个PNG：

alt text http://i50.tinypic.com/2lu868l.jpg

我在photoshop中设计了按钮图像。它们具有以下图像层：

半透明形状（边缘按钮有两个圆角的正方形）
分割线的半透明线
图标
文字
玻璃反射效果的半透明渐变

我认识到这不是最灵活的设计，我宁愿在矢量形式中使用相同的按钮，但我不知道如何做到这一点。

这是来自其中一个按钮的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>

Answer 1

尝试查看Expression Studio。该套件中的一些应用程序可以导入photoshop格式。

尽管在最坏的情况下，在Blend中手动创建这样的图像并不是什么大问题。

如何将这些图像togglebuttons转换为矢量togglebuttons？

1 个答案: