UniformGrid에 ItemsSource를 사용하려면?

UniformGrid는 유용한 컨트롤이지만 Grid나 StackPanel보다는 상대적으로 덜 쓰이는 컨트롤이죠. 잘사용하면 정말 편리합니다. 특히 Dashboard를 구현할 때 편리합니다. 그런데 StackPanel과 마찬가지로 ItemsSource가 없기 때문에 다른 방법을 사용해줘야합니다. 사실 StackPanel과 같은 방법입니다.

 

 

✅ UniformGrid에 ItemsSource 달기

 

서두에 말씀드린 것 처럼 StackPanel과 같은 방식으로 하면 됩니다.

ItemsControl을 사용하는 것이죠.

 

 

View

<Window x:Class="UniformGridBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="UniformGrid Binding Example" Height="450" Width="800">
    <Window.DataContext>        
        <local:MainViewModel />
    </Window.DataContext>
    <Grid>
        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemsPanel>                
                <ItemsPanelTemplate>
                    <UniformGrid Rows="3" Columns="4" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>                
                <DataTemplate>
                    <Border BorderBrush="Black" BorderThickness="1" Margin="5">
                        <TextBlock Text="{Binding}" HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</Window>

 

 

 

ViewModel

using System.Collections.ObjectModel;

namespace UniformGridBindingExample
{
    public class MainViewModel
    {
        public ObservableCollection<string> Items { get; set; }

        public MainViewModel()
        {
            Items = new ObservableCollection<string>
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5",
                "Item 6",
                "Item 7",
                "Item 8"
            };
        }
    }
}

 

 

 

마무리

 

1. ItemsControl은 ItemsSource를 통해 Items 컬렉션을 바인딩.
2. 각 아이템은 DataTemplate에 정의된 방식으로 표시됨.
3. UniformGrid는 컬렉션 항목을 자동으로 레이아웃에 배치.

이렇게 하면 UniformGrid에 ItemsSource를 사용할 수 있게 됩니다.

 

 

 

 

 

✅ UniformGrid에 ItemsSource 달기 - 끝