【问题标题】:在 Border 内使用 BindingContext(C# MAUI,适用于 Xamarin/WPF)
【发布时间】:2022-01-22 20:53:35
【问题描述】:

我一直在努力让绑定在边界内工作。当我尝试在边界外绑定某些东西时,效果很好,但我无法让它在边界内工作。

这里的代码有效:

<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>

这段代码显示为空。

据我目前所了解的,边界带走了上下文,我已经尝试了很多其他线程的东西来让它工作,但由于我很新,我很难找到它是如何工作的。

提前致谢!

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

我想澄清一下,前面提到的Text属性实际上不是Label或Border的Text属性,而是有界对象的Text属性。为清楚起见,将其重命名为 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

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

编辑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 内时才显示 Binded 属性。

【问题讨论】:

  • @ToolmakerSteve 澄清了原始帖子。另外值得一提的是,所引用的 Path=Text 不是默认的 MAUI Text 属性,而是自定义数据类型的属性。
  • 基本上用所有代码进行了编辑。您可以将这些项目想象成自定义按钮(自定义按钮,因为我将在其中放置更多元素),因此边框本质上是一个按钮边框。
  • 如果只是绑定本身不起作用,我就不会那么困惑了,但它确实起作用,直到我把它放在边界控件中。
  • 那么当你使用那个first数据模板作为CollectionView的ItemTemplate时它工作了吗?太令人惊讶了……我得自己测试一下。
  • 我知道我不可能是唯一一个遇到这个问题的人。如果您有任何想法,请告诉我,但我假设我最好的选择可能是等待完整版本。无论如何,感谢所有帮助,这是我使用 WPF 一年后第一次学习 MVVM,我花了一整天的时间试图让它工作,以为我无法理解数据绑定的工作原理(并不是说我完全理解它,但至少现在我知道我有一个很好的理由感到困惑)。感谢所有帮助。

标签: wpf xaml binding border maui


【解决方案1】:

其他人也将此视为错误。 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>

【讨论】:

  • 明天有机会并且如果可行,我会尝试并标记为解决方案。谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2022-10-15
  • 1970-01-01
  • 2017-09-19
  • 1970-01-01
  • 1970-01-01
  • 2013-05-13
  • 2022-07-18
相关资源
最近更新 更多