[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(num => new ButtonTemplate
                {
                    Text = "Button" + num,
                    Height = 20 + num,
                }));
            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個をリスト化することができました!

コメント

タイトルとURLをコピーしました