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

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

新規登録して質問してみよう
ただいま回答率
85.45%
C#

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

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

WPF

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

Q&A

解決済

1回答

2714閲覧

WPFで、Canvasコントローラにスクロールを追加したい

african

総合スコア17

C#

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

Visual Studio

Microsoft Visual StudioはMicrosoftによる統合開発環境(IDE)です。多種多様なプログラミング言語に対応しています。

WPF

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

1グッド

0クリップ

投稿2022/06/13 08:56

開発環境
VisualStudio2019
C#
WPF

やりたいこと

Canvas内にTextBoxコントローラを配置しており、今TextBoxコントローラを動的に生成しています。
ですが、Canvasタグが原因なのかスクロールが縦横どちらも表示されず、はみ出してしまっている状態です。
これを解消しようと、下記コードのように<ScrollViewer>を追加してみたところ、今度はTextoBoxコントローラ自体が表示されなくなりました。
Canvasにはスクロ―ル追加ができないのでしょうか
XAML

コード <StackPanel Grid.Row="1" Grid.Column="2"> <ItemsControl ItemsSource="{Binding Collections}"> <ItemsControl.ItemTemplate> <DataTemplate> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> <Canvas> <TextBox Text="{Binding Name}" Background="LightCyan" Width="{Binding Width2}" Canvas.Left="{Binding LeftPosition}" Canvas.Top="{Binding TopPosition}" /> </Canvas> </ScrollViewer> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel>
TN8001👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ItemsControlの使い方を、根本的に間違えています。
ItemsControlはカスタマイズ性が高いのはいいのですが、すごいややこしいです^^;

まずここで大枠を確認してください。
ItemsControl 攻略 ~ 外観のカスタマイズ | grabacr.nét

実際にはこちらが、ほぼそのまま使えるかと思います。
wpf - Using a ScrollViewer with an ItemsControl with a Canvas as the ItemsPanel - Stack Overflow

xml

1<Window 2 x:Class="Q6fqs4vhmi2lp5m.MainWindow" 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 5 xmlns:local="clr-namespace:Q6fqs4vhmi2lp5m" 6 Width="600" 7 Height="450"> 8 <Window.DataContext> 9 <local:ViewModel /> 10 </Window.DataContext> 11 <DockPanel> 12 <Button 13 Command="{Binding AddCommand}" 14 Content="add" 15 DockPanel.Dock="Top" /> 16 17 <ItemsControl ItemsSource="{Binding Collections}"> 18 <!-- 子要素のレイアウトにCanvasを使用する --> 19 <ItemsControl.ItemsPanel> 20 <ItemsPanelTemplate> 21 <!-- Canvasのサイズを入れないとスクロールバーを出せない --> 22 <Canvas Width="{Binding CanvasWidth}" Height="{Binding CanvasHeight}" /> 23 </ItemsPanelTemplate> 24 </ItemsControl.ItemsPanel> 25 26 <!-- 子要素のコンテナのスタイル --> 27 <ItemsControl.ItemContainerStyle> 28 <Style> 29 <!-- 30 子要素(TextBox)は直接追加されるのではなく 31 ItemContainer(ContentPresenter)に包まれた上で追加されるため 32 ItemContainerに対してCanvas.Left・Topを設定する 33 --> 34 <Setter Property="Canvas.Left" Value="{Binding Left}" /> 35 <Setter Property="Canvas.Top" Value="{Binding Top}" /> 36 </Style> 37 </ItemsControl.ItemContainerStyle> 38 39 <!-- 子要素のテンプレート --> 40 <ItemsControl.ItemTemplate> 41 <DataTemplate> 42 <TextBox 43 Width="{Binding Width}" 44 Background="LightCyan" 45 Text="{Binding Name}" /> 46 </DataTemplate> 47 </ItemsControl.ItemTemplate> 48 49 <!-- ItemsControl自体のテンプレート --> 50 <ItemsControl.Template> 51 <ControlTemplate> 52 <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"> 53 <ItemsPresenter HorizontalAlignment="Left" VerticalAlignment="Top" /> 54 </ScrollViewer> 55 </ControlTemplate> 56 </ItemsControl.Template> 57 </ItemsControl> 58 </DockPanel> 59</Window>

cs

1using System.Collections.ObjectModel; 2using System.Linq; 3using System.Windows; 4using System.Windows.Input; 5using CommunityToolkit.Mvvm.ComponentModel; 6using CommunityToolkit.Mvvm.Input; 7 8namespace Q6fqs4vhmi2lp5m 9{ 10 public class Item 11 { 12 public double Left { get; set; } 13 public double Top { get; set; } 14 public double Width { get; set; } 15 public string Name { get; set; } 16 17 18 private static int count; // 雑いw 19 20 public Item() 21 { 22 Left = Top = count * 50; 23 Width = 100; 24 Name = $"Name{count + 1}"; 25 count++; 26 } 27 } 28 29 public class ViewModel : ObservableObject 30 { 31 public ObservableCollection<Item> Collections { get; }=new ObservableCollection<Item>(); 32 public double CanvasWidth { get => _CanvasWidth; set => SetProperty(ref _CanvasWidth, value); } 33 private double _CanvasWidth; 34 public double CanvasHeight { get => _CanvasHeight; set => SetProperty(ref _CanvasHeight, value); } 35 private double _CanvasHeight; 36 public ICommand AddCommand { get; } 37 38 public ViewModel() 39 { 40 AddCommand = new RelayCommand(() => 41 { 42 Collections.Add(new Item()); 43 CanvasWidth = Collections.Max(x => x.Left + x.Width); 44 CanvasHeight = Collections.Max(x => x.Top + 30); 45 }); 46 47 AddCommand.Execute(null); 48 } 49 } 50 51 public partial class MainWindow : Window 52 { 53 public MainWindow() => InitializeComponent(); 54 } 55}

NuGet Gallery | CommunityToolkit.Mvvm 7.1.2

アプリ画像 スクロールバー出現前
アプリ画像 スクロールバー出現後

投稿2022/06/13 14:10

編集2023/07/30 09:23
TN8001

総合スコア9432

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

african

2022/06/14 21:46

ご回答ありがとうございました。 お教えいただいたURLを参考にして、ItemsControlに対する理解が間違っていたことに気づくことができました。 Canvasは、ItemsPanelプロパティ内に記述して、子要素ItemはItemTemplateのほうに記述するということや 、Canvas上の位置指定は、Itemに対してではなくItemコンテナーに対して指定するという考え方も理解が深まりました。 無事にスクロールバーが追加され期待通りの動作ができました。 この度は本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

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

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

質問する

関連した質問