【WPF】GridPanellリストボックス作成方法【C#】

## 今回の記事の目的

　リストボックスの使い方をネットで調べていてもなかなか出てこなくて調べるのに時間がかかったため。

##　DataContextにコレクションを追加

```csharp: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>  
```


とstyleを追加して完成です。

## 突き詰めると・・・
![20071011163943.png](https://qiita-image-store.s3.amazonaws.com/0/183354/8f42d752-cded-56cf-0abc-9400e0bbc569.png)

こんなこともできるみたいですね。
[ListBoxをカスタマイズして都道府県の地図を選択するUIを作成する](http://d.hatena.ne.jp/Yamaki/20071011/1192091886)



## 参考
[[C#][WPF]まばらなリストボックス ～こういうことも出来るんだ的～](http://blogs.wankuma.com/kazuki/archive/2008/02/13/122966.aspx)