WinUI 3绑定ResourceDictionary的Geometry至PathIcon触发运行时错误

问题根源 #

WinUI3与WPF的资源类型处理逻辑存在差异：

• 直接设置Icon为Geometry字符串时，模板可直接将字符串解析为Geometry渲染；
• 绑定ResourceDictionary中的Geometry类型资源到string类型的Icon属性时，WinUI3绑定系统无默认类型转换器，导致类型不匹配抛出Value does not fall within the expected range异常；
• 换成String类型资源后，若模板未将字符串转换为Geometry对象，Path控件无法获取有效Data，导致图标不渲染。

最优解决方案：将Icon依赖属性改为Geometry类型 #

直接贴合WinUI3的类型系统，避免字符串转换的冗余与错误。

1. 修改自定义控件代码（MyControl.cs） #

将Icon属性的类型从string改为Geometry：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Media;

namespace YourNamespace
{
    public sealed class MyControl : Control
    {
        public static readonly DependencyProperty IconProperty =
            DependencyProperty.Register(nameof(Icon), typeof(Geometry), typeof(MyControl), new PropertyMetadata(null));

        public Geometry Icon
        {
            get => (Geometry)GetValue(IconProperty);
            set => SetValue(IconProperty, value);
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register(nameof(Text), typeof(string), typeof(MyControl), new PropertyMetadata(string.Empty));

        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        public MyControl()
        {
            this.DefaultStyleKey = typeof(MyControl);
        }
    }
}

2. 更新控件模板（Themes\Generic.xaml） #

直接将Path的Data绑定到Icon属性（类型匹配无需转换器）：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourNamespace">

    <Style TargetType="local:MyControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MyControl">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <Path Data="{TemplateBinding Icon}" 
                              Width="24" Height="24" 
                              Fill="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
                        <TextBlock Text="{TemplateBinding Text}" 
                                   VerticalAlignment="Center"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3. 保留ResourceDictionary中的Geometry资源（ResourceDictionary1.xaml） #

无需修改原有Geometry资源定义：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Geometry x:Key="MyIconGeometry">M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z</Geometry>
</ResourceDictionary>

4. 绑定资源到控件（MainWindow.xaml） #

直接引用Geometry资源即可：

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourNamespace"
    x:Class="YourNamespace.MainWindow"
    Title="MainWindow">

    <Grid>
        <local:MyControl Icon="{StaticResource MyIconGeometry}" Text="测试控件"/>
    </Grid>
</Window>

5. 确保资源字典被正确引用（App.xaml） #

在Application.Resources中合并所有需要的资源字典：

<Application
    x:Class="YourNamespace.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
                <ResourceDictionary Source="Themes/Generic.xaml"/>
                <ResourceDictionary Source="ResourceDictionary1.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

备选方案：使用类型转换器（保留string类型Icon属性） #

若需维持string类型的Icon属性，需实现IValueConverter完成字符串与Geometry的双向转换：

1. 实现转换器 #

using Microsoft.UI.Xaml.Data;
using Microsoft.UI.Xaml.Media;
using System;

namespace YourNamespace
{
    public class StringToGeometryConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            if (value is string geometryStr)
            {
                return Geometry.Parse(geometryStr);
            }
            else if (value is Geometry geometry)
            {
                return geometry.ToString();
            }
            return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

2. 在资源字典中注册转换器 #

在ResourceDictionary1.xaml或App.xaml中添加：

<local:StringToGeometryConverter x:Key="StringToGeometryConverter"/>

3. 修改模板与绑定 #

• 模板中Path的Data绑定添加转换器：

  <Path Data="{TemplateBinding Icon, Converter={StaticResource StringToGeometryConverter}}" .../>
  

• 绑定Geometry资源时添加转换器：

  <local:MyControl Icon="{Binding Source={StaticResource MyIconGeometry}, Converter={StaticResource StringToGeometryConverter}}" Text="测试控件"/>
  

验证要点 #

• 确保所有资源字典路径正确，无拼写错误；
• 自定义控件的DefaultStyleKey设置正确；
• 测试时清理项目并重新生成，避免缓存问题。

内容的提问来源于stack exchange，提问作者manderson