在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>
我一直在努力让 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>