.NET MAUI全局样式引用元素报错，如何实现多页面复用？

1. 全局样式资源在应用启动时加载，此时页面的MainContentGrid尚未实例化，x:Reference无法解析该元素。
2. 全局样式中不能使用TargetName，它仅能引用同一XAML文件可视化树内的元素，无法跨页面识别特定名称的ColumnDefinition。

方案1：直接在样式中定义ColumnDefinitions（简单直接） #

将列宽的初始配置和响应式逻辑都整合到全局样式中，避免依赖页面内的元素名称：

<converters:IsGreaterThanConverter x:Key="IsGreaterThanConverter" />

<Style x:Key="ResponsiveGridStyle" TargetType="Grid">
    <!-- 初始列宽配置 -->
    <Setter Property="ColumnDefinitions">
        <Setter.Value>
            <ColumnDefinitionCollection>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="0" />
            </ColumnDefinitionCollection>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <!-- 绑定到Grid自身的Width，无需引用外部元素 -->
        <DataTrigger TargetType="Grid" 
                     Binding="{Binding Path=Width, RelativeSource={RelativeSource Self}, Converter={StaticResource IsGreaterThanConverter}, ConverterParameter=1024}"
                     Value="True">
            <!-- 响应式列宽配置 -->
            <Setter Property="ColumnDefinitions">
                <Setter.Value>
                    <ColumnDefinitionCollection>
                        <ColumnDefinition Width="480" />
                        <ColumnDefinition Width="*" />
                    </ColumnDefinitionCollection>
                </Setter.Value>
            </Setter>
        </DataTrigger>
    </Style.Triggers>
</Style>

页面中直接应用样式，无需手动定义ColumnDefinitions：

<Grid Style="{StaticResource ResponsiveGridStyle}">
    <!-- 放置内容，Master区域在Column 0，Detail区域在Column 1 -->
</Grid>

方案2：使用附加属性（保留页面自定义列的灵活性） #

如果需要在页面中自定义初始列配置，可通过附加属性实现样式对列宽的控制：

1. 创建附加属性类：

using Microsoft.Maui.Controls;

namespace YourAppNamespace
{
    public static class GridColumnSettings
    {
        public static readonly BindableProperty MasterWidthProperty =
            BindableProperty.CreateAttached(
                "MasterWidth", 
                typeof(GridLength), 
                typeof(GridColumnSettings), 
                new GridLength(1, GridUnitType.Star));

        public static readonly BindableProperty DetailWidthProperty =
            BindableProperty.CreateAttached(
                "DetailWidth", 
                typeof(GridLength), 
                typeof(GridColumnSettings), 
                new GridLength(0));

        public static GridLength GetMasterWidth(BindableObject obj)
        {
            return (GridLength)obj.GetValue(MasterWidthProperty);
        }

        public static void SetMasterWidth(BindableObject obj, GridLength value)
        {
            obj.SetValue(MasterWidthProperty, value);
        }

        public static GridLength GetDetailWidth(BindableObject obj)
        {
            return (GridLength)obj.GetValue(DetailWidthProperty);
        }

        public static void SetDetailWidth(BindableObject obj, GridLength value)
        {
            obj.SetValue(DetailWidthProperty, value);
        }
    }
}

2. 修改全局样式，通过附加属性设置列宽：

<converters:IsGreaterThanConverter x:Key="IsGreaterThanConverter" />

<Style x:Key="ResponsiveGridStyle" TargetType="Grid">
    <Setter Property="local:GridColumnSettings.MasterWidth" Value="*" />
    <Setter Property="local:GridColumnSettings.DetailWidth" Value="0" />
    <Style.Triggers>
        <DataTrigger TargetType="Grid" 
                     Binding="{Binding Path=Width, RelativeSource={RelativeSource Self}, Converter={StaticResource IsGreaterThanConverter}, ConverterParameter=1024}"
                     Value="True">
            <Setter Property="local:GridColumnSettings.MasterWidth" Value="480" />
            <Setter Property="local:GridColumnSettings.DetailWidth" Value="*" />
        </DataTrigger>
    </Style.Triggers>
</Style>

3. 页面中绑定ColumnDefinition的Width到附加属性：

<Grid Style="{StaticResource ResponsiveGridStyle}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="{Binding (local:GridColumnSettings.MasterWidth), RelativeSource={RelativeSource AncestorType=Grid}}" />
        <ColumnDefinition Width="{Binding (local:GridColumnSettings.DetailWidth), RelativeSource={RelativeSource AncestorType=Grid}}" />
    </Grid.ColumnDefinitions>
</Grid>

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