XAML 将绑定传递到MAUI中的可重用UI元素

ctehm74n  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(132)

我正在尝试创建一个可重用的ContentView,它可以绑定到一个示例特定的值。

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:element="clr-namespace:SimultaneousEquations.Elements"
             x:Class="SimultaneousEquations.Elements.EquationElement">

    <ContentView.BindingContext>
        <element:EquationElement />
    </ContentView.BindingContext>

    <HorizontalStackLayout HorizontalOptions="Center">
        <Label FontSize="22" Text="{Binding EquationAsString}"  HorizontalOptions="Center" /> 
        <Label>
            <Label.Margin>8,0,0,0</Label.Margin>
        </Label>
        <Frame 
                WidthRequest="30" 
                HeightRequest="30" 
                CornerRadius="15"
                BorderColor="Black" 
                Padding="0" >
            <Label 
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    Text="1"
                    TextColor="Black"
                    FontSize="22" >
            </Label>
        </Frame>
    </HorizontalStackLayout>
    
</ContentView>

代码隐藏:

namespace SimultaneousEquations.Elements;

public partial class EquationElement : ContentView
{
    public EquationElement()
    {
        InitializeComponent();
    }

    public string EquationAsString
    {
        get => (string)GetValue(EquationAsStringProperty);
        set => SetValue(EquationAsStringProperty, value);
    }

    public static readonly BindableProperty EquationAsStringProperty =
           BindableProperty.Create(
               nameof(EquationAsString),
               typeof(string),
               typeof(EquationElement),
               "Equation Not Set"//string.Empty
               );
}

然后我尝试在ContentPage中使用它。使用Reusable元素会导致应用崩溃。直接在视图中使用类似的代码可以正常工作:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:SimultaneousEquations.ViewModels"
             xmlns:elements="clr-namespace:SimultaneousEquations.Elements"
             x:Class="SimultaneousEquations.Views.SolveView"
             Title="Solver">
    <ContentPage.BindingContext>
        <viewModels:SolveViewModel />
    </ContentPage.BindingContext>

    <VerticalStackLayout>

        <!-- THIS CAUSES APP TO CRASH AT LAUNCH -->
        <elements:EquationElement EquationAsString="{Binding FirstEquation.AsString}"/>

        <!-- THIS WORKS -->
        <HorizontalStackLayout HorizontalOptions="Center">
            <Label FontSize="22" Text="{Binding FirstEquation.AsString}"  HorizontalOptions="Center" />
            <Label><Label.Margin>8,0,0,0</Label.Margin></Label>
            <Frame 
                WidthRequest="30" 
                HeightRequest="30" 
                CornerRadius="15"
                BorderColor="Black" 
                Padding="0" >
                <Label 
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    Text="1"
                    TextColor="Black"
                    FontSize="22" >
                </Label>
            </Frame>
        </HorizontalStackLayout>

        <Button  HorizontalOptions="Center"  Text="Solve" Command="{Binding SolveCommand}" />

    </VerticalStackLayout>
</ContentPage>

有人能帮我把这个修好吗。谢谢
编辑:在安卓系统上,应用程序毫无例外地崩溃了。我试着重新运行在WindowsMachine上崩溃的代码,在一个名为Elements_EquationElement.xaml.sg.cs的自动生成代码文件中发现了一个异常。异常出现在这里:

private void InitializeComponent()
        {
            global::Microsoft.Maui.Controls.Xaml.Extensions.LoadFromXaml(this, typeof(EquationElement));
        }

消息显示异常未处理-系统。StackOverflowException:'异常_被抛出'
我不确定这是否有帮助。

n8ghc7c1

n8ghc7c11#

要实现这一点,我需要做的更改是更改我在可重用ContentView中设置绑定的方式,使用绑定源和路径,如下所示:

<?xml version="1.0" encoding="utf-8" ?>
    <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:element="clr-namespace:SimultaneousEquations.Elements"
             x:Class="SimultaneousEquations.Elements.EquationElement"
             x:Name="ControlView">

    <HorizontalStackLayout HorizontalOptions="Center">
        <Label FontSize="22" 
               Text="{Binding Source={x:Reference ControlView}, Path=EquationAsString}" 
               HorizontalOptions="Center" /> 
        <Label>
            <Label.Margin>8,0,0,0</Label.Margin>
        </Label>
        <Frame 
                WidthRequest="30" 
                HeightRequest="30" 
                CornerRadius="15"
                BorderColor="Black" 
                Padding="0" >
            <Label 
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    Text="{Binding Source={x:Reference ControlView}, Path=EquationNumber}"
                    TextColor="Black"
                    FontSize="22" >
            </Label>
        </Frame>
    </HorizontalStackLayout>
    
</ContentView>

这个例子真的帮助了我:.net Maui binding values multiple levels deep

相关问题