如何在 Xamarin.Forms 的转发器中标记复选框？

Question

我在转发器下使用复选框控件来实现单选按钮功能，一切似乎都很好，但现在卡在了如何在页面加载时绑定复选框上。我已经保存了选择的单选按钮文本，一旦用户再次返回页面，我想将他上次选择的内容打包。在这里没有得到任何提示如何继续。

<grial:Repeater
    x:Name="PP"
    SelectionMode="Single"
    InitialSelection="Empty"     
    ItemSize="100"
    HorizontalOptions="Start"
    ItemsSource="{Binding BlowerPostions}">
    <grial:Repeater.ItemTemplate>
        <DataTemplate>
            <grial:Checkbox
                IsChecked="false"
                UncheckedBorderColor="Black">
                <Label
                    TextColor="Black"
                    Text="{ Binding . }"
                    Margin="8,0" />
            </grial:Checkbox>
        </DataTemplate>
    </grial:Repeater.ItemTemplate>
    <grial:Repeater.SelectedItemTemplate>
        <DataTemplate>
            <grial:Checkbox
                IsChecked="true"
                UncheckedBorderColor="Black"
                InputTransparent="true">
                <Label
                    TextColor="Black"
                    Text="{ Binding . }"
                    Margin="8,0" />
            </grial:Checkbox>
        </DataTemplate>
    </grial:Repeater.SelectedItemTemplate>
</grial:Repeater>

查看模型：

public class ProductionViewModel : INotifyPropertyChanged
{
    public ObservableCollection<BlowerPostion> _blowerPostions;

    public ObservableCollection<BlowerPostion> BlowerPostions
    {
        get => _blowerPostions;
        set
        {
            _blowerPostions = value;

            if (PropertyChanged != null)
            {
                PropertyChanged(this, new 
                PropertyChangedEventArgs("BlowerPostions"));
            }
        }
    }

    public void LoadData()
    {
      BlowerPostions = new ObservableCollection<BlowerPostion>();
      BlowerPostions.Add(new BlowerPostion("Left", 1));
      BlowerPostions.Add(new BlowerPostion("Standard", 1));
    }
}

public class BlowerPostion
{
    public string Text { get; set; }
    public int Id { get; set; }

    public BlowerPostion(string _text, int _id)
    {
        Text = _text;
        Id = _id;
    }
}

Answer 1

我没有使用grial:Repeater，但是你可以参考下面的代码，在ListView项中使用了CheckBox。

Item.cs

public  class Item
{
    public string Name { get; set; }
    public string Type { get; set; }
    public string Image { get; set; }

    //This field indicates whether or not it is selected
    public bool isChecked { get; set; }
}

MyViewModel.cs

public  class MyViewModel
{
    public ObservableCollection<Item> items { get; private set; }

    public MyViewModel() {
        items = new ObservableCollection<Item>();

        items.Add(new Item { Name = "Tomato", Type = "Fruit", Image = "tomato.png", isChecked = true });
        items.Add(new Item { Name = "Romaine Lettuce", Type = "Vegetable", Image = "lettuce.png", isChecked = false });
        items.Add(new Item { Name = "Zucchini", Type = "Vegetable", Image = "zucchini.png", isChecked = false });
    }
}

TestPage1.xaml

<ContentPage.Content>
    <ListView x:Name="listview" ItemsSource="{Binding items}"         VerticalOptions="FillAndExpand">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" Padding="5,0,5,0">
                        <Label  Text="{Binding Name}" HorizontalOptions="StartAndExpand" FontSize="30"/>

                        <input:CheckBox    IsChecked="{Binding isChecked}"  Type="Check" Color="White" BoxBackgroundColor="Green" TextColor="White" HeightRequest="40" 
                                         CheckChanged="CheckBox_CheckChanged"  BindingContext="{Binding .}" />

                    </StackLayout>
                </ViewCell>
            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>
</ContentPage.Content>

TestPage1.xaml.cs

public partial class TestPage1 : ContentPage
{
    public List<Item> selectedItems; // define `selectedItems` as the list of selected items.

    public MyViewModel viewModel;

    public TestPage1 ()
    {
        InitializeComponent ();

        selectedItems = new List<Item>(); // init the `selectedItems`
        viewModel = new MyViewModel();

        BindingContext = viewModel;
    }

    private void CheckBox_CheckChanged(object sender, EventArgs e)
    {
        var checkbox = (Plugin.InputKit.Shared.Controls.CheckBox)sender;
        var ob = checkbox.BindingContext as Item;

        if (ob != null)
        {
            System.Diagnostics.Debug.WriteLine("isChecked = " + ob.isChecked  + "<--->  Name = " + ob.Name +"<--->  Type = " + ob.Type );
            if (ob.isChecked)
            {
                selectedItems.Add(ob);
            }
            else {
                // remove the item
            }
        }
    }
}

注：

1.add 项目模型中的新字段 isChecked

 public bool isChecked { get; set; }

2.Add事件CheckChanged对于item.And当我们选中CheckBox时，我们可以得到CheckBox对应的值isChecked。

<input:CheckBox    IsChecked="{Binding isChecked}"  Type="Check" Color="White" BoxBackgroundColor="Green" TextColor="White" HeightRequest="40" 
                                         CheckChanged="CheckBox_CheckChanged"  BindingContext="{Binding .}" />

如何在 Xamarin.Forms 的转发器中标记复选框？

How to mark the checkbox in repeater in Xamarin.Forms?

repeater

radio-button

xamarin

xamarin.forms