【WPF】 GridPanell 리스트 박스 작성 방법 【C#】

이번 기사의 목적

리스트 박스의 사용법을 넷으로 조사하고 있어도 좀처럼 나오지 않아 조사하는데 시간이 걸렸기 때문에.

DataContext에 컬렉션 추가

Window1.cs

    public partial class Window1 : Window  
    {  
        public Window1()  
        {  
            InitializeComponent();  

            var items = new ObservableCollection<Item>  
            {  
                new Item { Row = 0, Col = 1, Name="本" },  
                new Item { Row = 0, Col = 2, Name="ペン" },  
                new Item { Row = 1, Col = 3, Name="ノート" },  
            };  
            DataContext = items;  
        }  
    }  

처리가 늦어져 버리므로 본래 이 클래스에는 쓰고 싶지 않습니다만 이번은 설명이므로 이 클래스를 사용하고 있습니다. ItemClass에는 Row, Col, Name의 속성을 만들어 둡니다.

화면에 ListBox와 TextBox를 두 개 놓고 바인드합니다.

Mainwindow.xaml

       <ListBox HorizontalAlignment="Center" Height="200" VerticalAlignment="Center" Width="285" 
                 ScrollViewer.HorizontalScrollBarVisibility="Disabled" Style="{StaticResource itemsStyle}" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Margin="0"
                 ItemsSource="{Binding}">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
        </ListBox>

그러나 이대로 실행해도 ItemsContainerStyle 속성에 Grid.Row와 Grid.Column의 첨부 속성을 지정하지 않으면 모두 0,0의 위치에 겹쳐 버리므로

MainWindow.xaml

    <Window.Resources>
        <DataTemplate x:Key="itemList" DataType="{x:Type local:Item}">
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
        <Style x:Key="itemsStyle" TargetType="{x:Type ListBox}">
            <Setter Property="ItemTemplate" Value="{StaticResource itemList}"/>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Grid.Row" Value="{Binding Row}"/>
                        <Setter Property="Grid.Column" Value="{Binding Col}"/>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>  

그리고 스타일을 추가하여 완성입니다.

찌르면 ...

이런 일도 할 수 있는 것 같네요.
ListBox를 사용자 정의하여 도도부 현의 지도를 선택하는 UI 만들기

참고

[C#][WPF]눈부신 리스트 박스 ～이런 일도 할 수 있는 적～