[WPF] IGrouping 데이터 바인딩 하기

LINQ를 사용하다보면 group를 사용하여 그룹화를 시켜줄 때가 많다. 이때, group 사용 시에 IGrouping Interface를 반환받게 되는데 이것을 데이터 바인딩 하는 방법을 알아본다.

 

Model DTO

public class IoTStatus : BindableBase
{
    private int _line;
    public int Line
    {
        get { return _line; }
        set { SetProperty(ref _line, value); }
    }

    private int _table;
    public int Table
    {
        get { return _table; }
        set { SetProperty(ref _table, value); }
    }
}

Service

public async Task<List<IGrouping<int, IoTStatus>>> GetIotInfo(string ip)
{
    string response = await _service.GetIoTClientInfo(ip);
    List<IoTStatus> message = JsonConvert.DeserializeObject<List<IoTStatus>>(response);

    List<IGrouping<int, IoTStatus>> sort =
        (from status in message
            orderby status.Line, status.Table
            group status by status.Line into newGroup
            orderby newGroup.Key
            select newGroup).ToList();
    return sort;
}

ViewModel

    class MainWindowViewModel : BindableBase
    {
        private readonly IoTService _iot;

        private List<IGrouping<int, IoTStatus>> _status;
        public List<IGrouping<int, IoTStatus>> Status
        {
            get { return _status; }
            set { SetProperty(ref _status, value); }
        }

        public MainWindowViewModel()
        {
            _iot = new IoTService();
        }

        private async void OnTesetCommnad()
        {
            Status = await _iot.GetIotInfo("xxx.xxx.xxx.xxx");
        }
    }

View

<ItemsControl ItemsSource="{Binding Status}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical">
                <Border BorderBrush="Black" BorderThickness="1">
                    <TextBlock Width="200" Text="{Binding Key}" TextAlignment="Center"/>
                </Border>
                <Border BorderBrush="Black" BorderThickness="1">
                    <ItemsControl ItemsSource="{Binding Path=.}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Vertical"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border BorderBrush="Black" BorderThickness="1">
                                    <TextBlock Height="20" Text="{Binding Table}" TextAlignment="Center"/>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Border>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>