[WP]バインディング 我流の覚書

WPアプリで動的なページ生成でほぼ必ず使うだろうバインディングの我流。
俺としてはコレが一番覚え安かった形なので、人によってはもっと簡単に作るかも。

今回はListBoxの中にタイルサイズの画像とテキストを2列表示する形式にします。
ヒトカラ行きたいので詳しい解説はしない。
[XAML]

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <ListBox Name="listBox1">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <toolkit:WrapPanel>
                    <Image Source="{Binding ImgSrc}" Width="173" Height="173" />
                    <StackPanel VerticalAlignment="Center">
                        <TextBlock Text="{Binding MainStr}"  FontSize="25" FontFamily="Yu Gothic" />
                        <TextBlock Text="{Binding SubStr}" FontSize="10" FontFamily="Yu Gothic" />
                    </StackPanel>
                </toolkit:WrapPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

今回はコンストラクタに記述するが、任意のタイミングの場所でよい。
その代わりWPの画面描画の流れを覚えていないとデータだけ追加されて表示されないということに陥るので注意
[C#]

public BindingTest()
{
    InitializeComponent();

    List<ListData> dataSource = new List<ListData>();
    ListData data;
    data = new ListData()
    {
        ImgSrc = new BitmapImage(new Uri(@"..\icons\menu.wifi.png", UriKind.Relative)),
        MainStr = "メインすとりんぐー!",
        SubStr = "さぶすとりんぐー!",
    };
    dataSource.Add(data);
    listBox1.ItemsSource = dataSource;
}

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中