如何将带有<grid>的<viewcell>添加到C#中的TableView

时间:2017-08-14 00:37:03

标签: xamarin xamarin.forms

我构建了一个动态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我想使用一个ViewCell,其网格与我目前在XAML中的网格相同:

< 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中完成它。

请注意

以下是我学习动态样式的地方:

https://developer.xamarin.com/guides/xamarin-forms/user-interface/styles/device/

1 个答案:

答案 0 :(得分:8)

选项1:在C#

中定义自定义ViewCell

这就是您共享的XAML模板的C#等价物:

-classobfuscationdictionary empty.txt

选项2:在XAML中定义自定义ViewCell

即使您动态创建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; } } ,您仍然可以使用基于XAML的方法。只需创建一个新的XAML控件,如下所示:

示例ViewCell XAML

TableView

<强>代码隐藏

<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>

您可以按照以下方式创建public partial class MyViewCell : ViewCell { public MyViewCell() { InitializeComponent(); } }

TableView

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

TableView支持创建您自己的自定义ItemSource
ListView

用法如下:

public class DynamicTableView : TableView
{
    /// <summary>
    /// Bindable property for the data source
    /// </summary>
    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
        "ItemsSource", typeof(IDictionary), typeof(DynamicTableView), propertyChanging: OnItemsSourceChanged);

    /// <summary>
    /// Gets or sets the items source - can be any collection of elements.
    /// </summary>
    /// <value>The items source.</value>
    public IDictionary ItemsSource
    {
        get { return (IDictionary)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    /// <summary>
    /// Bindable property for the data template to visually represent each item.
    /// </summary>
    public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(
        "ItemTemplate", typeof(DataTemplate), typeof(DynamicTableView));

    /// <summary>
    /// Gets or sets the item template used to generate the visuals for a single item.
    /// </summary>
    /// <value>The item template.</value>
    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    /// <summary>
    /// Initializes an ItemsControl.
    /// </summary>
    public DynamicTableView()
    {

    }

    /// <summary>
    /// This is called when the underlying data source is changed.
    /// </summary>
    /// <param name="bindable">ItemsSource</param>
    /// <param name="oldValue">Old value.</param>
    /// <param name="newValue">New value.</param>
    static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((DynamicTableView)bindable).OnItemsSourceChangedImpl((IDictionary)oldValue, (IDictionary)newValue);
    }

    /// <summary>
    /// Instance method called when the underlying data source is changed through the
    /// <see cref="ItemsSource"/> property. This re-generates the list based on the 
    /// new collection.
    /// </summary>
    /// <param name="oldValue">Old value.</param>
    /// <param name="newValue">New value.</param>
    void OnItemsSourceChangedImpl(IDictionary oldValue, IDictionary newValue)
    {
        Root.Clear();
        if(newValue != null)
        {
            FillContainer(newValue);
        }
    }

    /// <summary>
    /// This method takes our items source and generates visuals for
    /// each item in the collection; it can reuse visuals which were created
    /// previously and simply changes the binding context.
    /// </summary>
    /// <param name="newValue">New items to display</param>
    void FillContainer(IDictionary newValue)
    {
        Root.Clear();

        var template = ItemTemplate;

        foreach(var key in newValue.Keys)
        {
            var tableSection = new TableSection() { Title = key.ToString() };
            var innerList = newValue[key] as IList;
            if (innerList == null)
                innerList = Enumerable.Repeat(newValue[key], 1).ToList();

            foreach(var dataItem in innerList)
            {
                if (template != null)
                {
                    var view = InflateTemplate(template, dataItem);
                    if (view != null)
                        tableSection.Add(view);
                }
                else
                {
                    var label = new TextCell { Text = dataItem.ToString() };
                    tableSection.Add(label);
                }
            }

            Root.Add(tableSection);
        }
    }

    /// <summary>
    /// Inflates the visuals for a data template or template selector
    /// and adds it to our StackLayout.
    /// </summary>
    /// <param name="template">Template.</param>
    /// <param name="item">Item.</param>
    ViewCell InflateTemplate(DataTemplate template, object item)
    {
        // Pull real template from selector if necessary.
        var dSelector = template as DataTemplateSelector;
        if (dSelector != null)
            template = dSelector.SelectTemplate(item, this);

        var view = template.CreateContent() as ViewCell;
        if (view != null)
        {
            view.BindingContext = item;
            return view;
        }

        return null;
    }
}

和示例数据集:

<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>

旧答案基于旧问题(不再有效)

如果您只需要为特定平台指定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 } })); } } BackgroundColor,则可以使用FontSize执行此操作 - 您不需要自定义渲染器。

OnPlatform

此外,在引用listviewrenderer以及specifically here的源代码时,看起来header / header-template属性只是作为一组控件的占位符在<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);并为它实现iOS渲染器。

然后,您可以在CustomListViewHeader标头或标头模板中使用此控件。

ListView