[XAML] ループして繰り返し出力する方法

XAMLでループ

XAMLを描いているときに任意のコントロールをループして出力したくなったのでメモ。

ViewModel に MyList というリスト型のプロパティを持たせて、これをループして画面に列挙する例を考えます。

まず、コードビハインドに ViewModel を DataContext にバインディングしておきます。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.DataContext = new ViewModel();
    }

    public class ViewModel
    {
        public List<string> MyList { get; } = new List<string>()
        {
            "Item1", "Item2", "Item3"
        };
    }
}

XAML側では以下のようにします。

<Grid>
    <ItemsControl ItemsSource="{Binding MyList}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

<ItemsControl> の ItemsSource プロパティにコレクションをバインドします。コレクションの要素数分だけ以下の要素が繰り返し出力されます。

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <!-- ここに繰り返し要素 -->
    </DataTemplate>
</ItemsControl.ItemTemplate>

こんな感じです。

以上。