在集合视图项目的 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

有两种解决方法：

创建一个布尔变量来检查视图模型中的 CompletedDate 并将文本绑定到它。然后使用转换器将布尔值转换为字符串。关于clicked事件，你可以尝试和Text做同样的事情或者在page.cs.
也在视图模型中创建一个布尔变量，但是您需要在 xaml 和绑定中创建两个按钮（一个是“标记为已完成”，另一个是“标记为已完成”）他们的 IsVisible 属性到视图模型中的布尔变量。

我建议你尝试第二种解决方案，因为第一种需要做很多事情并将点击事件转换为命令。而第二个减少了很多工作。

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

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

切换：https://docs.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说的那样使用DataTrigger，然后查看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>

Answer 2

您可以尝试将 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)) 即可。

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

in Xamarin form for collection view items how to set button base on item's value? (conditional binfing)

c#

data-binding

xaml

xamarin

xamarin.forms

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

in Xamarin form for collection view items how to set button base on item's value? (conditional binfing)

c#

data-binding

xaml

xamarin

xamarin.forms

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