[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個をリスト化することができました!

 

 

コメント

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