ListBoxのItemsPanelコントロールの役割

前提・実現したいこと

ListBoxのItemsPanelコントロールで何ができるのかイメージが付かないため質問させていただきます。

カレンダーアプリを作成するのに、以前ここで質問をさせていただきました。
その際にもらったコードを基に勉強しているのですが、ItemsPanelを使用している箇所があり、ItemsPanelについて調べたのですが、何ができるのか、どういう役割なのかなど理解できなかったため教えていただきたいです。

よろしくお願いします。

該当のソースコード

<～省略～>
<DockPanel>
    <DockPanel Margin="10" DockPanel.Dock="Bottom">
      <Button Command="{Binding AddCommand}" Content="Add" DockPanel.Dock="Right" IsDefault="True" />
      <TextBox Text="{Binding Text, UpdateSourceTrigger=PropertyChanged}" />
    </DockPanel>

    <GroupBox Margin="10" Padding="10">
      <GroupBox.Header>
        <StackPanel Orientation="Horizontal">
          <TextBlock VerticalAlignment="Center" Text="{Binding HeaderMonth}" />
          <Button Command="{Binding PreviousCommand}" Content="＜" />
          <Button Command="{Binding NextCommand}" Content="＞" />
        </StackPanel>
      </GroupBox.Header>

      <ListBox HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" ItemsSource="{Binding Items}" SelectedItem="{Binding Selected}">
        <ListBox.Template>
          <ControlTemplate TargetType="ListBox">
            <Border BorderBrush="Black" BorderThickness="1">
              <DockPanel>
                <Border BorderBrush="Black" BorderThickness="0,0,0,1" DockPanel.Dock="Top">
                  <UniformGrid Columns="7">
                    <UniformGrid.Resources>
                      <Style TargetType="Label">
                        <Setter Property="Margin" Value="1,0,0,0" />
                        <Setter Property="Padding" Value="0" />
                        <Setter Property="HorizontalContentAlignment" Value="Center" />
                        <Setter Property="Background" Value="#B0E0E6" />
                      </Style>
                    </UniformGrid.Resources>
                    <Label Margin="0" Content="日" Foreground="Red" />
                    <Label Content="月" />
                    <Label Content="火" />
                    <Label Content="水" />
                    <Label Content="木" />
                    <Label Content="金" />
                    <Label Content="土" Foreground="Blue" />
                  </UniformGrid>
                </Border>
                <ItemsPresenter />
              </DockPanel>
            </Border>
          </ControlTemplate>
        </ListBox.Template>

        <ListBox.ItemsPanel>
          <ItemsPanelTemplate>
            <UniformGrid Columns="7" FirstColumn="{Binding FirstDayOffset}" />
          </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBox.ItemTemplate>
          <DataTemplate>
            <DockPanel>
              <TextBlock HorizontalAlignment="Center" DockPanel.Dock="Top" Foreground="{Binding Color}" Text="{Binding Day}" />
              <ItemsControl ItemsSource="{Binding Schedules}" />
            </DockPanel>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
    </GroupBox>
  </DockPanel>

試したこと

下記サイトを見ていました。

[ItemsControl.ItemsPanel プロパティ]
(https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.controls.itemscontrol.itemspanel?view=net-5.0)

補足情報（FW/ツールのバージョンなど）

VisualStudio2019
.Net Core3.0
Livet v3.2.1

行動規範の内容に同意します

回答2件

ベストアンサー

ListBoxは通常縦に並んだアイテムを選択するコントロールですが、あくまでデフォルトがそういう見た目なだけであって、WPFでは見た目を柔軟にカスタマイズできます。

前回の回答でも紹介していますが↓のItemsPanelのところを見てください。
ItemsControl 攻略～外観のカスタマイズ | grabacr.nét

コレクション中の個々のアイテムの並べ方をカスタマイズするテンプレートです。

指定できるのはPanelクラスの派生クラスです。

Canvas・Grid・UniformGrid・StackPanel（VirtualizingStackPanel）・WrapPanelあたりでしょうか。

前回の回答でUniformGridを使ったのは、カレンダーは列数が固定・個々のアイテムサイズが同じという点がぴったりだったためです。

今回の回答でもUniformGridを使用しましたが、（用途が合えば）大変便利なのですがあまり知られていないような気がします。

CanvasやGridは何もしないとすべて重なってしまうので、あまりItemsPanel向きとは言えないですね。

しかし実際に使うかは別としてこういったListBoxも作成可能です。
ListBoxをカスタマイズして都道府県の地図を選択するUIを作成する - Yamakiの日記

xml
1<Window
2  x:Class="Questions337152.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  Width="800"
6  Height="450">
7  <Window.Resources>
8    <!--  サンプルデータ 特に気にする必要はない  -->
9    <ObjectDataProvider
10      xmlns:linq="clr-namespace:System.Linq;assembly=System.Core"
11      xmlns:sys="clr-namespace:System;assembly=mscorlib"
12      x:Key="One2Hundred"
13      MethodName="Range"
14      ObjectType="{x:Type linq:Enumerable}">
15      <ObjectDataProvider.MethodParameters>
16        <sys:Int32>1</sys:Int32>
17        <sys:Int32>100</sys:Int32>
18      </ObjectDataProvider.MethodParameters>
19    </ObjectDataProvider>
20  </Window.Resources>
21
22  <UniformGrid Columns="3">
23
24    <GroupBox Header="Nomal(StackPanel Vertical)">
25      <ListBox ItemsSource="{Binding Source={StaticResource One2Hundred}}" />
26    </GroupBox>
27
28    <GroupBox Header="StackPanel Horizontal">
29      <ListBox ItemsSource="{Binding Source={StaticResource One2Hundred}}">
30        <ListBox.ItemsPanel>
31          <ItemsPanelTemplate>
32            <StackPanel Orientation="Horizontal" />
33          </ItemsPanelTemplate>
34        </ListBox.ItemsPanel>
35      </ListBox>
36    </GroupBox>
37
38    <GroupBox Header="UniformGrid">
39      <ListBox ItemsSource="{Binding Source={StaticResource One2Hundred}}">
40        <ListBox.ItemsPanel>
41          <ItemsPanelTemplate>
42            <UniformGrid Columns="5" />
43          </ItemsPanelTemplate>
44        </ListBox.ItemsPanel>
45      </ListBox>
46    </GroupBox>
47
48    <GroupBox Header="WrapPanel Horizontal">
49      <!--  横スクロールを規制しないと横に伸びきってしまって、StackPanel Horizontalと同じになってしまう  -->
50      <ListBox ItemsSource="{Binding Source={StaticResource One2Hundred}}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
51        <ListBox.ItemsPanel>
52          <ItemsPanelTemplate>
53            <WrapPanel />
54          </ItemsPanelTemplate>
55        </ListBox.ItemsPanel>
56      </ListBox>
57    </GroupBox>
58
59    <GroupBox Header="WrapPanel Vertical">
60      <!--  縦スクロールを規制しないと縦に伸びきってしまって、StackPanel Verticalと同じになってしまう  -->
61      <ListBox ItemsSource="{Binding Source={StaticResource One2Hundred}}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
62        <ListBox.ItemsPanel>
63          <ItemsPanelTemplate>
64            <WrapPanel Orientation="Vertical" />
65          </ItemsPanelTemplate>
66        </ListBox.ItemsPanel>
67      </ListBox>
68    </GroupBox>
69
70    <GroupBox Header="Grid">
71      <ListBox ItemsSource="{Binding Source={StaticResource One2Hundred}}">
72        <ListBox.ItemsPanel>
73          <ItemsPanelTemplate>
74            <Grid />
75          </ItemsPanelTemplate>
76        </ListBox.ItemsPanel>
77      </ListBox>
78    </GroupBox>
79
80  </UniformGrid>
81</Window>

投稿2021/05/08 05:48

編集2023/07/27 13:32

TN8001

総合スコア9862

退会済みユーザー

2021/05/08 06:58

ありがとうございます。同じタイミングで前回の質問で回答いただいたサイトに記載があることに気が付き、理解することができました。今回の場合だと、UniformGridが最適だということもわかりました。他のPanelのパターンも載せていただきありがとうございます。自分の環境でも確認して理解を深めたいと思います。

行動規範の内容に同意します