矢量图形作为按钮图标

发布于 2024-10-31 02:54:22 字数 2654 浏览 4 评论 0原文

在 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" 之类的东西定义一个完全独立的资源。

我希望总体上有一个更简单的工作流程，但至少，我想解决着色问题。

谢谢。

原文

Doing this in Silverlight seems harder than it should be and I also don't have a 100% solution. I have a handful of vector icons created by my designer. I import these into Expression Design. The all come in as one sheet of icons where I select one icon and it's parts, do Part Operations > Unite, right-click > export, and choose "XAML Silverlight 4 / WPF Canvas". The file it creates looks like:

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

I then pull out just the path geometry and throw that into the Style of a ContentControl and put that into a resource dictionary. It looks thus:

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

Finally, the button looks like:

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

That works OK, but a) it's a hassle, and b) it's limited in one critical way. I want the ability to change the color for things like hover and active. The problem is template binding doesn't work. I.e. I cannot do:

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

The "TemplateBinding" choice not only doesn't show up in the VS.Net editor but it simply applies no color at all if I just try it (ignoring VS.Net's suggestion that it doesn't work). So as it is now I have to define an entirely separate resource for something like x:Name="HoveredUserIcon".

I'd like to have a simpler workflow overall but, at the very least, I'd like to solve the coloring issues.

Thanks.

分享到QQ

分享到微博