XAML 图标 - 如何使用？答案

【问题标题】：XAML Icons - How to use?XAML 图标 - 如何使用？
【发布时间】：2011-01-12 16:49:12
【问题描述】：

我有一些 XAML 格式的矢量图形文件，我想将它们用作 Silverlight 应用程序中的图标/按钮。我更喜欢的方法是使用 Image 控件并将其源属性设置为 .xaml 文件，就像我可以使用常规位图图像一样。

但这并不容易，我尝试将它们作为 ControlTemplates 包含在资源字典中，我什至尝试创建一个自定义控件来动态加载 Xaml，但我对结果并不满意，因为我需要将它们包装在 ViewBox 控件中以允许动态大小等。

所以我的问题是，是否有人对如何最好地使用我的 xaml 图标有任何最佳实践建议？我可以在需要时复制粘贴 xaml，但我真的不喜欢这种方法。

提前致谢。

【问题讨论】：

标签： silverlight xaml graphics vector-graphics

【解决方案1】：

杰文德尔，

您应该发布一些 XAML 图标的示例以澄清，但任何内容控件，例如 Button 和 ContentControl 的，都具有 Content 和 ContentTemplate 属性。一个共享的 ContentTemplate 示例如下所示：

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
>
    <UserControl.Resources>
        <Style x:Key="MyTriangleIcon" TargetType="ContentControl">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Polygon Fill="Black" Stroke="Black">
                                <Polygon.Points>
                                    <Point X="0" Y="100"/>
                                    <Point X="100" Y="0"/>
                                    <Point X="100" Y="100"/>
                                </Polygon.Points>
                            </Polygon>
                            <Polygon Fill="Red" Stroke="Red">
                                <Polygon.Points>
                                    <Point X="100" Y="0"/>
                                    <Point X="0" Y="100"/>
                                    <Point X="0" Y="0"/>
                                </Polygon.Points>
                            </Polygon>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <StackPanel Background="White">
        <Button Width="120" Height="120" Style="{StaticResource MyTriangleIcon}" />
        <Button Width="120" Height="120" Style="{StaticResource MyTriangleIcon}" />
    </StackPanel>

</UserControl>

您可以将以上内容粘贴到我的XamlViewer中快速查看结果。

祝你好运，
吉姆·麦柯迪

【讨论】：

感谢您的热心吉姆。但这并不能解决必须为所有使用图像的控件复制我的 XAML 或至少为每种控件类型制作一个样式/模板的“问题”。我想找到一种方法，让我以与处理 .png 或 .jpeg 文件类似的方式处理 .xaml 文件。这没什么大不了的，但我觉得使用它们的复制粘贴方式不够令人满意，你是对的，因为我可以将它们与 Content 属性一起使用。
为避免重复，只需在应用程序级别 (Application.Resources) 或在用户控件级别 (UserControl.Resources) 将 XAML“图标”实例化为 ContentControl 资源模板。我在上面修改了我的 XAML 以展示如何做到这一点，以及它如何允许您的 XAML 被重用。