SQLの窓 イラストAC フリー素材

2013年10月12日

VS2010(C#)WPF : ListView 内に GridView を配置する









以上で、ListView 内に GridView が配置され、GridViewColumn が一つ作成されています。この GridViewColumn の CellTemplate に対して、DataTemplate を適合させてデータバインドを行います。

DataTemplate(2列ぶん)
<Window.Resources>

	<Style
		TargetType="{x:Type ListView}">
		<Setter
			Property="ItemContainerStyle">
			<Setter.Value>
				<Style
					TargetType="ListViewItem">
					<Setter
						Property="VerticalContentAlignment"
						Value="Top" />
				</Style>
			</Setter.Value>
		</Setter>
	</Style>

	<!-- 一覧データ 用の表示部品定義 -->
	<DataTemplate
		x:Key="ListImageTemplate">

		<StackPanel
			HorizontalAlignment="Left"
			Width="60">
			<Image
				Source="{Binding image}"
				Width="50"
				Height="50" />
			<TextBlock
				Text="{Binding screen_name}"
				TextWrapping="Wrap"
				Padding="4" />
		</StackPanel>

	</DataTemplate>

	<DataTemplate
		x:Key="ListDataTemplate">

		<StackPanel
			Margin="0,0,0,17"
			Width="250">
			<Border
				BorderThickness="1"
				BorderBrush="Black"
				Padding="4">
				<TextBlock
					Text="{Binding name}"
					TextWrapping="Wrap" />
			</Border>
			<TextBlock
				Text="{Binding text}"
				TextWrapping="Wrap"
				Padding="3" />
		</StackPanel>

	</DataTemplate>
</Window.Resources>


ListView に対する設定
<ListView
	Grid.Row="1"
	Height="227"
	HorizontalAlignment="Left"
	Margin="23,13,0,0"
	Name="listView1"
	VerticalAlignment="Top"
	Width="459"
	ItemsSource="{Binding statuses}">
	<ListView.View>
		<GridView>
			<GridViewColumn
				CellTemplate="{StaticResource ListImageTemplate}" />
			<GridViewColumn
				CellTemplate="{StaticResource ListDataTemplate}" />
		</GridView>
	</ListView.View>
</ListView>


バインド用のグループクラス
using System;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace WpfApp1
{
	public class MainViewModel {
		public MainViewModel() 	{
			this.statuses = new ObservableCollection<ItemViewModel>();
		}
		public ObservableCollection<ItemViewModel> statuses { get; set; }
	}
}


バインド用の明細クラス
using System;
using System.ComponentModel;
using System.Linq.Expressions;

namespace WpfApp1
{
	public class ItemViewModel : INotifyPropertyChanged 	{
		public string image { get; set; }
		public string text { get; set; }
		public string name { get; set; }
		public string screen_name { get; set; }

		public event PropertyChangedEventHandler PropertyChanged;
		public void NotifyPropertyChanged(String propertyName) {
			PropertyChangedEventHandler handler = PropertyChanged;
			if (null != handler) {
				handler(this, new PropertyChangedEventArgs(propertyName));
			}
		}
	}
}

データのロード部分
MainViewModel mvm = new MainViewModel();
mvm.statuses.Add(new ItemViewModel() {
	image = "https://lh3.googleusercontent.com/-1n_3a1aPisc/UNSrq1LzhpI/AAAAAAAAKdA/qMQKXmdZlf4/s200/freefont_hanko_ume-pgo4.png",
	screen_name = "sworc",
	name = "夜歩き",
	text = "ListView に GridView を実装する手順"
});

this.listView1.DataContext = mvm;




【C#の最新記事】
posted by at 2013-10-12 02:42 | C# | このブログの読者になる | 更新情報をチェックする


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX