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

}








yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[sh_dotnet]
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
24/04/20 15:10:24
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube