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

質問編集履歴

3

意図的に内容を抹消する行為にあたるため

2021/09/13 11:38

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,163 @@
1
+ ### 前提・実現したいこと
2
+ ボタンを押したら多角形の図形をWPFのimage上に表示したいと考えております
3
+ ネット上を「c# WPF MVVM 図形」等のキーワードで探したのですが
4
+ これという内容見つけられませんでした。
5
+ 画像表示と同じ手法でBitmapに描画したデータを代入すれば
6
+ 可能と考えたのですが、うまく行きませんでした。
7
+ (https://teratail.com/questions/349227?nli=60ed5468-1ed8-4b74-8894-4a3c0a040114#reply-478633)
8
+ MVVM形式での多角形の図形表示について参考になるページ、
9
+ アドバイス等よろしくお願いします。
10
+ 環境: Win10 、VS2019、C#
11
+ フレームワーク:Prism、ReactiveProperty
12
+ ### MainWindow.xaml
13
+ ```ここに言語名を入力
14
+ <Window x:Class="DrawCircle.Views.MainWindow"
15
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
16
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
17
+ xmlns:prism="http://prismlibrary.com/"
18
+ prism:ViewModelLocator.AutoWireViewModel="True"
19
+ Title="{Binding Title}" Height="400" Width="500"
20
+ WindowStartupLocation="CenterScreen">
21
+ <Grid>
22
+ <StackPanel>
23
+ <Button Content="画像表示" Command="{Binding ImageDispLayButton}" />
24
+ <Image Stretch="None" Source="{Binding Bitmap2.Value}" Height="381" Width="496" />
25
+ <ContentControl prism:RegionManager.RegionName="ContentRegion" />
26
+ </StackPanel>
27
+ </Grid>
28
+ </Window>
29
+ ```
30
+ ### MainWindowViewModel.cs
31
+ ```ここに言語名を入力
32
+ using Prism.Mvvm;
33
+ using System.Windows;
34
+ using Reactive.Bindings;
35
+ using System.Windows.Media.Imaging;
36
+ using System;
37
+ using Prism.Commands;
38
+ using System.Drawing;
39
+ namespace DrawCircle.ViewModels
40
+ {
41
+ public class MainWindowViewModel : BindableBase
42
+ {
43
+ public ReactiveProperty<Bitmap> Bitmap2 { get; } = new ReactiveProperty<Bitmap>();
44
+ public ReactiveCommand ImageDispLayButton { get; } = new ReactiveCommand();
45
+ public MainWindowViewModel()
46
+ {
47
+ //ReactiveCommandの宣言
48
+ ImageDispLayButton.Subscribe(ImageDispLayButtonExe);
49
+ }
50
+ /// <summary>
51
+ /// ボタン押下で任意の画像を表示する
52
+ /// </summary>
53
+ private void ImageDispLayButtonExe()
54
+ {
55
+ //図形表示
56
+ Bitmap canvas = new Bitmap(200, 200);
57
+ Graphics g = Graphics.FromImage(canvas);
58
+ g.FillRectangle(Brushes.Black, 10, 20, 100, 80);
59
+ Bitmap2.Value = canvas;
60
+ MessageBox.Show("図形描画");
61
+ g.Dispose();
62
+ }
63
+ }
64
+ }
65
+ ```
66
+ ### 試したこと
67
+ 非MVVMでの図形描画ならGridの子要素にAddする形で図形をWPFに
68
+ 表示できることは確認済です。
1
- まことにすみませんが事情により削除することとなりました
69
+ imageコントロール図形描画をすること自体、考え違いを
2
-
70
+ しているのでしょうか?
71
+ ### 補足情報(FW/ツールのバージョンなど)
72
+ 環境: Win10 、VS2019、C#
73
+ フレームワーク:Prism、ReactiveProperty
74
+ ### 2021/07/15 追記
75
+ コメント欄に書いていたソースをこちらにの追加
76
+ 実現したいことは MainWindow.xaml.cs に実装している MenuItem7_Click() の多角形描画処理を
77
+ MVVM化して描画させたいと思っています
78
+ ### 実装に際しての不明点
79
+ どのようにコーディングすればWPF側に図を表示できるのかわからない状態です。
80
+ 今の私の理解では、JPG画像のようにImageにセットすればよいのか、追記したサンプルコードのように
81
+ 子要素の追加すればよいのか、よく理解できていません。
82
+ ### MainWindow.xaml
83
+ ```ここに言語名を入力
84
+ <Window x:Class="WpfApp1.MainWindow"
85
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
86
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
87
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
88
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
89
+ xmlns:local="clr-namespace:WpfApp1"
90
+ mc:Ignorable="d"
91
+ Title="MainWindow" Height="500" Width="700">
92
+ <Grid>
93
+ <StackPanel Name="StackPanel1" VerticalAlignment="Top" Orientation="Horizontal">
94
+ <Menu Height="23" Name="Menu1">
95
+ <MenuItem Header="TEST項目" Name="MenuItem1">
96
+ <MenuItem Header="クリア" Name="MenuItem0" Click="MenuItem0_Click"/>
97
+ <MenuItem Header="サンプル多角形" Name="MenuItem7" Click="MenuItem7_Click"/>
98
+ </MenuItem>
99
+ </Menu>
100
+ </StackPanel>
101
+ <Grid Name="Grid1">
102
+ </Grid>
103
+ </Grid>
104
+ </Window>
105
+ ```
106
+ ### MainWindow.xaml.cs
107
+ ```ここに言語名を入力
108
+ using System;
109
+ using System.Collections.Generic;
110
+ using System.Linq;
111
+ using System.Text;
112
+ using System.Threading.Tasks;
113
+ using System.Windows;
114
+ using System.Windows.Controls;
115
+ using System.Windows.Data;
116
+ using System.Windows.Documents;
117
+ using System.Windows.Input;
118
+ using System.Windows.Media;
119
+ using System.Windows.Media.Imaging;
120
+ using System.Windows.Navigation;
121
+ using System.Windows.Shapes;
122
+ namespace WpfApp1
3
-
123
+ {
124
+ /// <summary>
125
+ /// Interaction logic for MainWindow.xaml
126
+ /// </summary>
127
+ public partial class MainWindow : Window
128
+ {
129
+ public MainWindow()
130
+ {
131
+ InitializeComponent();
132
+ }
133
+ private void MenuItem0_Click(object sender, RoutedEventArgs e)
134
+ {
135
+ Grid1.Children.Clear(); ////描画領域の初期化
136
+ }
137
+ /// <summary>
138
+ /// 多角形描画
139
+ /// </summary>
140
+ /// <param name="sender"></param>
141
+ /// <param name="e"></param>
142
+ private void MenuItem7_Click(object sender, RoutedEventArgs e)
143
+ {
144
+ Path myPath5 = new Path();
145
+ myPath5.Stroke = Brushes.Black; ////ブラシ色
146
+ myPath5.Fill = Brushes.RoyalBlue; ////塗りつぶし色
147
+ myPath5.StrokeThickness = 1; ////ブラシ太さ設定
148
+ PathFigure myPathFigure = new PathFigure();
149
+
150
+ ////ひし形を描画
151
+ myPathFigure.StartPoint = new Point(100, 80); ////描画の開始座標
152
+ myPathFigure.Segments.Add(new LineSegment(new Point(150, 130), true));
153
+ myPathFigure.Segments.Add(new LineSegment(new Point(100, 180), true));
154
+ myPathFigure.Segments.Add(new LineSegment(new Point(50, 130), true));
155
+ myPathFigure.Segments.Add(new LineSegment(new Point(100, 80), true));
156
+ PathGeometry myPathGeometry = new PathGeometry();
157
+ myPathGeometry.Figures.Add(myPathFigure);
158
+ myPath5.Data = myPathGeometry;
159
+ Grid1.Children.Add(myPath5);
160
+ }
161
+ }
162
+ }
163
+ ```

2

都合により削除することとなりました。

2021/09/13 11:38

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,189 +1,3 @@
1
- ### 前提・実現したいこと
2
- ボタンを押したら多角形の図形をWPFのimage上に表示したいと考えております
3
- ネット上を「c# WPF MVVM 図形」等のキーワードで探したのですが
1
+ まことにみません事情により削除することとなりました
4
- これという内容見つけられませんでした。
5
2
 
6
- 画像表示と同じ手法でBitmapに描画したデータを代入すれば
7
- 可能と考えたのですが、うまく行きませんでした。
8
- (https://teratail.com/questions/349227?nli=60ed5468-1ed8-4b74-8894-4a3c0a040114#reply-478633)
9
-
10
- MVVM形式での多角形の図形表示について参考になるページ、
11
- アドバイス等よろしくお願いします。
12
-
13
- 環境: Win10 、VS2019、C#
14
- フレームワーク:Prism、ReactiveProperty
15
-
16
- ### MainWindow.xaml
17
-
18
- ```ここに言語名を入力
19
- <Window x:Class="DrawCircle.Views.MainWindow"
20
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
21
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
22
- xmlns:prism="http://prismlibrary.com/"
23
- prism:ViewModelLocator.AutoWireViewModel="True"
24
- Title="{Binding Title}" Height="400" Width="500"
25
- WindowStartupLocation="CenterScreen">
26
- <Grid>
27
- <StackPanel>
28
- <Button Content="画像表示" Command="{Binding ImageDispLayButton}" />
29
-
30
- <Image Stretch="None" Source="{Binding Bitmap2.Value}" Height="381" Width="496" />
31
-
32
- <ContentControl prism:RegionManager.RegionName="ContentRegion" />
33
- </StackPanel>
34
- </Grid>
35
- </Window>
36
- ```
37
-
38
- ### MainWindowViewModel.cs
39
-
40
- ```ここに言語名を入力
41
- using Prism.Mvvm;
42
- using System.Windows;
43
- using Reactive.Bindings;
44
- using System.Windows.Media.Imaging;
45
- using System;
46
- using Prism.Commands;
47
- using System.Drawing;
48
-
49
- namespace DrawCircle.ViewModels
50
- {
3
+
51
- public class MainWindowViewModel : BindableBase
52
- {
53
- public ReactiveProperty<Bitmap> Bitmap2 { get; } = new ReactiveProperty<Bitmap>();
54
-
55
- public ReactiveCommand ImageDispLayButton { get; } = new ReactiveCommand();
56
-
57
- public MainWindowViewModel()
58
- {
59
- //ReactiveCommandの宣言
60
- ImageDispLayButton.Subscribe(ImageDispLayButtonExe);
61
- }
62
-
63
- /// <summary>
64
- /// ボタン押下で任意の画像を表示する
65
- /// </summary>
66
- private void ImageDispLayButtonExe()
67
- {
68
- //図形表示
69
- Bitmap canvas = new Bitmap(200, 200);
70
- Graphics g = Graphics.FromImage(canvas);
71
- g.FillRectangle(Brushes.Black, 10, 20, 100, 80);
72
- Bitmap2.Value = canvas;
73
-
74
- MessageBox.Show("図形描画");
75
-
76
- g.Dispose();
77
- }
78
- }
79
- }
80
- ```
81
- ### 試したこと
82
- 非MVVMでの図形描画ならGridの子要素にAddする形で図形をWPFに
83
- 表示できることは確認済です。
84
- imageコントロールに図形描画をすること自体、考え違いを
85
- しているのでしょうか?
86
-
87
- ### 補足情報(FW/ツールのバージョンなど)
88
- 環境: Win10 、VS2019、C#
89
- フレームワーク:Prism、ReactiveProperty
90
-
91
- ### 2021/07/15 追記
92
- コメント欄に書いていたソースをこちらにの追加
93
-
94
- 実現したいことは MainWindow.xaml.cs に実装している MenuItem7_Click() の多角形描画処理を
95
- MVVM化して描画させたいと思っています
96
-
97
- ### 実装に際しての不明点
98
- どのようにコーディングすればWPF側に図を表示できるのかわからない状態です。
99
- 今の私の理解では、JPG画像のようにImageにセットすればよいのか、追記したサンプルコードのように
100
- 子要素の追加すればよいのか、よく理解できていません。
101
-
102
- ### MainWindow.xaml
103
- ```ここに言語名を入力
104
- <Window x:Class="WpfApp1.MainWindow"
105
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
106
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
107
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
108
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
109
- xmlns:local="clr-namespace:WpfApp1"
110
- mc:Ignorable="d"
111
- Title="MainWindow" Height="500" Width="700">
112
- <Grid>
113
- <StackPanel Name="StackPanel1" VerticalAlignment="Top" Orientation="Horizontal">
114
- <Menu Height="23" Name="Menu1">
115
- <MenuItem Header="TEST項目" Name="MenuItem1">
116
- <MenuItem Header="クリア" Name="MenuItem0" Click="MenuItem0_Click"/>
117
- <MenuItem Header="サンプル多角形" Name="MenuItem7" Click="MenuItem7_Click"/>
118
- </MenuItem>
119
- </Menu>
120
- </StackPanel>
121
-
122
- <Grid Name="Grid1">
123
- </Grid>
124
- </Grid>
125
- </Window>
126
- ```
127
-
128
- ### MainWindow.xaml.cs
129
- ```ここに言語名を入力
130
- using System;
131
- using System.Collections.Generic;
132
- using System.Linq;
133
- using System.Text;
134
- using System.Threading.Tasks;
135
- using System.Windows;
136
- using System.Windows.Controls;
137
- using System.Windows.Data;
138
- using System.Windows.Documents;
139
- using System.Windows.Input;
140
- using System.Windows.Media;
141
- using System.Windows.Media.Imaging;
142
- using System.Windows.Navigation;
143
- using System.Windows.Shapes;
144
-
145
- namespace WpfApp1
146
- {
147
- /// <summary>
148
- /// Interaction logic for MainWindow.xaml
149
- /// </summary>
150
- public partial class MainWindow : Window
151
- {
152
- public MainWindow()
153
- {
154
- InitializeComponent();
155
- }
156
-
157
- private void MenuItem0_Click(object sender, RoutedEventArgs e)
158
- {
159
- Grid1.Children.Clear(); ////描画領域の初期化
160
- }
161
-
162
- /// <summary>
163
- /// 多角形描画
164
- /// </summary>
165
- /// <param name="sender"></param>
166
- /// <param name="e"></param>
167
- private void MenuItem7_Click(object sender, RoutedEventArgs e)
168
- {
169
- Path myPath5 = new Path();
170
- myPath5.Stroke = Brushes.Black; ////ブラシ色
171
- myPath5.Fill = Brushes.RoyalBlue; ////塗りつぶし色
172
- myPath5.StrokeThickness = 1; ////ブラシ太さ設定
173
- PathFigure myPathFigure = new PathFigure();
174
-
175
- ////ひし形を描画
176
- myPathFigure.StartPoint = new Point(100, 80); ////描画の開始座標
177
- myPathFigure.Segments.Add(new LineSegment(new Point(150, 130), true));
178
- myPathFigure.Segments.Add(new LineSegment(new Point(100, 180), true));
179
- myPathFigure.Segments.Add(new LineSegment(new Point(50, 130), true));
180
- myPathFigure.Segments.Add(new LineSegment(new Point(100, 80), true));
181
-
182
- PathGeometry myPathGeometry = new PathGeometry();
183
- myPathGeometry.Figures.Add(myPathFigure);
184
- myPath5.Data = myPathGeometry;
185
- Grid1.Children.Add(myPath5);
186
- }
187
- }
188
- }
189
- ```

1

コメントに記載していたサンプルコードを追加、実装したいこと、現在の不明点を追記。

2021/09/09 09:06

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -78,7 +78,6 @@
78
78
  }
79
79
  }
80
80
  ```
81
-
82
81
  ### 試したこと
83
82
  非MVVMでの図形描画ならGridの子要素にAddする形で図形をWPFに
84
83
  表示できることは確認済です。
@@ -87,4 +86,104 @@
87
86
 
88
87
  ### 補足情報(FW/ツールのバージョンなど)
89
88
  環境: Win10 、VS2019、C#
90
- フレームワーク:Prism、ReactiveProperty
89
+ フレームワーク:Prism、ReactiveProperty
90
+
91
+ ### 2021/07/15 追記
92
+ コメント欄に書いていたソースをこちらにの追加
93
+
94
+ 実現したいことは MainWindow.xaml.cs に実装している MenuItem7_Click() の多角形描画処理を
95
+ MVVM化して描画させたいと思っています
96
+
97
+ ### 実装に際しての不明点
98
+ どのようにコーディングすればWPF側に図を表示できるのかわからない状態です。
99
+ 今の私の理解では、JPG画像のようにImageにセットすればよいのか、追記したサンプルコードのように
100
+ 子要素の追加すればよいのか、よく理解できていません。
101
+
102
+ ### MainWindow.xaml
103
+ ```ここに言語名を入力
104
+ <Window x:Class="WpfApp1.MainWindow"
105
+ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
106
+ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
107
+ xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
108
+ xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
109
+ xmlns:local="clr-namespace:WpfApp1"
110
+ mc:Ignorable="d"
111
+ Title="MainWindow" Height="500" Width="700">
112
+ <Grid>
113
+ <StackPanel Name="StackPanel1" VerticalAlignment="Top" Orientation="Horizontal">
114
+ <Menu Height="23" Name="Menu1">
115
+ <MenuItem Header="TEST項目" Name="MenuItem1">
116
+ <MenuItem Header="クリア" Name="MenuItem0" Click="MenuItem0_Click"/>
117
+ <MenuItem Header="サンプル多角形" Name="MenuItem7" Click="MenuItem7_Click"/>
118
+ </MenuItem>
119
+ </Menu>
120
+ </StackPanel>
121
+
122
+ <Grid Name="Grid1">
123
+ </Grid>
124
+ </Grid>
125
+ </Window>
126
+ ```
127
+
128
+ ### MainWindow.xaml.cs
129
+ ```ここに言語名を入力
130
+ using System;
131
+ using System.Collections.Generic;
132
+ using System.Linq;
133
+ using System.Text;
134
+ using System.Threading.Tasks;
135
+ using System.Windows;
136
+ using System.Windows.Controls;
137
+ using System.Windows.Data;
138
+ using System.Windows.Documents;
139
+ using System.Windows.Input;
140
+ using System.Windows.Media;
141
+ using System.Windows.Media.Imaging;
142
+ using System.Windows.Navigation;
143
+ using System.Windows.Shapes;
144
+
145
+ namespace WpfApp1
146
+ {
147
+ /// <summary>
148
+ /// Interaction logic for MainWindow.xaml
149
+ /// </summary>
150
+ public partial class MainWindow : Window
151
+ {
152
+ public MainWindow()
153
+ {
154
+ InitializeComponent();
155
+ }
156
+
157
+ private void MenuItem0_Click(object sender, RoutedEventArgs e)
158
+ {
159
+ Grid1.Children.Clear(); ////描画領域の初期化
160
+ }
161
+
162
+ /// <summary>
163
+ /// 多角形描画
164
+ /// </summary>
165
+ /// <param name="sender"></param>
166
+ /// <param name="e"></param>
167
+ private void MenuItem7_Click(object sender, RoutedEventArgs e)
168
+ {
169
+ Path myPath5 = new Path();
170
+ myPath5.Stroke = Brushes.Black; ////ブラシ色
171
+ myPath5.Fill = Brushes.RoyalBlue; ////塗りつぶし色
172
+ myPath5.StrokeThickness = 1; ////ブラシ太さ設定
173
+ PathFigure myPathFigure = new PathFigure();
174
+
175
+ ////ひし形を描画
176
+ myPathFigure.StartPoint = new Point(100, 80); ////描画の開始座標
177
+ myPathFigure.Segments.Add(new LineSegment(new Point(150, 130), true));
178
+ myPathFigure.Segments.Add(new LineSegment(new Point(100, 180), true));
179
+ myPathFigure.Segments.Add(new LineSegment(new Point(50, 130), true));
180
+ myPathFigure.Segments.Add(new LineSegment(new Point(100, 80), true));
181
+
182
+ PathGeometry myPathGeometry = new PathGeometry();
183
+ myPathGeometry.Figures.Add(myPathFigure);
184
+ myPath5.Data = myPathGeometry;
185
+ Grid1.Children.Add(myPath5);
186
+ }
187
+ }
188
+ }
189
+ ```