矢量图形作为按钮图标

时间:2011-04-08 16:12:36

标签: silverlight templates styling vector-graphics

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

这没关系,但是a)这是一个麻烦,而且b)它在一个关键方面是有限的。我希望能够改变悬停和活动等颜色的颜色。问题是模板绑定不起作用。即我不能这样做:

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

“TemplateBinding”选项不仅不会出现在VS.Net编辑器中,而且如果我只是尝试它,它根本不应用任何颜色(忽略VS.Net的建议它不起作用)。因此,现在我必须为像x:Name =“HoveredUserIcon”这样的东西定义一个完全独立的资源。

我希望整体工作流程更简单,但至少,我想解决着色问题。

感谢。

1 个答案:

答案 0 :(得分:0)

您需要查看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