VS2012(C#) ストア : ListView デザイン

  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 の定義部分

上記データを参照する場合、d:DataContext="{d:DesignData ListMainDesignData.xaml}" を属性として追加しますが、MainViewModel と ItemViewModel の定義が必要です

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




  MainViewModel.cs



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));
			}
		}
	}
}



  ItemViewModel.cs

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));
			}
		}
	}
}



  UserInfo.cs

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="&#xE102;" />

		</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);

}














  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ