質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

Q&A

解決済

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

syoshinsya-
syoshinsya-

総合スコア20

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです

2回答

1グッド

1クリップ

481閲覧

投稿2023/03/12 16:25

実現したいこと

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

背景

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

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

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

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

該当のソースコード

問題のScrollViewerの利用部分は「<!--保存を動画と音声のどちらでするかの選択 row="2"-->」から始まる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
で作成しています。

TN8001👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

1

ベストアンサー

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

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

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

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

それを踏まえてルートの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)では伸縮する必要がないもの(LabelButton)まで伸縮し、文字が見切れたり間延びしてしまいます。

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>

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

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

1対1(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を田の字に切るのも好みではないですw

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

総合スコア8527

syoshinsya-👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

syoshinsya-

2023/03/13 02:32

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

1

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}

アプリ画像

投稿2023/03/12 22:15

TN8001

総合スコア8527

syoshinsya-👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

TN8001

2023/03/12 22:19

ガン詰めしても1万字に収まらなかったため分けました。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

XML

XMLは仕様の1つで、マークアップ言語群を構築するために使われています。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WPF

Windows Presentation Foundation (WPF) は、魅力的な外観のユーザー エクスペリエンスを持つ Windows クライアント アプリケーションを作成するための次世代プレゼンテーション システムです