StackPanel에 ItemsSource로 바인딩하기

StackPanel은 내부의 컨트롤들을 Horizontal 또는 Vertical 상태로 정렬하는 기능을 가진 컨테이너 컨트롤입니다. 유용한 기능을 가진 컨테이너지만 내부의 컨트롤을 동적으로 생성하기 위한 ItemsSource를 가지고 있지 않기 때문에 다른 방법을 사용해야 합니다.

 

 

✅ StackPanel과 ItemsControl

 

 

ItemsControl

<ItemsControl ItemsSource="{Binding SomeCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>    
</ItemsControl>

ItemsControl의 ItemsPanel의 Tamplate로 StackPanel을 지정하고 ItemsControl의 ItemsSource에 ViewModel을 바인딩합니다.

 

 

 

 

ItemsControl.ItemTemplate

<ItemsControl ItemsSource="{Binding SomeCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Label VerticalContentAlignment="Center" Content="{Binding SomeData}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>    
    
</ItemsControl>

ItemsControl.ItemTemplate의 DataTemplate로 Label을 정의했습니다.

DataTemplate에 정의한 컨트롤 그룹이 StackPanel에 바인딩된 ViewModel의 Collection 만큼 나타납니다.

 

 

 

 

 

 

✅ StackPanel 과 ItemsControl - 끝