質問編集履歴

1

試したこと、実現したいことの項目を追加致しました。

2018/04/25 02:22

投稿

takuo-nkmr
takuo-nkmr

スコア8

test CHANGED
File without changes
test CHANGED
@@ -32,6 +32,288 @@
32
32
 
33
33
 
34
34
 
35
+ ### 試したこと
36
+
37
+
38
+
39
+ ListViewにバインドするデータが2階層となっているもののサンプルを作成致しました。
40
+
41
+ [https://github.com/takuo-nkmr/NestedListViewSample
42
+
43
+ ](https://github.com/takuo-nkmr/NestedListViewSample)
44
+
45
+
46
+
47
+ 該当のソースは下記となります。
48
+
49
+
50
+
51
+ **NestedListViewSamplePage.xaml**
52
+
53
+ ```xml
54
+
55
+ <?xml version="1.0" encoding="utf-8"?>
56
+
57
+ <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
58
+
59
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
60
+
61
+ xmlns:local="clr-namespace:NestedListViewSample"
62
+
63
+ x:Class="NestedListViewSample.NestedListViewSamplePage"
64
+
65
+ Title="Nested ListView Sample">
66
+
67
+ <ListView x:Name="ItemDataList"
68
+
69
+ HasUnevenRows="True"
70
+
71
+ SeparatorColor="Transparent"
72
+
73
+ IsGroupingEnabled="True">
74
+
75
+ <ListView.GroupHeaderTemplate>
76
+
77
+ <DataTemplate>
78
+
79
+ <ViewCell>
80
+
81
+ <StackLayout>
82
+
83
+ <Label FontSize="20" FontAttributes="Bold"
84
+
85
+ Text="{Binding Key.FirstItemName}"/>
86
+
87
+ <Image Source="drawable/test_img.png"
88
+
89
+ HorizontalOptions="Start"
90
+
91
+ HeightRequest="50"/>
92
+
93
+ </StackLayout>
94
+
95
+ </ViewCell>
96
+
97
+ </DataTemplate>
98
+
99
+ </ListView.GroupHeaderTemplate>
100
+
101
+ <ListView.ItemTemplate>
102
+
103
+ <DataTemplate>
104
+
105
+ <ViewCell>
106
+
107
+ <StackLayout>
108
+
109
+ <Label Text="{Binding SecondItemName}"/>
110
+
111
+ </StackLayout>
112
+
113
+ </ViewCell>
114
+
115
+ </DataTemplate>
116
+
117
+ </ListView.ItemTemplate>
118
+
119
+ </ListView>
120
+
121
+ </ContentPage>
122
+
123
+ ```
124
+
125
+
126
+
127
+ **コードビハインド**
128
+
129
+ ```c#
130
+
131
+ using System;
132
+
133
+ using System.Collections.Generic;
134
+
135
+ using System.Collections.ObjectModel;
136
+
137
+ using NestedListViewSample.Model;
138
+
139
+ using Xamarin.Forms;
140
+
141
+
142
+
143
+ namespace NestedListViewSample
144
+
145
+ {
146
+
147
+ public partial class NestedListViewSamplePage : ContentPage
148
+
149
+ {
150
+
151
+ ObservableCollection<Grouping<ItemModel, SecondItem>> Itemist { get; set; } =
152
+
153
+ new ObservableCollection<Grouping<ItemModel, SecondItem>>();
154
+
155
+
156
+
157
+ public NestedListViewSamplePage()
158
+
159
+ {
160
+
161
+ InitializeComponent();
162
+
163
+
164
+
165
+ for (var i = 0; i < 30; i++)
166
+
167
+ {
168
+
169
+ // 1階層目セット
170
+
171
+ var itemData = new ItemModel()
172
+
173
+ {
174
+
175
+ FirstItemName = "アイテム名 1 - " + i.ToString()
176
+
177
+ };
178
+
179
+
180
+
181
+ // 2階層目セット
182
+
183
+ var secondItemList = new List<SecondItem>();
184
+
185
+ for (var j = 0; j < 3; j++)
186
+
187
+ {
188
+
189
+ secondItemList.Add(new SecondItem
190
+
191
+ {
192
+
193
+ SecondItemName = "アイテム名 2 - " + j.ToString()
194
+
195
+ });
196
+
197
+ }
198
+
199
+ itemData.SecondItems = secondItemList;
200
+
201
+
202
+
203
+ var group = new Grouping<ItemModel, SecondItem>(itemData, itemData.SecondItems);
204
+
205
+
206
+
207
+ Itemist.Add(group);
208
+
209
+ }
210
+
211
+ ItemDataList.ItemsSource = Itemist;
212
+
213
+ }
214
+
215
+ }
216
+
217
+
218
+
219
+ public class Grouping<K, T> : ObservableCollection<T>
220
+
221
+ {
222
+
223
+ public K Key { get; private set; }
224
+
225
+
226
+
227
+ public Grouping(K key, IEnumerable<T> items)
228
+
229
+ {
230
+
231
+ Key = key;
232
+
233
+ foreach (var item in items)
234
+
235
+ this.Items.Add(item);
236
+
237
+ }
238
+
239
+ }
240
+
241
+ }
242
+
243
+
244
+
245
+ ```
246
+
247
+
248
+
249
+ **モデルクラス**
250
+
251
+ ```c#
252
+
253
+ using System;
254
+
255
+ using System.Collections.Generic;
256
+
257
+
258
+
259
+ namespace NestedListViewSample.Model
260
+
261
+ {
262
+
263
+ public class ItemModel
264
+
265
+ {
266
+
267
+ public string FirstItemName { get; set; }
268
+
269
+ public List<SecondItem> SecondItems { get; set; }
270
+
271
+ }
272
+
273
+
274
+
275
+ public class SecondItem
276
+
277
+ {
278
+
279
+ public string SecondItemName { get; set; }
280
+
281
+ }
282
+
283
+ }
284
+
285
+
286
+
287
+ ```
288
+
289
+  
290
+
291
+
292
+
293
+ 上記のようなグループ構成としてはみたものの、GroupHeaderで1行、Itemで1行(ソースでは固定で3行)と
294
+
295
+ なってしまいます。
296
+
297
+ Header + Item全部を1行として、ListViewで選択可能としたいです。
298
+
299
+ (このために、別で全てをItemに格納して表示させてみたのですが、今度はItemModel.SecondItemの内容が
300
+
301
+ 表示できず・・・)
302
+
303
+
304
+
305
+
306
+
307
+
308
+
309
+ ### 実現したいこと
310
+
311
+ 1. ItemModelクラスの1つをListViewの1行として表示したいです。
312
+
313
+ 2. SecondItemクラスの内容全てを1行の中の要素として表示したいです。
314
+
315
+
316
+
35
317
 
36
318
 
37
319
  ### 補足情報(FW/ツールのバージョンなど)