C# 如何添加<；ViewCell>；使用<；网格>；在C中创建一个表视图#

我正在构建一个动态的TableView。到目前为止，我有：

var section = new TableSection("Available Categories");
foreach (var category in categoryGroups)
{
   var name = (string)category.Name;
   var cell = new TextCell { Text = name };
   section.Add(cell);
}
tableView.Root.Add(section);

这是可行的，但我不想使用TextCell，而是希望使用与XAML中当前网格相同的ViewCell：

< ViewCell >
   < Grid VerticalOptions = "CenterAndExpand" Padding = "20, 0" >
      < Grid.ColumnDefinitions >
         < ColumnDefinition Width = "*" />
         < ColumnDefinition Width = "Auto" />
         < ColumnDefinition Width = "20" />
      </ Grid.ColumnDefinitions >
      < Label Style = "{DynamicResource ListItemTextStyle}" Grid.Column = "0" HorizontalOptions = "StartAndExpand" Text = "{Binding Name}" />
      < Label Style = "{DynamicResource ListItemTextStyle}" Grid.Column = "1" HorizontalOptions = "End" XAlign = "End" Text = "{Binding TotalWordCount}" VerticalOptions = "Center" TextColor = "Gray" />
      < Label Grid.Column = "2" Text = "{x:Static local:FontAwesome.FACheck}" HorizontalTextAlignment = "End" HorizontalOptions = "End" FontFamily = "FontAwesome" XAlign = "Center" FontSize = "13" IsVisible = "{Binding IsToggled}" TextColor = "#1E90FF" />
   </ Grid >
</ ViewCell >

有谁能给我一些建议，告诉我如何把这个添加到我的C代码中。我只知道用XAML怎么做

注

下面是我学习动态样式的地方：

选项1：在C中定义自定义ViewCell# 这就是您共享的XAML模板的C#等价物的样子：

public class CustomViewCell : ViewCell
{
    public CustomViewCell()
    {
        var label1 = new Label
        {
            HorizontalOptions = LayoutOptions.StartAndExpand
        };

        //or, label1.Style = Device.Styles.ListItemTextStyle;
        label1.SetDynamicResource(VisualElement.StyleProperty, "ListItemTextStyle");
        Grid.SetColumn(label1, 0);
        label1.SetBinding(Label.TextProperty, "Name");

        var label2 = new Label
        {
            HorizontalOptions = LayoutOptions.End,
            //XAlign = TextAlignment.End, //not needed
            VerticalOptions = LayoutOptions.Center,
            TextColor = Color.Gray
        };

        //or, label2.Style = Device.Styles.ListItemTextStyle;
        label2.SetDynamicResource(VisualElement.StyleProperty, "ListItemTextStyle");
        Grid.SetColumn(label2, 1);
        label2.SetBinding(Label.TextProperty, "TotalWordCount");

        var label3 = new Label
        {
            HorizontalOptions = LayoutOptions.End,
            HorizontalTextAlignment = TextAlignment.End,
            VerticalOptions = LayoutOptions.Center,
            //XAlign = TextAlignment.Start, //not needed
            FontFamily = "FontAwesome",
            FontSize = 13,
            TextColor = Color.FromHex("#1E90FF"),
            Text = FontAwesome.FACheck,
        };
        Grid.SetColumn(label3, 2);
        label3.SetBinding(VisualElement.IsVisibleProperty, "IsToggled");

        var grid = new Grid
        {
            VerticalOptions = LayoutOptions.CenterAndExpand,
            Padding = new Thickness(20, 0),
            ColumnDefinitions = new ColumnDefinitionCollection()
            {
                new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) },
                new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Auto) },
                new ColumnDefinition() { Width = new GridLength(20) },
            },
            Children = {
                label1,
                label2,
                label3
            }
        };

        View = grid;
    }
}

<local:DynamicTableView ItemsSource="{Binding AllCategories}">
    <local:DynamicTableView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="75" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column = "0" HorizontalOptions = "StartAndExpand" Text = "{Binding Name}" />
                    <Label Grid.Column = "1" HorizontalOptions = "End" XAlign = "End" Text = "{Binding TotalWordCount}" VerticalOptions = "Center" TextColor = "Gray" />
                    <Switch Grid.Column = "2" HorizontalOptions = "End"  IsToggled = "{Binding IsToggled}"  />
                </Grid>
            </ViewCell>
        </DataTemplate>
    </local:DynamicTableView.ItemTemplate>
</local:DynamicTableView>

---

选项2：在XAML中定义自定义ViewCell 即使动态创建

TableView

，也可以使用基于XAML的方法。只需创建一个新的XAML控件，如下所示：

var section = new TableSection("Available Categories");
foreach (var category in categoryGroups)
{
   var cell = new MyViewCell { BindingContext = category };
   section.Add(cell);
}
tableView.Root.Add(section);

示例ViewCell XAML

<ViewCell 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="AppNamespace.MyViewCell">
    <Grid VerticalOptions="CenterAndExpand" Padding = "20, 0" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="75" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column = "0" HorizontalOptions = "StartAndExpand" Text = "{Binding Name}" />
        <Label Grid.Column = "1" HorizontalOptions = "End" XAlign = "End" Text = "{Binding TotalWordCount}" VerticalOptions = "Center" TextColor = "Gray" />
        <Switch Grid.Column = "2" HorizontalOptions = "End"  IsToggled = "{Binding IsToggled}"  />
    </Grid>
</ViewCell>

您可以创建

表格视图

，如下所示：

var section = new TableSection("Available Categories");
foreach (var category in categoryGroups)
{
   var cell = new MyViewCell { BindingContext = category };
   section.Add(cell);
}
tableView.Root.Add(section);

---

备选案文3。使用

ItemSource

支持，如

ListView

此外，在引用和的源代码时，和-看起来头/头模板属性只是充当

列表视图中一组控件的占位符。如果在标头中提供自定义控件，则框架将实例化并为其使用渲染器

因此，如果确实需要基于渲染器的自定义方法，则可以创建自定义控件（例如，
CustomListViewHeader
）；并为其实现一个iOS渲染器

然后，您可以在
列表视图
标题或标题模板中使用此控件

<ListView.Header>
   <local:CustomListViewHeader />
</ListView.Header>


“ListView.Header看起来像设置页面上的标题区域”的确切含义是什么？你只需要换一下颜色还是别的什么？你试过改变堆栈布局的颜色吗？嗨，Yuri，如果可能的话，我只想用iOS渲染器来定制它。希望更改标题，而不是在标题中添加新的stackLayout。如果其他答案还不够，请让我知道，或者更好地看看这里。此渲染器并不简单，我会尽量避免选项3。对于MVVM来说是一个不错的选择，但是在运行时不起作用。在运行时，我向表中添加一行时，它不会添加该行。解决方案是什么？我在绑定类的AllCategories列表中添加一行到表的页面。那么，我如何才能告诉表ItemSorce已更改？您必须修改
OnItemSourceChangeDimpl
以检查集合是否支持INotifyCollectionChanged并订阅它的事件。您可以使用可观察的集合作为源项。
public class SettingsViewModel {
    public Categories AllCategories => new Categories();
}

public class Category {
    public string Name { get; set; }
    public int TotalWordCount { get; set; }
    public bool IsToggled { get; set; }
}
public class Categories : Dictionary<string, List<Category>>
{
    public Categories()
    {
        this.Add("Available Categories", new List<Category>(new []{
            new Category(){ Name = "Test1", TotalWordCount = 10, IsToggled = true },
            new Category(){ Name = "Test2", TotalWordCount = 25, IsToggled = true },
            new Category(){ Name = "Test3", TotalWordCount = 20, IsToggled = false }
        }));

        this.Add("Other Categories", new List<Category>(new[]{
            new Category(){ Name = "Test-N1", TotalWordCount = 30, IsToggled = true },
            new Category(){ Name = "Test-N2", TotalWordCount = 50, IsToggled = false }
        }));
    }
}

<ListView.Header>
    <!-- don't forget to override spacing and padding properties to avoid default spacing -->
   <StackLayout Spacing="0" Padding="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
      <StackLayout.BackgroundColor>
         <OnPlatform x:TypeArguments="Color"
             Android=""
             WinPhone=""                                         
             iOS="#000000">
      </StackLayout.BackgroundColor>
      <StackLayout Padding="10,35,10,10" Orientation="Horizontal" HorizontalOptions="FillAndExpand">
         <local:ExtLabel ExtStyleId="Body" Text="Custom body Label"></local:ExtLabel>
         <local:ExtLabel ExtStyleId="Header" Text="Custom hdr Label"></local:ExtLabel>
      </StackLayout>
   </StackLayout>
</ListView.Header>

<ListView.Header>
   <local:CustomListViewHeader />
</ListView.Header>