选项1:在C#中定义自定义ViewCell
以下是您分享的XAML模板的C#等效代码:
public class CustomViewCell : ViewCell
{
public CustomViewCell()
{
var label1 = new Label
{
HorizontalOptions = LayoutOptions.StartAndExpand
};
label1.SetDynamicResource(VisualElement.StyleProperty, "ListItemTextStyle");
Grid.SetColumn(label1, 0);
label1.SetBinding(Label.TextProperty, "Name");
var label2 = new Label
{
HorizontalOptions = LayoutOptions.End,
VerticalOptions = LayoutOptions.Center,
TextColor = Color.Gray
};
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,
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中定义自定义的ViewCell
即使您是动态创建TableView
,您仍然可以使用基于XAML的方法。只需按以下方式创建一个新的XAML控件:
示例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>
代码后置
public partial class MyViewCell : ViewCell
{
public MyViewCell()
{
InitializeComponent();
}
}
您可以按照以下方式创建您的TableView
:
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. 创建自定义的
TableView
,支持
ItemSource
,类似于
ListView
。
public class DynamicTableView : TableView
{
public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
"ItemsSource", typeof(IDictionary), typeof(DynamicTableView), propertyChanging: OnItemsSourceChanged);
public IDictionary ItemsSource
{
get { return (IDictionary)GetValue(ItemsSourceProperty); }
set { SetValue(ItemsSourceProperty, value); }
}
public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(
"ItemTemplate", typeof(DataTemplate), typeof(DynamicTableView));
public DataTemplate ItemTemplate
{
get { return (DataTemplate)GetValue(ItemTemplateProperty); }
set { SetValue(ItemTemplateProperty, value); }
}
public DynamicTableView()
{
}
static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
{
((DynamicTableView)bindable).OnItemsSourceChangedImpl((IDictionary)oldValue, (IDictionary)newValue);
}
void OnItemsSourceChangedImpl(IDictionary oldValue, IDictionary newValue)
{
Root.Clear();
if(newValue != null)
{
FillContainer(newValue);
}
}
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);
}
}
ViewCell InflateTemplate(DataTemplate template, object item)
{
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="">
<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 = "" />
<Label Grid.Column = "1" HorizontalOptions = "End" XAlign = "End" Text = "" VerticalOptions = "Center" TextColor = "Gray" />
<Switch Grid.Column = "2" HorizontalOptions = "End" 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
来实现,无需使用自定义渲染器。
<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和
renderer的源代码时,
特别是此处 - 看起来头部/header-template属性只是在
ListView
中作为一组控件的占位符。如果您在header中提供自定义控件,则框架将实例化并使用其渲染器。因此,如果您确实需要基于自定义渲染器的方法,则可以创建一个自定义控件(例如
CustomListViewHeader
)并为其实现iOS渲染器。
然后,您可以在您的
ListView
头部或head-template中使用此控件。
<ListView.Header>
<local:CustomListViewHeader />
</ListView.Header>