ListView の ItemTemplate のデザイン時に必要なデータ |
|
ListMainDesignData.xaml
<local:MainViewModel
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ネームスペース">
<!--デザイン専用の内容が表示される、タグで作成したクラスデータ-->
<local:MainViewModel.statuses>
<local:ItemViewModel>
</local:ItemViewModel>
</local:MainViewModel.statuses>
</local:MainViewModel>
ListView の定義部分
<ListView
x:Name="SearchList"
ItemsSource="{Binding statuses}"
HorizontalAlignment="Left"
Height="348"
Margin="34,10,0,0"
Grid.Row="1"
VerticalAlignment="Top"
Width="1036"
BorderThickness="1"
BorderBrush="White">
<ListView.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
|
|
using System;
using System.ComponentModel;
using System.Collections.ObjectModel;
namespace Simple_Pages {
// *********************************************
// バインドする一覧データのを定義するクラス
// *********************************************
public class MainViewModel : INotifyPropertyChanged {
// *****************************************************
// コンストラクタ
// *****************************************************
public MainViewModel() {
// バインド用のコレクションのインスタンスを設定
this.statuses = new ObservableCollection<ItemViewModel>();
}
// *****************************************************
// バインド用のコレクションのプロパティ
// *****************************************************
public ObservableCollection<ItemViewModel> statuses { get; set; }
// *****************************************************
// データが変更された事を通知する為の実装
// *****************************************************
public event PropertyChangedEventHandler PropertyChanged;
public void NotifyPropertyChanged(String propertyName) {
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler) {
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
|
|
using System;
using System.ComponentModel;
using System.Linq.Expressions;
namespace Simple_Pages {
// *********************************************
// バインドする一覧データの構造を定義するクラス
// *********************************************
public class ItemViewModel : INotifyPropertyChanged {
// *********************************************
// 読み出し用 image エントリ
// *********************************************
public string image {
get { return user.profile_image_url; }
}
// *********************************************
// 読み出し用 表示名エントリ
// *********************************************
public string name {
get { return user.name; }
}
// *********************************************
// 本文 エントリ
// *********************************************
public string text { get; set; }
// *********************************************
// USER 情報 エントリ
// *********************************************
public UserInfo user { get; set; }
// *****************************************************
// データが変更された事を通知する為の実装
// *****************************************************
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName) {
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler) {
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
|
|
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;
using System.Linq.Expressions;
namespace Simple_Pages {
public class UserInfo : INotifyPropertyChanged {
// *********************************************
// JSON 変換用 name エントリ
// *********************************************
public string name { get; set; }
// *********************************************
// JSON 変換用 profile_image_url エントリ
// *********************************************
public string profile_image_url { get; set; }
// *****************************************************
// データが変更された事を通知する為の実装
// *****************************************************
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged(String propertyName) {
PropertyChangedEventHandler handler = PropertyChanged;
if (null != handler) {
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
|
ListView の ItemTemplate のサンプル |
|
<DataTemplate>
<StackPanel
Margin="0,0,0,4"
Height="130">
<!-- スクリーン名 表示 -->
<TextBlock
Text="{Binding name}"
TextWrapping="Wrap"
Padding="4" />
<Grid>
<!--列数は 3-->
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto" />
<ColumnDefinition
Width="1000" />
<ColumnDefinition
Width="200" />
</Grid.ColumnDefinitions>
<!--画像表示-->
<Image
Source="{Binding image}"
x:Name="UserImage"
HorizontalAlignment="Left"
Height="50"
Width="50"
VerticalAlignment="Top" />
<!--名称表示-->
<TextBlock
Text="{Binding text}"
TextWrapping="Wrap"
Margin="12,-6,400,0"
FontSize="24"
Grid.Column="1"
HorizontalAlignment="Left" />
<!--リンク-->
<HyperlinkButton
NavigateUri="{Binding link}"
Grid.Column="2"
HorizontalAlignment="Center"
VerticalAlignment="Top"
AutomationProperties.Name="リンク"
Style="{StaticResource AppBarButtonStyle}"
Content="" />
</Grid>
</StackPanel>
</DataTemplate>
|
|
sample5.json の参照
private async void Button_Click_2(object sender, RoutedEventArgs e) {
HttpClient client = new HttpClient();
string result = await client.GetStringAsync("http://toolbox.winofsql.jp/json/sample5.json");
Debug.WriteLine(result);
// データコンテキスト設定
this.SearchList.DataContext =
JsonConvert.DeserializeObject<MainViewModel>(result);
}
|
|