teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

3

動画

2024/08/31 20:17

投稿

TN8001
TN8001

スコア10106

answer CHANGED
@@ -143,4 +143,4 @@
143
143
  }
144
144
  }
145
145
  ```
146
- ![アプリ画](d51b340e77fb2881662a918b136c5482.png)
146
+ ![アプリ画](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-01/4b4dffcc-25db-40b2-b604-3c422e0fea7c.gif)

2

見直しキャンペーン中

2023/07/28 13:54

投稿

TN8001
TN8001

スコア10106

answer CHANGED
@@ -1,146 +1,146 @@
1
- まず[Bitmap クラス (System.Drawing) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.bitmap) は、Windows Formsのクラスなので基本的にはWPFで使えません(使う方法はありますが)
2
-
3
-
4
- Windows FormsではGDI/GDI+での描画でしたが、WPFではDirect3Dでの描画ということで根本的な部分から違っています。
5
- [グラフィックス レンダリングの概要 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/wpf-graphics-rendering-overview)
6
-
7
- [図形と基本描画の概要 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/shapes-and-basic-drawing-in-wpf-overview)
8
-
9
- [第9回 WPFの「グラフィックス」を学ぼう:連載:WPF入門(1/2 ページ) - @IT](https://www.atmarkit.co.jp/ait/articles/1102/02/news100.html)
10
-
11
-
12
- > 非MVVMでの図形描画ならGridの子要素にAddする形で図形をWPFに
13
- > 表示できることは確認済です。
14
-
15
- これは何をAddしたのでしょうか?
16
- 非MVVMでやったことのほうを提示していただいて、「それをMVVMで実現するアプローチ」を質問されたほうが回答しやすいかもしれません(あまりに複雑だと読む気がせず、回答がつかない可能性はあります^^;
17
-
18
- > imageコントロールに図形描画をすること自体、考え違いを
19
- > しているのでしょうか?
20
-
21
- [WriteableBitmap クラス (System.Windows.Media.Imaging) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.media.imaging.writeablebitmap)
22
- とかもあるにはありますが、カジュアルには描けません。
23
-
24
- 画面に描画でなく画像ファイルを出力したいときに、Windows Forms的にサクッと描きたいなら↓こういったライブラリはあります。
25
- [NuGet Gallery | WriteableBitmapEx 1.6.7](https://www.nuget.org/packages/WriteableBitmapEx/1.6.7)
26
- [reneschulte/WriteableBitmapEx: Collection of extension methods for the XAML WriteableBitmap](https://github.com/reneschulte/WriteableBitmapEx)
27
-
28
- ---
29
-
30
- MVVMに強いこだわりがあるようですが、あくまで手法のひとつであり必ず使わなければならないわけではありません。
31
- 小規模のアプリではメリットもあまりありません。
32
-
33
- もちろんWPFを使う上でMVVMは大きな武器ですので、最終的にはそうあるべきだろうとは思います。
34
-
35
- 「勉強のために知りたい」・「具体例を見てみたい」とかならコードを出すこと自体は全然かまわない(回答の動機が「コードを書きたい」なので)のですが、どうしてもコード量が増えますし、内容も少し高度になってしまいます。
36
-
37
- そういったちょっと気合を入れた回答は、(質問者がドン引きするのか)なぜか反応が芳しくないのです^^;
38
-
39
- [C# - 【WPF】Dictonaryの値をコンボボックスに表示できない、クラスを参照したい|teratail](https://teratail.com/questions/345835#reply-475188)
40
-
41
- ---
42
-
43
- MVVMにするアプローチの一例です(↑の回答の使いまわし^^;
44
- MVVM的には非常に正しいと思うのですが、実際作りこむなら`Shape`や`Path`のコレクションを持つほうが楽だと思います(提示しておいてなんですが^^;
45
- [Shape クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.shape)
46
- [Path クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.path)
47
-
48
- 動かすのがちょっと面倒だったので、雑に`MouseDragElementBehavior`を使いました(`DataTemplate`に`Grid`が入っているように、巧妙なごまかしがあります^^;
49
- [NuGet Gallery | Microsoft.Xaml.Behaviors.Wpf 1.1.31](https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/1.1.31)
50
-
51
- ```xaml
52
- <Window
53
- x:Class="Questions349407.MainWindow"
54
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
56
- xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
57
- xmlns:local="clr-namespace:Questions349407"
58
- Width="700"
59
- Height="500">
60
- <Window.DataContext>
61
- <local:ViewModel />
62
- </Window.DataContext>
63
- <DockPanel>
64
- <Menu DockPanel.Dock="Top">
65
- <MenuItem Header="ずけい">
66
- <MenuItem Command="{Binding AddDiamondCommand}" Header="ひしがた" />
67
- <MenuItem Command="{Binding AddCircleCommand}" Header="まる" />
68
- <Separator />
69
- <MenuItem Command="{Binding ClearCommand}" Header="クリア" />
70
- </MenuItem>
71
- </Menu>
72
-
73
- <ItemsControl ItemsSource="{Binding Shapes}">
74
- <ItemsControl.Resources>
75
- <DataTemplate DataType="{x:Type local:Diamond}">
76
- <Grid>
77
- <Path
78
- Data="M100,80L150,130L100,180L50,130Z"
79
- Fill="RoyalBlue"
80
- Stretch="Fill"
81
- Stroke="Black"
82
- StrokeThickness="1">
83
- <behaviors:Interaction.Behaviors>
84
- <behaviors:MouseDragElementBehavior />
85
- </behaviors:Interaction.Behaviors>
86
- </Path>
87
- </Grid>
88
- </DataTemplate>
89
- <DataTemplate DataType="{x:Type local:Circle}">
90
- <Grid>
91
- <Ellipse
92
- Width="100"
93
- Height="100"
94
- Fill="HotPink"
95
- Stretch="Fill"
96
- Stroke="Black"
97
- StrokeThickness="1">
98
- <behaviors:Interaction.Behaviors>
99
- <behaviors:MouseDragElementBehavior />
100
- </behaviors:Interaction.Behaviors>
101
- </Ellipse>
102
- </Grid>
103
- </DataTemplate>
104
- </ItemsControl.Resources>
105
- <ItemsControl.ItemsPanel>
106
- <ItemsPanelTemplate>
107
- <Canvas />
108
- </ItemsPanelTemplate>
109
- </ItemsControl.ItemsPanel>
110
- </ItemsControl>
111
- </DockPanel>
112
- </Window>
113
- ```
114
-
115
- ```C#
116
- using Reactive.Bindings;
117
- using System.Collections.ObjectModel;
118
- using System.Windows;
119
-
120
- namespace Questions349407
121
- {
122
- public interface Shape { } // System.Windows.Shapes.Shape とは無関係
123
- public class Diamond : Shape { }
124
- public class Circle : Shape { }
125
- public class ViewModel
126
- {
127
- public ObservableCollection<Shape> Shapes { get; } = new ObservableCollection<Shape>();
128
- public ReactiveCommand AddDiamondCommand { get; } = new ReactiveCommand();
129
- public ReactiveCommand AddCircleCommand { get; } = new ReactiveCommand();
130
- public ReactiveCommand ClearCommand { get; } = new ReactiveCommand();
131
-
132
- public ViewModel()
133
- {
134
- AddDiamondCommand.Subscribe(() => Shapes.Add(new Diamond()));
135
- AddCircleCommand.Subscribe(() => Shapes.Add(new Circle()));
136
- ClearCommand.Subscribe(() => Shapes.Clear());
137
- }
138
- }
139
-
140
- public partial class MainWindow : Window
141
- {
142
- public MainWindow() => InitializeComponent();
143
- }
144
- }
145
- ```
1
+ まず[Bitmap クラス (System.Drawing) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.bitmap) は、Windows Formsのクラスなので基本的にはWPFで使えません(使う方法はありますが)
2
+
3
+
4
+ Windows FormsではGDI/GDI+での描画でしたが、WPFではDirect3Dでの描画ということで根本的な部分から違っています。
5
+ [グラフィックス レンダリングの概要 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/wpf-graphics-rendering-overview)
6
+
7
+ [図形と基本描画の概要 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/shapes-and-basic-drawing-in-wpf-overview)
8
+
9
+ [第9回 WPFの「グラフィックス」を学ぼう:連載:WPF入門(1/2 ページ) - @IT](https://www.atmarkit.co.jp/ait/articles/1102/02/news100.html)
10
+
11
+
12
+ > 非MVVMでの図形描画ならGridの子要素にAddする形で図形をWPFに
13
+ > 表示できることは確認済です。
14
+
15
+ これは何をAddしたのでしょうか?
16
+ 非MVVMでやったことのほうを提示していただいて、「それをMVVMで実現するアプローチ」を質問されたほうが回答しやすいかもしれません(あまりに複雑だと読む気がせず、回答がつかない可能性はあります^^;
17
+
18
+ > imageコントロールに図形描画をすること自体、考え違いを
19
+ > しているのでしょうか?
20
+
21
+ [WriteableBitmap クラス (System.Windows.Media.Imaging) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.media.imaging.writeablebitmap)
22
+ とかもあるにはありますが、カジュアルには描けません。
23
+
24
+ 画面に描画でなく画像ファイルを出力したいときに、Windows Forms的にサクッと描きたいなら↓こういったライブラリはあります。
25
+ [NuGet Gallery | WriteableBitmapEx 1.6.7](https://www.nuget.org/packages/WriteableBitmapEx/1.6.7)
26
+ [reneschulte/WriteableBitmapEx: Collection of extension methods for the XAML WriteableBitmap](https://github.com/reneschulte/WriteableBitmapEx)
27
+
28
+ ---
29
+
30
+ MVVMに強いこだわりがあるようですが、あくまで手法のひとつであり必ず使わなければならないわけではありません。
31
+ 小規模のアプリではメリットもあまりありません。
32
+
33
+ もちろんWPFを使う上でMVVMは大きな武器ですので、最終的にはそうあるべきだろうとは思います。
34
+
35
+ 「勉強のために知りたい」・「具体例を見てみたい」とかならコードを出すこと自体は全然かまわない(回答の動機が「コードを書きたい」なので)のですが、どうしてもコード量が増えますし、内容も少し高度になってしまいます。
36
+
37
+ そういったちょっと気合を入れた回答は、(質問者がドン引きするのか)なぜか反応が芳しくないのです^^;
38
+
39
+ [C# - 【WPF】Dictonaryの値をコンボボックスに表示できない、クラスを参照したい|teratail](https://teratail.com/questions/345835#reply-475188)
40
+
41
+ ---
42
+
43
+ MVVMにするアプローチの一例です(↑の回答の使いまわし^^;
44
+ MVVM的には非常に正しいと思うのですが、実際作りこむなら`Shape`や`Path`のコレクションを持つほうが楽だと思います(提示しておいてなんですが^^;
45
+ [Shape クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.shape)
46
+ [Path クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.path)
47
+
48
+ 動かすのがちょっと面倒だったので、雑に`MouseDragElementBehavior`を使いました(`DataTemplate`に`Grid`が入っているように、巧妙なごまかしがあります^^;
49
+ [NuGet Gallery | Microsoft.Xaml.Behaviors.Wpf 1.1.31](https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/1.1.31)
50
+
51
+ ```xml
52
+ <Window
53
+ x:Class="Questions349407.MainWindow"
54
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
56
+ xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
57
+ xmlns:local="clr-namespace:Questions349407"
58
+ Width="700"
59
+ Height="500">
60
+ <Window.DataContext>
61
+ <local:ViewModel />
62
+ </Window.DataContext>
63
+ <DockPanel>
64
+ <Menu DockPanel.Dock="Top">
65
+ <MenuItem Header="ずけい">
66
+ <MenuItem Command="{Binding AddDiamondCommand}" Header="ひしがた" />
67
+ <MenuItem Command="{Binding AddCircleCommand}" Header="まる" />
68
+ <Separator />
69
+ <MenuItem Command="{Binding ClearCommand}" Header="クリア" />
70
+ </MenuItem>
71
+ </Menu>
72
+
73
+ <ItemsControl ItemsSource="{Binding Shapes}">
74
+ <ItemsControl.Resources>
75
+ <DataTemplate DataType="{x:Type local:Diamond}">
76
+ <Grid>
77
+ <Path
78
+ Data="M100,80L150,130L100,180L50,130Z"
79
+ Fill="RoyalBlue"
80
+ Stretch="Fill"
81
+ Stroke="Black"
82
+ StrokeThickness="1">
83
+ <behaviors:Interaction.Behaviors>
84
+ <behaviors:MouseDragElementBehavior />
85
+ </behaviors:Interaction.Behaviors>
86
+ </Path>
87
+ </Grid>
88
+ </DataTemplate>
89
+ <DataTemplate DataType="{x:Type local:Circle}">
90
+ <Grid>
91
+ <Ellipse
92
+ Width="100"
93
+ Height="100"
94
+ Fill="HotPink"
95
+ Stretch="Fill"
96
+ Stroke="Black"
97
+ StrokeThickness="1">
98
+ <behaviors:Interaction.Behaviors>
99
+ <behaviors:MouseDragElementBehavior />
100
+ </behaviors:Interaction.Behaviors>
101
+ </Ellipse>
102
+ </Grid>
103
+ </DataTemplate>
104
+ </ItemsControl.Resources>
105
+ <ItemsControl.ItemsPanel>
106
+ <ItemsPanelTemplate>
107
+ <Canvas />
108
+ </ItemsPanelTemplate>
109
+ </ItemsControl.ItemsPanel>
110
+ </ItemsControl>
111
+ </DockPanel>
112
+ </Window>
113
+ ```
114
+
115
+ ```cs
116
+ using Reactive.Bindings;
117
+ using System.Collections.ObjectModel;
118
+ using System.Windows;
119
+
120
+ namespace Questions349407
121
+ {
122
+ public interface Shape { } // System.Windows.Shapes.Shape とは無関係
123
+ public class Diamond : Shape { }
124
+ public class Circle : Shape { }
125
+ public class ViewModel
126
+ {
127
+ public ObservableCollection<Shape> Shapes { get; } = new ObservableCollection<Shape>();
128
+ public ReactiveCommand AddDiamondCommand { get; } = new ReactiveCommand();
129
+ public ReactiveCommand AddCircleCommand { get; } = new ReactiveCommand();
130
+ public ReactiveCommand ClearCommand { get; } = new ReactiveCommand();
131
+
132
+ public ViewModel()
133
+ {
134
+ AddDiamondCommand.Subscribe(() => Shapes.Add(new Diamond()));
135
+ AddCircleCommand.Subscribe(() => Shapes.Add(new Circle()));
136
+ ClearCommand.Subscribe(() => Shapes.Clear());
137
+ }
138
+ }
139
+
140
+ public partial class MainWindow : Window
141
+ {
142
+ public MainWindow() => InitializeComponent();
143
+ }
144
+ }
145
+ ```
146
146
  ![アプリ画像](d51b340e77fb2881662a918b136c5482.png)

1

例追記

2021/07/14 11:53

投稿

TN8001
TN8001

スコア10106

answer CHANGED
@@ -36,4 +36,111 @@
36
36
 
37
37
  そういったちょっと気合を入れた回答は、(質問者がドン引きするのか)なぜか反応が芳しくないのです^^;
38
38
 
39
- [C# - 【WPF】Dictonaryの値をコンボボックスに表示できない、クラスを参照したい|teratail](https://teratail.com/questions/345835#reply-475188)
39
+ [C# - 【WPF】Dictonaryの値をコンボボックスに表示できない、クラスを参照したい|teratail](https://teratail.com/questions/345835#reply-475188)
40
+
41
+ ---
42
+
43
+ MVVMにするアプローチの一例です(↑の回答の使いまわし^^;
44
+ MVVM的には非常に正しいと思うのですが、実際作りこむなら`Shape`や`Path`のコレクションを持つほうが楽だと思います(提示しておいてなんですが^^;
45
+ [Shape クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.shape)
46
+ [Path クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.path)
47
+
48
+ 動かすのがちょっと面倒だったので、雑に`MouseDragElementBehavior`を使いました(`DataTemplate`に`Grid`が入っているように、巧妙なごまかしがあります^^;
49
+ [NuGet Gallery | Microsoft.Xaml.Behaviors.Wpf 1.1.31](https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/1.1.31)
50
+
51
+ ```xaml
52
+ <Window
53
+ x:Class="Questions349407.MainWindow"
54
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
55
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
56
+ xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
57
+ xmlns:local="clr-namespace:Questions349407"
58
+ Width="700"
59
+ Height="500">
60
+ <Window.DataContext>
61
+ <local:ViewModel />
62
+ </Window.DataContext>
63
+ <DockPanel>
64
+ <Menu DockPanel.Dock="Top">
65
+ <MenuItem Header="ずけい">
66
+ <MenuItem Command="{Binding AddDiamondCommand}" Header="ひしがた" />
67
+ <MenuItem Command="{Binding AddCircleCommand}" Header="まる" />
68
+ <Separator />
69
+ <MenuItem Command="{Binding ClearCommand}" Header="クリア" />
70
+ </MenuItem>
71
+ </Menu>
72
+
73
+ <ItemsControl ItemsSource="{Binding Shapes}">
74
+ <ItemsControl.Resources>
75
+ <DataTemplate DataType="{x:Type local:Diamond}">
76
+ <Grid>
77
+ <Path
78
+ Data="M100,80L150,130L100,180L50,130Z"
79
+ Fill="RoyalBlue"
80
+ Stretch="Fill"
81
+ Stroke="Black"
82
+ StrokeThickness="1">
83
+ <behaviors:Interaction.Behaviors>
84
+ <behaviors:MouseDragElementBehavior />
85
+ </behaviors:Interaction.Behaviors>
86
+ </Path>
87
+ </Grid>
88
+ </DataTemplate>
89
+ <DataTemplate DataType="{x:Type local:Circle}">
90
+ <Grid>
91
+ <Ellipse
92
+ Width="100"
93
+ Height="100"
94
+ Fill="HotPink"
95
+ Stretch="Fill"
96
+ Stroke="Black"
97
+ StrokeThickness="1">
98
+ <behaviors:Interaction.Behaviors>
99
+ <behaviors:MouseDragElementBehavior />
100
+ </behaviors:Interaction.Behaviors>
101
+ </Ellipse>
102
+ </Grid>
103
+ </DataTemplate>
104
+ </ItemsControl.Resources>
105
+ <ItemsControl.ItemsPanel>
106
+ <ItemsPanelTemplate>
107
+ <Canvas />
108
+ </ItemsPanelTemplate>
109
+ </ItemsControl.ItemsPanel>
110
+ </ItemsControl>
111
+ </DockPanel>
112
+ </Window>
113
+ ```
114
+
115
+ ```C#
116
+ using Reactive.Bindings;
117
+ using System.Collections.ObjectModel;
118
+ using System.Windows;
119
+
120
+ namespace Questions349407
121
+ {
122
+ public interface Shape { } // System.Windows.Shapes.Shape とは無関係
123
+ public class Diamond : Shape { }
124
+ public class Circle : Shape { }
125
+ public class ViewModel
126
+ {
127
+ public ObservableCollection<Shape> Shapes { get; } = new ObservableCollection<Shape>();
128
+ public ReactiveCommand AddDiamondCommand { get; } = new ReactiveCommand();
129
+ public ReactiveCommand AddCircleCommand { get; } = new ReactiveCommand();
130
+ public ReactiveCommand ClearCommand { get; } = new ReactiveCommand();
131
+
132
+ public ViewModel()
133
+ {
134
+ AddDiamondCommand.Subscribe(() => Shapes.Add(new Diamond()));
135
+ AddCircleCommand.Subscribe(() => Shapes.Add(new Circle()));
136
+ ClearCommand.Subscribe(() => Shapes.Clear());
137
+ }
138
+ }
139
+
140
+ public partial class MainWindow : Window
141
+ {
142
+ public MainWindow() => InitializeComponent();
143
+ }
144
+ }
145
+ ```
146
+ ![アプリ画像](d51b340e77fb2881662a918b136c5482.png)