在集合视图项目的 Xamarin 表单中，如何根据项目的值设置按钮？(条件分箱)

Question

我正在做一个Xamarin表单项目，我有一个任务列表，可以完成或在完成。我想添加一个按钮来显示"标记已完成"在已完成的任务中，标记为"完成";完成的任务。当然，当用户单击一次时，它需要刷新。我有一个"completeddate"字段，当它有值时，该字段定义任务是否完成。

TextColor="{StaticResource PrimaryBlack}" />
<CollectionView  Grid.Row="1" ItemsSource="{Binding Tasks}" x:Name="List3">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Frame
Margin="0,10"
Padding="10"
BackgroundColor="{StaticResource PrimaryWhite}"
BorderColor="{StaticResource PrimaryLightGray}"
CornerRadius="10"
HasShadow="False">
<Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" RowSpacing="15">
<StackLayout Orientation="Horizontal">
<Label
FontFamily="{StaticResource MeduimFont}"
Style="{StaticResource LabelMedium}"
Text="Completed"
IsVisible="{Binding CompletedTaskVisibility}}"
TextColor="{Binding PrimaryPersianGreen}" />
<StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal">
<Image
HeightRequest="20"
Source="iconCalender.png"
WidthRequest="20" />
<Label
FontFamily="{StaticResource MeduimFont}"
Style="{StaticResource LabelMedium}"
Text="{Binding CompletedDate,StringFormat='{0:MMMM dd, yyyy}'}"
TextColor="{StaticResource PrimaryBlack}" 
/>
</StackLayout>
</StackLayout>
<BoxView
Grid.Row="1"
HeightRequest="1"
Color="{StaticResource PrimaryLightGray}" />
<Label
Grid.Row="2"
Style="{StaticResource LabelMedium}"
Text="{Binding Name}"
TextColor="{StaticResource PrimaryBlack}" />
<Label
Grid.Row="3"
Style="{StaticResource LabelMedium}"
Text="{Binding Description}"
TextColor="{StaticResource PrimaryBlack}" />

<Button
x:Name="lstbtnMarkasComplite"
Grid.Row="5"
Padding="15,0"
Clicked="MarkTaskAsCompletedClicked"
CornerRadius="20"
FontSize="{StaticResource Font12}"
HeightRequest="40"
CommandParameter="{Binding Id}"
HorizontalOptions="CenterAndExpand"
Style="{StaticResource ButtonPurple}"
Text="Mark as Completed" />

</Grid>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

我有一个&;completeddate &;字段，当它有值时，该字段定义任务是否完成。

Answer 1

您可以尝试将DataTrigger添加到Button。它们可用于将条件绑定或值应用于属性，如Button.Text属性。

对于一个按钮，你可以像下面这样实现它:

<Button Test="Mark Complete">
<Button.Triggers>
<DataTrigger TargetType="Button" Binding="{Binding IsCompleted}" Value="True">
<Setter Property="Text" Value="Mark Incomplete"/>
</DataTrigger>
</Button.Triggers>
</Button>

然后你也可以添加IsCompleted字段到你的视图模型:

public bool IsCompleted             
get { return CompletedDate.HasValue; }

作为按钮的开关。

您还需要为IsCompleted变量添加通知。

当你设置CompletedDate时调用OnPropertyChanged(nameof(IsCompleted))会这样做。

Answer 2

有两种解决方案:

1. 创建一个布尔变量来检查视图模型中的CompletedDate并将Text绑定到它。然后使用转换器将bool转换为string。关于click事件，您可以尝试做与Text相同的事情，或者在page.cs中检查click事件。
2. 在视图模型中也创建一个布尔变量，但是您需要创建两个按钮(一个是"Mark as completed"另一种是在xaml中"标记为已完成"，并将它们的IsVisible属性绑定到视图模型中的布尔变量。

我建议您尝试第二种解决方案，因为第一种解决方案需要做很多工作，并将单击的事件转换为命令。第二种方法可以减少很多工作。

最后，您可以尝试使用其他控件来代替按钮。如:

复选框:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/checkbox

开关:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/switch

编辑:

在视图模型:

public ViewModel()
{
CompletedDate = ""; //set the value with the model data
if (CompletedDate != null)
{
isCompleted = true;
}
else isCompleted = false;
}
public event PropertyChangedEventHandler PropertyChanged;
bool isCompleted;
public bool IsCompleted { 
get { return isCompleted; } 
set { 
isCompleted = value;
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs("IsCompleted"));
}
}
}

xaml: 中的

<Button
x:Name="lstbtnMarkasComplite"
Grid.Row="5"
Padding="15,0"
Clicked="MarkTaskAsCompletedClicked"
CornerRadius="20"
FontSize="{StaticResource Font12}"
HeightRequest="40"
CommandParameter="{Binding Id}"
HorizontalOptions="CenterAndExpand"
Style="{StaticResource ButtonPurple}"
Text="Mark as Completed" 
IsVisible="{Binding IsCompleted}"/>
<Button
x:Name="lstbtnMarkasComplite"
Grid.Row="5"
Padding="15,0"
Clicked="MarkTaskAsInCompletedClicked"
CornerRadius="20"
FontSize="{StaticResource Font12}"
HeightRequest="40"
CommandParameter="{Binding Id}"
HorizontalOptions="CenterAndExpand"
Style="{StaticResource ButtonPurple}"
Text="Mark as in Completed" 
IsVisible="{Binding IsCompleted}/>

您也可以像Ibrennan208所说的那样使用datattrigger，然后检查page.cs:

中的Text值。

private async void Button_Clicked(object sender, EventArgs e) 
{
Button button = sender as Button;
if(button.Text == "Mark as Completed")
{
.........
}
else
{
.........
}
}

更新:

<Button.Triggers>
<DataTrigger TargetType="Button" Binding="{Binding CompletedDate}" Value="{x:Null}">
<Setter Property="Text" Value="Mark Task as Completed"/>
</DataTrigger>
</Button.Triggers>