uwp - ListViewRenderer を使用して Xamarin UWP で ListView の GroupHeader テンプレートを使用する方法

Question

で以下をHeaderTemplate定義していApp.xamlます。

<DataTemplate x:Key="ListViewGroupHeaderTemplate">
    <TextBlock Foreground="Black" Text="Something" />
</DataTemplate>

私は私の中でこのようにそれを使用しますListViewRenderer:

listView.ItemTemplate = App.Current.Resources["ListViewItemTemplate"] as Windows.UI.Xaml.DataTemplate;
var gs = new GroupStyle();
gs.HeaderTemplate = App.Current.Resources["ListViewGroupHeaderTemplate"] as Windows.UI.Xaml.DataTemplate;
listView.GroupStyle.Add(gs);

私のソースListViewは次のCollectionViewSourceとおりです。

CollectionViewSource cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true;

cvs.Source = ((SourceListView)Element).Items;
if (listView.ItemsSource == null)
  listView.ItemsSource = cvs.View;

はItemTemplateうまくいきます。

これは私のListView外観です（白い部分はグループヘッダーです）：

ヘッダーを機能させるには何を設定すればよいですか?

更新：

答えに従ってソースを変更しました（単純なリストにグループ化を適用しました）：

    CollectionViewSource cvs = new CollectionViewSource();
    cvs.IsSourceGrouped = true;
    var items = ((MyListView)Element).Items;
    var itemsAsOC = items as ObservableCollection<GroupListItem>;
    List<ListItem> list = new List<ListItem>();
    foreach (var item in itemsAsOC)
    {
      list.AddRange(item);
    }
    var group = from item in list group item by item.Value into grp orderby grp.Key select grp;                
    cvs.Source = group;

ヘッダーは何も変わっていないので、データソースは正しいと思いますが、テンプレートの処理に Xamarin UWP の重大なバグがあります。

更新 2:

Xamarin renderer なしでテストしたところ、ヘッダー項目が表示されました。

ただし、Xamarin レンダラーを使用すると、ヘッダーがなくなります。

ダウンロードして動作をテストできます。

score 0 · Accepted Answer

わかりました、ついにこの問題に1日半苦労した後、私は解決策を見つけました. いつか誰かが私と同じ問題に直面したら、ここに投稿します。実際、それは本当に奇妙な問題であり、それがバグなのか、実装されていない機能なのか、それとも何なのかわかりません...

ソリューション：

UWP カスタムレンダラーでは、これを行う必要があります。

 protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null)
        {
            e.NewElement.GroupHeaderTemplate = new Xamarin.Forms.DataTemplate(() =>
            {
                var label = new Label();

                label.SetBinding(Label.TextProperty, "Country");

                return new ViewCell { View = label };
            });
        }
    }

「Country」は、グループ/ヘッダーを表すクラスのプロパティの名前です。

score 0 · Accepted Answer

基本的に、コードに明確な問題は見つかりませんでした。GroupHeaderテンプレートをに追加する方法は次のとおりListViewです。

App.xaml で:

<Application.Resources>
    <DataTemplate x:Key="ListViewGroupHeaderTemplate">
        <TextBlock Foreground="Red" Text="{Binding Key}" />
    </DataTemplate>
    <DataTemplate x:Key="ListViewTemplate">
        <TextBlock Foreground="Black" Text="{Binding DateTimeProperty}" />
    </DataTemplate>
</Application.Resources>

これが私のアイテムクラスと私のものSourceListViewです:

public class ListItem
{
    public DateTime DateTimeProperty { get; set; }
}

public class SourceListView
{
    public SourceListView()
    {
        Element = from x in Collection group x by x.DateTimeProperty.Year into grp orderby grp.Key select grp;
    }

    public IList<ListItem> Collection { get; set; } = new List<ListItem>()
    {
        new ListItem() {DateTimeProperty = DateTime.Parse("2011-08-01") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2011-08-21") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2012-04-03") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2012-04-01") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2013-05-15") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2013-05-06") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2013-05-01") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2013-06-01") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2013-06-09") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2014-10-02") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2014-10-11") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2015-12-03") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2016-07-01") },
        new ListItem() {DateTimeProperty = DateTime.Parse("2016-07-06") },
    };

    public IEnumerable<object> Element { get; }
}

この grouped の実装コードは次のListViewとおりです。

ListView listView = new ListView();
listView.ItemTemplate = App.Current.Resources["ListViewTemplate"] as Windows.UI.Xaml.DataTemplate;
var gs = new GroupStyle();
gs.HeaderTemplate = App.Current.Resources["ListViewGroupHeaderTemplate"] as Windows.UI.Xaml.DataTemplate;
listView.GroupStyle.Add(gs);

CollectionViewSource cvs = new CollectionViewSource();
cvs.IsSourceGrouped = true;
cvs.Source = new SourceListView().Element;
if (listView.ItemsSource == null)
    listView.ItemsSource = cvs.View;
rootGrid.Children.Add(listView);

レンダリングイメージは次のとおりです。

uwp - ListViewRenderer を使用して Xamarin UWP で ListView の GroupHeader テンプレートを使用する方法

2 に答える 2

Related

Reference