我如何制作>在Xamarin.Forms的单元格中? [英] How can I make a > in a cell with Xamarin.Forms?

问题描述

我有一个应用程序，可以在其中更改顺序和显示卡的方式.对于拥有iOS的任何人，我都需要与设置">联系人">排序顺序"页面的工作方式非常相似的东西.

I have an application where I can change the order and the way cards appear. For anyone who has iOS I need something very similar to the way the Settings > Contacts > Sort Order page works.

这将显示两行.一个带有First，Last，另一个带有Last，First.当用户单击一行时，它的作用类似于单选按钮，并且在行尾出现一个勾号.

This shows two rows. One with First, Last and the other with Last, First. When a user clicks on a row it acts like a radio button and a tick mark appears at the end of the row.

我想尝试并实现此功能，但是我不确定从哪里开始.我应该使用ViewCell还是TextCell来做到这一点，以及对于它的实现方式，有人怎么有想法

I would like to try and implement this functionality but I am not sure where to start. Should I do this with a ViewCell or a TextCell and how does anyone have any ideas as to how it is implemented this

.

推荐答案

EDIT 1 :简化了iOS渲染器中的属性更改逻辑；现在没有要清理的引用或处理程序.

EDIT 1: Simplified property changed logic in iOS renderer; now there are no references or handlers to cleanup.

扩展到@hankide的答案:

In extension to @hankide's answer:

您可以在扩展TextCell或ViewCell的同时创建可绑定属性IsChecked，并将您的VM状态绑定到该属性.

You can create a bindable property IsChecked while extending a TextCell or ViewCell and bind your VM state to it.

public class MyTextCell : TextCell
{
    public static readonly BindableProperty IsCheckedProperty =
        BindableProperty.Create(
            "IsChecked", typeof(bool), typeof(MyTextCell),
            defaultValue: false);

    public bool IsChecked
    {
        get { return (bool)GetValue(IsCheckedProperty); }
        set { SetValue(IsCheckedProperty, value); }
    }
}

下一步是创建可监听此属性并在iOS级别显示复选标记的渲染器.

Next step would be to create renderer that listens to this property and shows a check-mark at iOS level.

[assembly: ExportRenderer(typeof(MyTextCell), typeof(SampleApp.iOS.MyTextCellRenderer))]
namespace SampleApp.iOS
{
    public class MyTextCellRenderer : TextCellRenderer
    {
        public override UITableViewCell GetCell(Cell item, UITableViewCell reusableCell, UITableView tv)
        {
            var nativeCell = base.GetCell(item, reusableCell, tv);

            var formsCell = item as MyTextCell;
            SetCheckmark(nativeCell, formsCell);

            return nativeCell;
        }

        protected override void HandlePropertyChanged(object sender, PropertyChangedEventArgs args)
        {
            base.HandlePropertyChanged(sender, args);

            System.Diagnostics.Debug.WriteLine($"HandlePropertyChanged {args.PropertyName}");
            if (args.PropertyName == MyTextCell.IsCheckedProperty.PropertyName)
            {
                var nativeCell = sender as CellTableViewCell;
                if (nativeCell?.Element is MyTextCell formsCell)
                    SetCheckmark(nativeCell, formsCell);
            }
        }

        void SetCheckmark(UITableViewCell nativeCell, MyTextCell formsCell)
        {
            if (formsCell.IsChecked)
                nativeCell.Accessory = UITableViewCellAccessory.Checkmark;
            else
                nativeCell.Accessory = UITableViewCellAccessory.None;
        }
    }
}

示例用法1

而且，示例用法如下:

<TableView Intent="Settings">
    <TableSection Title="Sort Order">
        <local:MyTextCell Text="First Last" IsChecked="false" />
        <local:MyTextCell Text="Last, First" IsChecked="true" />
    </TableSection>
</TableView>

示例用法2

您还可以侦听Tapped事件，以确保IsChecked属性按预期工作.

You can also listen to Tapped event to ensure IsChecked property works as expected.

例如，您将此属性绑定到ViewModel:

For example, you bind this property to ViewModel:

<TableView Intent="Settings">
    <TableSection Title="Sort Order">
        <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [0].Name}" IsChecked="{Binding [0].IsSelected}" />
        <local:MyTextCell Tapped="Handle_Tapped" Text="{Binding [1].Name}" IsChecked="{Binding [1].IsSelected}" />
    </TableSection>
</TableView>

并处理点击事件:

public SettingViewModel[] Settings = new []{
    new SettingViewModel { Name = "First Last", IsSelected = false },
    new SettingViewModel { Name = "Last First", IsSelected = true },
};

void Handle_Tapped(object sender, System.EventArgs e)
{
    var cell = sender as TextCell;
    if (cell == null)
        return;

    var selected = cell.Text;
    foreach(var setting in Settings)
    {
        if (setting.Name == selected)
            setting.IsSelected = true;
        else
            setting.IsSelected = false;
    }
}

这篇关于我如何制作>在Xamarin.Forms的单元格中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！