如何将图标声明为应用程序资源并用它们填充 GridView？

Question

简而言之，我想在 GridView 中制作一组图标，用户可以从中 select 更改他们的个人资料图标。

我想我可以通过在 ResourceDictionary

上声明我需要的图标来实现这一点

    <ResourceDictionary
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:iconPacks="using:MahApps.Metro.IconPacks">

    <iconPacks:PackIconMaterial x:Key="IconCarrot" Kind="Carrot"/>

    <FontIcon x:Key="IconRobot" FontFamily="Segoe MDL2 Assets" Glyph="&#xE99A;"/>

    <!--As can we see, the icons are of different types-->

    </ResourceDictionary>

在App.xaml

中添加

<Application.Resources ...>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="ResourceDictionaries/MyIcons.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

此外，我创建了一个 class 来实例化一个具有两个属性的 IconObject：实际的图标和一个我想用作工具提示文本的字符串

public class IconObject
{
    // I really don't know what type I need to use here
    public object DisplayedIcon { get; set; }

    // Tooltip
    public string DisplayedToolTip { get; set; }

    // Contructor
    public IconObject(object theIcon, string theTooltip)
    {
        DisplayedIcon = theIcon;
        DisplayedToolTip = theTooltip;
    }
}

所以，在代码中我有一个 ObservableCollection<IconObject> 我想填充

private void PopulateTheObservableCollection()
{
   IconObjects.Add(new IconObject(Application.Current.Resources["IconCarrot"], "Carrot"));
}

最后，我尝试绑定到 GridView

<GridView ItemsSource="{x:Bind IconObjects}">
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <ItemsWrapGrid MaximumRowsOrColumns="6" Orientation="Horizontal"  ItemHeight="50" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>

        <GridView.ItemTemplate>
            <DataTemplate x:DataType="local:IconObject" >
                <Viewbox Child="{x:Bind DisplayedIcon}" ToolTipService.ToolTip="{x:Bind DisplayedToolTip}"/>
            </DataTemplate>
        </GridView.ItemTemplate>
</GridView>

但是抛出一个错误（我明白为什么但我不知道如何修复它）。

这里的问题是

这是执行此操作的好方法吗（让网格视图填充用户可以 select 的图标，然后使用图标 selected)?
我需要使用什么类型的属性来存储图标？
你有什么建议吗？

（感谢您抽空阅读所有内容）

Answer 1

What type of property do I need to use to store an icon?

根据您的代码，您希望将图标添加到 Viewbox 中，Child proeprty 的类型是 UIElement，因此您可以将 DisplayedIcon 属性设置为 UIElement 类型或保留对象类型并使用 Converter 方法来转换它。另外，如果要将图标添加到Viewbox中，需要先在ResourceDictionary中移除，再添加到Viewbox中，一个元素的实例不能在XAML树中出现多次。例如：

型号：

public class IconObject
{
    // I really don't know what type I need to use here
    public UIElement DisplayedIcon { get; set; }

    // Tooltip
    public string DisplayedToolTip { get; set; }

    // Contructor
    public IconObject(UIElement theIcon, string theTooltip)
    {
        DisplayedIcon = theIcon;
        DisplayedToolTip = theTooltip;
    }
}

.xaml.cs:

更新：

private void PopulateTheObservableCollection()
{
    ResourceDictionary dic = Application.Current.Resources.MergedDictionaries[0];
    UIElement iconElement = dic["IconCarrot"] as UIElement;
    dic.Remove("IconCarrot");
    IconObjects.Add(new IconObject(iconElement, "Carrot"));
}

Is this a good approach to doing this

您可以尝试使用DataTemplateSelector方法根据您不同类型的图标创建不同的DataTemplate和Model。关于DataTemplateSelector的更多细节，可以参考这篇document.

如何将图标声明为应用程序资源并用它们填充 GridView？

How to declare icons as app resources and populate a GridView with them?

c#

icons

mahapps.metro

uwp