在Border中使用BindingContext(C# MAUI,适用于Xamarin/WPF)

Using BindingContext within Border (C# MAUI, appliable to Xamarin/WPF)

我一直在努力让 Binding 在 Border 中工作。当我尝试绑定 Border 外的东西时,效果很好,但我无法让它在 Border 内工作。

此处的有效代码:

<DataTemplate x:Key="TaskTemplate">
        <GridLayout
            ColumnDefinitions="*"
            >
            <Label Text={Binding Path=TestText}/>
        </GridLayout>
    </DataTemplate>

此代码可以正确显示文本。

什么不适合以及我需要做什么:

<DataTemplate x:Key="TaskTemplate">
        <GridLayout
            ColumnDefinitions="*"
            >
            
            <Border
                GridLayout.Column="0"
                BackgroundColor="{StaticResource MidBackgroundColor}"
                StrokeThickness="1"
                Stroke="Transparent"
                HorizontalOptions="Center">

                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="30"/>
                </Border.StrokeShape>


                <Label 
                    Text="{Binding Path=TestText}"/>
            </Border>
        </GridLayout>
    </DataTemplate>

此代码显示为空。

据我目前的了解,Border 带走了 Context 并且我已经尝试了很多其他线程的东西来让它工作,但是因为我很新,我正在努力了解它的具体工作原理。

提前致谢!

编辑: 我已经尝试用纯文本替换 Binding 并且效果很好,所以 Border 内的 Label 并不是不可见的。

我想澄清的是,上述文本属性实际上并不是标签或边框的文本属性,而是有界对象的文本属性。为清楚起见,将其重命名为 TestText。

此代码显示正确的文本:

        <GridLayout
            ColumnDefinitions="*"
            >
            
            <Border
                GridLayout.Column="0"
                BackgroundColor="{StaticResource MidBackgroundColor}"
                StrokeThickness="1"
                Stroke="Transparent"
                HorizontalOptions="Center">

                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="30"/>
                </Border.StrokeShape>


                <Label 
                    Text="Testing text."/>
            </Border>
        </GridLayout>
    </DataTemplate>

想要的结果是这样的:https://i.stack.imgur.com/wUdGD.jpg

但不是硬编码文本,而是应该绑定另一个对象的文本。这不应该是其他代码的问题,因为如果我在 Border 之外编写代码,它就可以正常工作。

编辑2: 包括所有其他代码。

这是显示所有内容的页面。

TasksPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    <ContentPage.Resources>
        <ResourceDictionary Source="/Views/ViewTask.xaml"/>
    </ContentPage.Resources>

    <GridLayout RowDefinitions="*">
        <GridLayout
            
            GridLayout.Row="0"
            HorizontalOptions="FillAndExpand"
            VerticalOptions="FillAndExpand">
            <StackLayout Margin="5,5,5,0">
                <CollectionView x:Name="TasksCollection"
                                ItemsSource="{Binding Tasks}"
                                ItemTemplate="{StaticResource TaskTemplate}">
                </CollectionView>
            </StackLayout>
        </GridLayout>
    </GridLayout>
</ContentPage>

TasksPage.xaml.cs:

public partial class TasksPage : ContentPage
{
    public TasksPage()
    {
        InitializeComponent();

        BindingContext = new TaskViewModel();
    }
}

这是该集合的项目模板。 ViewTask.xaml:

<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

    <DataTemplate x:Key="TaskTemplate">
        <GridLayout
            ColumnDefinitions="*">

            <Border
                GridLayout.Column="0"
                BackgroundColor="{StaticResource MidBackgroundColor}"
                StrokeThickness="1"
                Stroke="Transparent"
                HorizontalOptions="Center">

                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="30"/>
                </Border.StrokeShape>

                <Label GridLayout.Column="0" 
                       GridLayout.Row="0"
                       Text="{Binding TaskText}" />
            </Border>
        </GridLayout>
    </DataTemplate>
</ResourceDictionary>

ViewModel 只有一个 ObservableCollection,它工作得很好。所以所有项目实际上都填充了 DataTemplate,只是 DataTemplate 仅在不在 Border 内时显示绑定属性。

其他人也将此视为错误。莱斯特·莫雷诺 (Lester Moreno) 对 blog announcing maui preview 9.

的评论

目前,您可以使用“Frame-inside-Frame”模拟Border

<!-- Without Grid, the Frame takes the whole width. -->
<!-- To have multiple buttons in one row, use more Grid columns. -->
<!-- Border will be more convenient once it works. -->
<Grid ColumnDefinitions="Auto,*">
    <!-- "Padding 6" of outer frame determines how thick the Border color is. -->
    <Frame HasShadow="False" CornerRadius="18" Padding="6" BackgroundColor="#F69927">
        <!-- "Padding 2" of inner frame is white space surrounding the label. -->
        <Frame HasShadow="False" CornerRadius="12" BackgroundColor="White" Padding="6,2">
            <Label Text="{Binding LabelText}" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
           TextColor="Blue"/>
        </Frame>
    </Frame>
</Grid>