Skip to content

Instantly share code, notes, and snippets.

@biac
Last active Dec 16, 2015
Embed
What would you like to do?
ListBox で選択されている Item の Index をデータにバインドしてみる。 [2013/4/12] データが int のときは右詰め、それ以外の時は左詰めにしてみた。 バリュー・コンバータについては、この記事参照(ステマw > http://www.atmarkit.co.jp/ait/articles/1304/11/news027.html
<!-- ページ・リソースにバリュー・コンバータとデータ・テンプレートを追加 -->
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">My Application</x:String>
<local:ObjectTypeToTextAlignmentConverter x:Key="ObjectTypeToTextAlignmentConverter" />
<DataTemplate x:Key="MyListboxItemTemplate">
<Grid HorizontalAlignment="Stretch" Width="150" Margin="0,0,20,0">
<TextBlock Text="{Binding}" TextAlignment="{Binding Converter={StaticResource ObjectTypeToTextAlignmentConverter}, Mode=OneWay}" />
</Grid>
</DataTemplate>
</Page.Resources>
<!-- 中略 -->
<!-- 画面に ListBox と TextBox (確認用) を配置する -->
<StackPanel x:Name="DataPanel" Orientation="Horizontal" Grid.Row="1" Margin="120,40,40,80">
<ListBox x:Name="listBox" VerticalAlignment="Top" Height="200"
ItemsSource="{Binding Items}" SelectedIndex="{Binding SelectedId, Mode=TwoWay}"
ItemTemplate="{StaticResource MyListboxItemTemplate}" >
<!-- SelectedIndex はデータの SelectedId にバインド。双方向にする。 -->
<ListBoxItem Content="選択項目壱" />
<ListBoxItem Content="選択項目弐" />
<ListBoxItem Content="選択項目参" />
</ListBox>
<TextBox VerticalAlignment="Top" Margin="10,0,0,0" TextAlignment="Right"
Text="{Binding SelectedId}" /> <!-- データの SelectedId をバインドして表示 (確認用) -->
</StackPanel>
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using Windows.UI.Xaml.Controls;
// 基本ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234237 を参照してください
namespace ListboxSelectedIndex
{
// バインドするデータ
class SampleData : Common.BindableBase
{
private object[] _items = {
"選択項目壱",
2,//"選択項目弐",
"選択項目参",
"選択項目肆",
5,//"選択項目伍",
"選択項目陸",
"選択項目漆",
"選択項目捌",
"選択項目玖",
};
public ObservableCollection<object> Items
{
get
{
return new ObservableCollection<object>(_items.ToList());
}
}
private int _selectedIndex = -1;
public int SelectedId
{
get { return this._selectedIndex; }
set { this.SetProperty(ref this._selectedIndex, value); }
}
}
/// <summary>
/// 多くのアプリケーションに共通の特性を指定する基本ページ。
/// </summary>
public sealed partial class MainPage : ListboxSelectedIndex.Common.LayoutAwarePage
{
public MainPage()
{
this.InitializeComponent();
this.DataPanel.DataContext = new SampleData(); // ここでバインドしてる
}
/// <summary>
/// このページには、移動中に渡されるコンテンツを設定します。前のセッションからページを
/// 再作成する場合は、保存状態も指定されます。
/// </summary>
/// <param name="navigationParameter">このページが最初に要求されたときに
/// <see cref="Frame.Navigate(Type, Object)"/> に渡されたパラメーター値。
/// </param>
/// <param name="pageState">前のセッションでこのページによって保存された状態の
/// ディクショナリ。ページに初めてアクセスするとき、状態は null になります。</param>
protected override void LoadState(Object navigationParameter, Dictionary<String, Object> pageState)
{
}
/// <summary>
/// アプリケーションが中断される場合、またはページがナビゲーション キャッシュから破棄される場合、
/// このページに関連付けられた状態を保存します。値は、
/// <see cref="SuspensionManager.SessionState"/> のシリアル化の要件に準拠する必要があります。
/// </summary>
/// <param name="pageState">シリアル化可能な状態で作成される空のディクショナリ。</param>
protected override void SaveState(Dictionary<String, Object> pageState)
{
}
}
}
using System;
namespace ListboxSelectedIndex
{
class ObjectTypeToTextAlignmentConverter : Windows.UI.Xaml.Data.IValueConverter
{
// 正方向(データ→画面)の変換
public object Convert(object value, Type targetType,
object parameter, string language)
{
if (value is int)
return Windows.UI.Xaml.TextAlignment.Right;
return Windows.UI.Xaml.DependencyProperty.UnsetValue;
}
// 逆方向(画面→データ)の変換(利用を想定していない)
public object ConvertBack(object value, Type targetType,
object parameter, string language)
{
return Windows.UI.Xaml.DependencyProperty.UnsetValue;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment