[WPF] DataTemplateを使ってコントロール内に複数のコントロールを表示する

DataTemplateを使ってListBoxにButtonとTextBlockを表示します。

同じものを繰り返し表示しても面白くないので、
Buttonは徐々に大きくなるようにしてみましょう。

 

C#で作成したDataContext内のTextプロパティとHeightプロパティを
xaml側でTextBlockのTextプロパティとButtonのHeightプロパティにバインディングしています。

 

C#側のコード

まず、C#側でDataContextを作成します。

 

using System.Collections.ObjectModel;
using System.Linq;
using System.Windows;

namespace WpfApplication1
{
    /// 


<summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>



    public partial class MainWindow : Window
    {
        private ObservableCollection<ButtonTemplate> buttonTemplate;
        public MainWindow()
        {
            InitializeComponent();
            this.buttonTemplate = new ObservableCollection<ButtonTemplate>(Enumerable.Range(1, 20)
                .Select(_ => new ButtonTemplate
                {
                    Text = "Button" + _,
                    Height = 20 + _,
                }));
            this.DataContext = buttonTemplate;
        }
    }

    public class ButtonTemplate
    {
        public string Text { get; set; }
        public int Height { get; set; }
    }

}

 

xaml側のコード

次にxaml側のコードです。
C#側で作成したbuttonTemplateがMainWindowのDataContextに設定されています。
バインディングしてみましょう。

 

<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WpfApplication1" mc:Ignorable="d" Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ListBox ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <Button Height="{Binding Height}">
                            <TextBlock Text="{Binding Text}"/>
                        </Button>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

 

 

 

これで高さが徐々に大きくなるボタン20個をリスト化することができました!

 

 

コメント