【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>  

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

突き詰めると・・・

こんなこともできるみたいですね。
ListBoxをカスタマイズして都道府県の地図を選択するUIを作成する

参考

[C#][WPF]まばらなリストボックス ～こういうことも出来るんだ的～