WPFで大量の箇条書きを作成する。

実現したいこと

スクロールを使って大量の箇条書きの表示を行いたいです。
また、その箇条書きの作成方法についてよい方法があれば教えていただきたいです。

背景

yt-dlpのGUIを作ってみようと思っています。
yt-dlpのオプションが膨大な量あるため、ウィンドウサイズが小さい時などにすべて表示しきれなくなることが想定されます。
その時にスクロールできるようになればいいなぁと思っています。

また、オプションが増えるたびにGrid.Rowを追加しているのですが、このの書き方だと利用するオプションが増えるたびにGrid.Rowが増えるし、既存のオプションの間に新しいオプションの追加すると地獄みたいになる気がします。
しかし、Grid.Rowの代わりにStackPanelを利用するとGrid.Columnによる横方向の整列に対する影響や、ScrollViewerが二つになってしまう問題があります。

発生している問題・エラーメッセージ

ScrollViewerを利用しているのですが、実行した際にウィンドウサイズを小さくして、箇条書き部分が見切れたとしてもスクロールができません。

該当のソースコード

問題のScrollViewerの利用部分は「」から始まるtabControlの部分です。

xml
1<Window x:Class="yt_dlp_gui.MainWindow"
2        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6        xmlns:local="clr-namespace:yt_dlp_gui"
7        mc:Ignorable="d"
8        Title="MainWindow" Height="450" Width="800">
9    <Grid>
10        <Grid.RowDefinitions>
11            <RowDefinition Height="Auto" />
12            <RowDefinition Height="Auto" />
13            <RowDefinition Height="Auto" />
14            <RowDefinition Height="Auto" />
15            <RowDefinition Height="Auto" />
16        </Grid.RowDefinitions>
17        <Grid.ColumnDefinitions>
18            <ColumnDefinition Width="1.5*" />
19            <ColumnDefinition Width="15*" />
20            <ColumnDefinition Width="1.5*"/>
21        </Grid.ColumnDefinitions>
22
23        <!--メニュー row="0"-->
24        <DockPanel LastChildFill="False" 
25                   Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" >
26            <Menu DockPanel.Dock="Top" Background="#0000" Height="20" BorderBrush="Black" BorderThickness="0,0,0,1">
27                <MenuItem Header="ヘルプ"/>
28                <MenuItem Header="ツール"/>
29                <MenuItem Header="オプション"/>
30            </Menu>
31        </DockPanel>
32
33        <!--ダウンロードする動画のURLの入力欄 row="1"-->
34        <Label Content="URL"
35               Margin="5,5,5,5"
36               Grid.Row="1" Grid.Column="0" />
37        <TextBox Margin="5,5,5,5" 
38                 Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1"/>
39
40        <!--保存を動画と音声のどちらでするかの選択 row="2"-->
41        <TabControl Margin="5" 
42                    Grid.ColumnSpan="3" Grid.Row="2" Grid.Column="0">
43            <!--動画形式で出力する場合-->
44            <TabItem Header="動画">
45                <ScrollViewer>
46                    <Grid>
47                        <Grid.ColumnDefinitions>
48                            <ColumnDefinition/>
49                            <ColumnDefinition/>
50                        </Grid.ColumnDefinitions>
51                        <Grid.RowDefinitions>
52                            <RowDefinition/>
53                            <RowDefinition/>
54                        </Grid.RowDefinitions>
55                        
56                        <Label Content="クオリティ" 
57                               Grid.Column="0" Grid.Row="0"/>
58                        <ComboBox SelectedIndex="0" 
59                                  Grid.Column="1" Grid.Row="0">
60                            <ComboBoxItem Content="最高"/>
61                        </ComboBox>
62                        
63                        <Label Content="フォーマット"
64                               Grid.Column="0" Grid.Row="1"/>
65                        <ComboBox SelectedIndex="0"
66                                      Grid.Column="1" Grid.Row="1">
67                            <ComboBoxItem Content="mp4"/>
68                        </ComboBox>
69                        <Label Content=""/>
70                    </Grid>
71                </ScrollViewer>
72            </TabItem>
73            
74            <!--音声形式で出力する場合-->
75            <TabItem Header="音声">
76                <Grid Background="#FFE5E5E5"/>
77            </TabItem>
78        </TabControl>
79
80        <!--保存先の設定 row="3"-->
81        <Label Content="保存先" 
82               Margin="5" 
83               Grid.Row="3" Grid.Column="0"/>
84        <TextBox Name="save_path" 
85                 Margin="5" 
86                 Grid.Row="3" Grid.Column="1"/>
87        <Button Content="参照" 
88                Name="select_folder_dialog" 
89                Click="select_folder_dialog_Click"
90                Margin="5" 
91                Grid.Row="3" Grid.Column="2"/>
92        
93        <!--保存ボタン row="4"-->
94        <Button Content="保存"
95                Name="download_and_save_button"
96                Click="download_and_save_button_Click"
97                Margin="5"
98                Grid.Row="4" Grid.Column="2"/>
99    </Grid>
100</Window>
101

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

.Net Framework 4.7.2
で作成しています。

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

回答2件

ベストアンサー

スクロールを使って大量の箇条書きの表示を行いたいです。
また、その箇条書きの作成方法についてよい方法があれば教えていただきたいです。

まず大前提としてサイズ変更できるウィンドウは、どこが伸縮すべきかを決めなければなりません。
通常は一番見せたいコンテンツが、中央で伸縮することが多いです。

例えばエクスプローラーだったら、高さ方向にはフォルダーツリーとファイル一覧が伸縮します（メニューバー・ツールバー・ステータスバーの高さは変わりません）
横方向ではアドレスバーとファイル一覧が伸縮します（フォルダーツリー・検索窓の幅は変わりません）
エクスプローラーの一番見せたいコンテンツはファイル一覧ということです。

ウィンドウを広げても空白エリアが増えるだけでは、何の意味もありませんよね？

それを踏まえてルートのGridの切り方を考えてみます。

xml
1<Grid.RowDefinitions>
2  <RowDefinition Height="Auto" />
3  <RowDefinition Height="Auto" />
4  <RowDefinition Height="Auto" />
5  <RowDefinition Height="Auto" />
6  <RowDefinition Height="Auto" />
7</Grid.RowDefinitions>
8<Grid.ColumnDefinitions>
9  <ColumnDefinition Width="1.5*" />
10  <ColumnDefinition Width="15*" />
11  <ColumnDefinition Width="1.5*" />
12</Grid.ColumnDefinitions>

この状態だと高さ方向（Row）に伸縮する部分がありません。
横方向（Column）では伸縮する必要がないもの（LabelやButton）まで伸縮し、文字が見切れたり間延びしてしまいます。

xml
1<Grid.RowDefinitions>
2  <RowDefinition Height="Auto" />
3  <RowDefinition Height="Auto" />
4  <RowDefinition Height="*" />
5  <RowDefinition Height="Auto" />
6  <RowDefinition Height="Auto" />
7</Grid.RowDefinitions>
8<Grid.ColumnDefinitions>
9  <ColumnDefinition Width="Auto" />
10  <ColumnDefinition Width="*" />
11  <ColumnDefinition Width="Auto" />
12</Grid.ColumnDefinitions>

伸縮してほしいのはTextBoxとTabControlでしょうから、こんな感じになりました。

しかし、Grid.Rowの代わりにStackPanelを利用するとGrid.Columnによる横方向の整列に対する影響

１対１（Width="*"）で切るなら基本的に揃いますし、SharedSizeGroupを使う手もあります。
方法: グリッド間でサイズ設定プロパティを共有する - WPF .NET Framework | Microsoft Learn

ScrollViewerが二つになってしまう問題があります。

ちょっと意味が分かりません。

ここまでの変更

xml
1<Window
2  x:Class="Qbg4qfznmoq54sj.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  <Grid>
8    <Grid.RowDefinitions>
9      <RowDefinition Height="Auto" />
10      <RowDefinition Height="Auto" />
11      <RowDefinition />
12      <RowDefinition Height="Auto" />
13      <RowDefinition Height="Auto" />
14    </Grid.RowDefinitions>
15    <Grid.ColumnDefinitions>
16      <ColumnDefinition Width="Auto" />
17      <ColumnDefinition />
18      <ColumnDefinition Width="Auto" />
19    </Grid.ColumnDefinitions>
20
21    <Menu Grid.ColumnSpan="3" Background="#0000" BorderBrush="Black" BorderThickness="0,0,0,1">
22      <MenuItem Header="ヘルプ" />
23      <MenuItem Header="ツール" />
24      <MenuItem Header="オプション" />
25    </Menu>
26
27    <Label Grid.Row="1" Margin="5" Content="URL" />
28    <TextBox Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="5" VerticalAlignment="Center" />
29
30    <TabControl Grid.Row="2" Grid.ColumnSpan="3" Margin="5">
31      <TabItem Header="動画">
32        <ScrollViewer VerticalScrollBarVisibility="Auto">
33          <StackPanel>
34            <Grid>
35              <Grid.ColumnDefinitions>
36                <ColumnDefinition />
37                <ColumnDefinition />
38              </Grid.ColumnDefinitions>
39              <Label Content="クオリティ" />
40              <ComboBox Grid.Column="1" SelectedIndex="0">
41                <ComboBoxItem Content="最高" />
42              </ComboBox>
43            </Grid>
44
45            <Grid>
46              <Grid.ColumnDefinitions>
47                <ColumnDefinition />
48                <ColumnDefinition />
49              </Grid.ColumnDefinitions>
50              <Label Content="フォーマット" />
51              <ComboBox Grid.Column="1" SelectedIndex="0">
52                <ComboBoxItem Content="mp4" />
53              </ComboBox>
54            </Grid>
55          </StackPanel>
56        </ScrollViewer>
57      </TabItem>
58
59      <TabItem Header="音声">
60        <ScrollViewer VerticalScrollBarVisibility="Auto">
61          <Grid Background="#FFE5E5E5" />
62        </ScrollViewer>
63      </TabItem>
64    </TabControl>
65
66    <Label Grid.Row="3" Margin="5" Content="保存先" />
67    <TextBox Grid.Row="3" Grid.Column="1" Margin="5" VerticalAlignment="Center" />
68    <Button Grid.Row="3" Grid.Column="2" MinWidth="80" Margin="5" VerticalAlignment="Center" Content="参照" />
69
70    <Button Grid.Row="4" Grid.Column="2" MinWidth="80" Margin="5" Content="保存" />
71  </Grid>
72</Window>

要件は満たせましたが各オプションのGridがだるいですし、Gridを田の字に切るのも好みではないですｗ

xml
1<Window
2  x:Class="Qbg4qfznmoq54sj.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  MinWidth="300"
8  MinHeight="300">
9  <Window.Resources>
10    <Style TargetType="HeaderedContentControl">
11      <Setter Property="Margin" Value="5" />
12      <Setter Property="Template">
13        <Setter.Value>
14          <ControlTemplate TargetType="HeaderedContentControl">
15            <Grid>
16              <Grid.ColumnDefinitions>
17                <ColumnDefinition Width="Auto" SharedSizeGroup="header" />
18                <ColumnDefinition Width="5" />
19                <ColumnDefinition />
20              </Grid.ColumnDefinitions>
21              <Label VerticalAlignment="Center" Content="{TemplateBinding Header}" />
22              <ContentPresenter Grid.Column="2" Content="{TemplateBinding Content}" />
23            </Grid>
24          </ControlTemplate>
25        </Setter.Value>
26      </Setter>
27    </Style>
28  </Window.Resources>
29  <Grid Grid.IsSharedSizeScope="True">
30    <Grid.RowDefinitions>
31      <RowDefinition Height="Auto" />
32      <RowDefinition Height="Auto" />
33      <RowDefinition />
34      <RowDefinition Height="Auto" />
35      <RowDefinition Height="Auto" />
36    </Grid.RowDefinitions>
37
38    <Menu Background="#0000" BorderBrush="Black" BorderThickness="0,0,0,1">
39      <MenuItem Header="ヘルプ" />
40      <MenuItem Header="ツール" />
41      <MenuItem Header="オプション" />
42    </Menu>
43
44    <HeaderedContentControl Grid.Row="1" Header="URL">
45      <TextBox VerticalAlignment="Center" />
46    </HeaderedContentControl>
47
48    <TabControl Grid.Row="2" Margin="5">
49      <TabControl.Resources>
50        <Style TargetType="HeaderedContentControl">
51          <Setter Property="Template">
52            <Setter.Value>
53              <ControlTemplate TargetType="HeaderedContentControl">
54                <Grid>
55                  <Grid.ColumnDefinitions>
56                    <ColumnDefinition />
57                    <ColumnDefinition />
58                  </Grid.ColumnDefinitions>
59                  <Label VerticalAlignment="Center" Content="{TemplateBinding Header}" />
60                  <ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" />
61                </Grid>
62              </ControlTemplate>
63            </Setter.Value>
64          </Setter>
65        </Style>
66      </TabControl.Resources>
67      <TabItem Header="動画">
68        <ScrollViewer VerticalScrollBarVisibility="Auto">
69          <StackPanel>
70            <HeaderedContentControl Header="クオリティ">
71              <ComboBox SelectedIndex="0">
72                <ComboBoxItem Content="最高" />
73              </ComboBox>
74            </HeaderedContentControl>
75
76            <HeaderedContentControl Header="フォーマット">
77              <ComboBox SelectedIndex="0">
78                <ComboBoxItem Content="mp4" />
79              </ComboBox>
80            </HeaderedContentControl>
81          </StackPanel>
82        </ScrollViewer>
83      </TabItem>
84
85      <TabItem Header="音声">
86        <ScrollViewer VerticalScrollBarVisibility="Auto">
87          <Grid Background="#FFE5E5E5" />
88        </ScrollViewer>
89      </TabItem>
90    </TabControl>
91
92    <HeaderedContentControl Grid.Row="3" Header="保存先">
93      <DockPanel>
94        <Button MinWidth="80" VerticalAlignment="Center" Content="参照" DockPanel.Dock="Right" />
95        <TextBox Margin="5" VerticalAlignment="Center" />
96      </DockPanel>
97    </HeaderedContentControl>
98
99    <Button Grid.Row="4" MinWidth="80" Margin="5" HorizontalAlignment="Right" Content="保存" />
100  </Grid>
101</Window>

こんな感じはどうでしょうか。
文字数は増えちゃってますが、見通しは良くなってると思います^^

投稿2023/03/12 22:17

編集2023/03/12 22:36

TN8001

総合スコア9317

syoshinsya-

2023/03/13 02:32

ありがとうございますどこが収縮すべきかを決めなければいけなかったのですね …いろいろなサイトで調べていたのですがここが原因とは思いませんでした。また、たくさんの箇条書きをするための案もありがとうございます。各要素の使い方などは調べるとたくさん出てくるのですが、こういうデザイン思想と言うか、設計思想の話が全然出てこなくて困っていたのでとても助かります。それにExtended.Wpf.ToolkitのPropertyGridもとても作りやすそうです。本当にありがとうございます

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

yt-dlpのオプションが膨大な量あるため、ウィンドウサイズが小さい時などにすべて表示しきれなくなることが想定されます。

「膨大」具合によりますが本当に膨大なら、Extended.Wpf.ToolkitのPropertyGridを使うとだいぶ楽になるかもしれません。
NuGet Gallery | Extended.Wpf.Toolkit 4.5.0
PropertyGrid · xceedsoftware/wpftoolkit Wiki

xml
1<Window
2  x:Class="Qbg4qfznmoq54sj.MainWindow"
3  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5  xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
6  Width="800"
7  Height="450">
8  <DockPanel>
9    <Button Click="Button_Click" Content="確認" DockPanel.Dock="Bottom" />
10    <xctk:PropertyGrid x:Name="propertyGrid" />
11  </DockPanel>
12</Window>

cs
1using System;
2using System.ComponentModel;
3using System.ComponentModel.DataAnnotations;
4using System.Windows;
5using Xceed.Wpf.Toolkit.PropertyGrid.Attributes;
6
7namespace Qbg4qfznmoq54sj
8{
9    public enum Enum { A, B, C, D }
10
11    [DisplayName("設定")]
12    [CategoryOrder("ほげ", 1), CategoryOrder("ふが", 2)]
13    public class Settings
14    {
15        [Category("ほげ"), PropertyOrder(1)]
16        [DisplayName("列挙型"), Description("列挙型だよ")]
17        [ItemsSource(typeof(EnumItemsSource))]
18        public Enum Enum { get; set; }
19
20        [Category("ほげ"), PropertyOrder(2)]
21        [DisplayName("ブール型"), Description("ブール型だよ")]
22        public bool Bool { get; set; }
23
24        [Category("ふが")]
25        [DisplayName("整数型"), Description("整数型だよ")]
26        [Range(0, 100)]
27        public int Int { get; set; }
28
29        [Category("ふが")]
30        [DisplayName("文字列型"), Description("文字列型だよ")]
31        public string String { get; set; }
32
33        [Category("ふが")]
34        [DisplayName("日時型"), Description("日時型だよ")]
35        public DateTime DateTime { get; set; }
36
37        public override string ToString() => $"{{{nameof(Enum)}={Enum}, {nameof(Bool)}={Bool}, {nameof(Int)}={Int}, {nameof(String)}={String}, {nameof(DateTime)}={DateTime}}}";
38    }
39
40    public class EnumItemsSource : IItemsSource
41    {
42        public ItemCollection GetValues() => new ItemCollection
43        {
44            { Enum.A, "えー" },
45            { Enum.B, "びー" },
46            { Enum.C, "しー" },
47            { Enum.D, "でー" },
48        };
49    }
50
51    public partial class MainWindow : Window
52    {
53        public MainWindow()
54        {
55            InitializeComponent();
56            propertyGrid.SelectedObject = new Settings();
57        }
58
59        private void Button_Click(object sender, RoutedEventArgs e)
60            => MessageBox.Show(propertyGrid.SelectedObject.ToString());
61    }
62}