編集履歴

回答編集履歴

動画

2024/08/31 20:17

投稿

スコア9825

test CHANGED Viewed

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

見直しキャンペーン中

2023/07/28 13:54

投稿

TN8001

スコア9825

test CHANGED Viewed

@@ -1,291 +1,146 @@
 まず[Bitmap クラス (System.Drawing) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.drawing.bitmap) は、Windows Formsのクラスなので基本的にはWPFで使えません（使う方法はありますが）
 Windows FormsではGDI/GDI+での描画でしたが、WPFではDirect3Dでの描画ということで根本的な部分から違っています。
 [グラフィックス レンダリングの概要 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/wpf-graphics-rendering-overview)
 [図形と基本描画の概要 - WPF .NET Framework | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/desktop/wpf/graphics-multimedia/shapes-and-basic-drawing-in-wpf-overview)
 [第9回　WPFの「グラフィックス」を学ぼう：連載：WPF入門（1/2 ページ） - ＠IT](https://www.atmarkit.co.jp/ait/articles/1102/02/news100.html)
 > 非MVVMでの図形描画ならGridの子要素にAddする形で図形をWPFに
 > 表示できることは確認済です。
 これは何をAddしたのでしょうか？
 非MVVMでやったことのほうを提示していただいて、「それをMVVMで実現するアプローチ」を質問されたほうが回答しやすいかもしれません（あまりに複雑だと読む気がせず、回答がつかない可能性はあります^^;
 > imageコントロールに図形描画をすること自体、考え違いを
 > しているのでしょうか？
 [WriteableBitmap クラス (System.Windows.Media.Imaging) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.media.imaging.writeablebitmap)
 とかもあるにはありますが、カジュアルには描けません。
 画面に描画でなく画像ファイルを出力したいときに、Windows Forms的にサクッと描きたいなら↓こういったライブラリはあります。
 [NuGet Gallery | WriteableBitmapEx 1.6.7](https://www.nuget.org/packages/WriteableBitmapEx/1.6.7)
 [reneschulte/WriteableBitmapEx: Collection of extension methods for the XAML WriteableBitmap](https://github.com/reneschulte/WriteableBitmapEx)
 ---
 MVVMに強いこだわりがあるようですが、あくまで手法のひとつであり必ず使わなければならないわけではありません。
 小規模のアプリではメリットもあまりありません。
 もちろんWPFを使う上でMVVMは大きな武器ですので、最終的にはそうあるべきだろうとは思います。
 「勉強のために知りたい」・「具体例を見てみたい」とかならコードを出すこと自体は全然かまわない（回答の動機が「コードを書きたい」なので）のですが、どうしてもコード量が増えますし、内容も少し高度になってしまいます。
 そういったちょっと気合を入れた回答は、（質問者がドン引きするのか）なぜか反応が芳しくないのです^^;
 [C# - 【WPF】Dictonaryの値をコンボボックスに表示できない、クラスを参照したい｜teratail](https://teratail.com/questions/345835#reply-475188)
 ---
 MVVMにするアプローチの一例です（↑の回答の使いまわし^^;
 MVVM的には非常に正しいと思うのですが、実際作りこむなら`Shape`や`Path`のコレクションを持つほうが楽だと思います（提示しておいてなんですが^^;
 [Shape クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.shape)
 [Path クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.path)
 動かすのがちょっと面倒だったので、雑に`MouseDragElementBehavior`を使いました（`DataTemplate`に`Grid`が入っているように、巧妙なごまかしがあります^^;
 [NuGet Gallery | Microsoft.Xaml.Behaviors.Wpf 1.1.31](https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/1.1.31)
-```xaml
+```xml
 <Window
   x:Class="Questions349407.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
   xmlns:local="clr-namespace:Questions349407"
   Width="700"
   Height="500">
   <Window.DataContext>
     <local:ViewModel />
   </Window.DataContext>
   <DockPanel>
     <Menu DockPanel.Dock="Top">
       <MenuItem Header="ずけい">
         <MenuItem Command="{Binding AddDiamondCommand}" Header="ひしがた" />
         <MenuItem Command="{Binding AddCircleCommand}" Header="まる" />
         <Separator />
         <MenuItem Command="{Binding ClearCommand}" Header="クリア" />
       </MenuItem>
     </Menu>
     <ItemsControl ItemsSource="{Binding Shapes}">
       <ItemsControl.Resources>
         <DataTemplate DataType="{x:Type local:Diamond}">
           <Grid>
             <Path
               Data="M100,80L150,130L100,180L50,130Z"
               Fill="RoyalBlue"
               Stretch="Fill"
               Stroke="Black"
               StrokeThickness="1">
               <behaviors:Interaction.Behaviors>
                 <behaviors:MouseDragElementBehavior />
               </behaviors:Interaction.Behaviors>
             </Path>
           </Grid>
         </DataTemplate>
         <DataTemplate DataType="{x:Type local:Circle}">
           <Grid>
             <Ellipse
               Width="100"
               Height="100"
               Fill="HotPink"
               Stretch="Fill"
               Stroke="Black"
               StrokeThickness="1">
               <behaviors:Interaction.Behaviors>
                 <behaviors:MouseDragElementBehavior />
               </behaviors:Interaction.Behaviors>
             </Ellipse>
           </Grid>
         </DataTemplate>
       </ItemsControl.Resources>
       <ItemsControl.ItemsPanel>
         <ItemsPanelTemplate>
           <Canvas />
         </ItemsPanelTemplate>
       </ItemsControl.ItemsPanel>
     </ItemsControl>
   </DockPanel>
 </Window>
 ```
-```C#
+```cs
 using Reactive.Bindings;
 using System.Collections.ObjectModel;
 using System.Windows;
 namespace Questions349407
 {
     public interface Shape { } // System.Windows.Shapes.Shape とは無関係
     public class Diamond : Shape { }
     public class Circle : Shape { }
     public class ViewModel
     {
         public ObservableCollection<Shape> Shapes { get; } = new ObservableCollection<Shape>();
         public ReactiveCommand AddDiamondCommand { get; } = new ReactiveCommand();
         public ReactiveCommand AddCircleCommand { get; } = new ReactiveCommand();
         public ReactiveCommand ClearCommand { get; } = new ReactiveCommand();
         public ViewModel()
         {
             AddDiamondCommand.Subscribe(() => Shapes.Add(new Diamond()));
             AddCircleCommand.Subscribe(() => Shapes.Add(new Circle()));
             ClearCommand.Subscribe(() => Shapes.Clear());
         }
     }
     public partial class MainWindow : Window
     {
         public MainWindow() => InitializeComponent();
     }
 }
 ```
 ![アプリ画像](d51b340e77fb2881662a918b136c5482.png)

例追記

2021/07/14 11:53

投稿

TN8001

スコア9825

test CHANGED Viewed

@@ -75,3 +75,217 @@
 [C# - 【WPF】Dictonaryの値をコンボボックスに表示できない、クラスを参照したい｜teratail](https://teratail.com/questions/345835#reply-475188)
+---
+MVVMにするアプローチの一例です（↑の回答の使いまわし^^;
+MVVM的には非常に正しいと思うのですが、実際作りこむなら`Shape`や`Path`のコレクションを持つほうが楽だと思います（提示しておいてなんですが^^;
+[Shape クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.shape)
+[Path クラス (System.Windows.Shapes) | Microsoft Docs](https://docs.microsoft.com/ja-jp/dotnet/api/system.windows.shapes.path)
+動かすのがちょっと面倒だったので、雑に`MouseDragElementBehavior`を使いました（`DataTemplate`に`Grid`が入っているように、巧妙なごまかしがあります^^;
+[NuGet Gallery | Microsoft.Xaml.Behaviors.Wpf 1.1.31](https://www.nuget.org/packages/Microsoft.Xaml.Behaviors.Wpf/1.1.31)
+```xaml
+<Window
+  x:Class="Questions349407.MainWindow"
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:behaviors="http://schemas.microsoft.com/xaml/behaviors"
+  xmlns:local="clr-namespace:Questions349407"
+  Width="700"
+  Height="500">
+  <Window.DataContext>
+    <local:ViewModel />
+  </Window.DataContext>
+  <DockPanel>
+    <Menu DockPanel.Dock="Top">
+      <MenuItem Header="ずけい">
+        <MenuItem Command="{Binding AddDiamondCommand}" Header="ひしがた" />
+        <MenuItem Command="{Binding AddCircleCommand}" Header="まる" />
+        <Separator />
+        <MenuItem Command="{Binding ClearCommand}" Header="クリア" />
+      </MenuItem>
+    </Menu>
+    <ItemsControl ItemsSource="{Binding Shapes}">
+      <ItemsControl.Resources>
+        <DataTemplate DataType="{x:Type local:Diamond}">
+          <Grid>
+            <Path
+              Data="M100,80L150,130L100,180L50,130Z"
+              Fill="RoyalBlue"
+              Stretch="Fill"
+              Stroke="Black"
+              StrokeThickness="1">
+              <behaviors:Interaction.Behaviors>
+                <behaviors:MouseDragElementBehavior />
+              </behaviors:Interaction.Behaviors>
+            </Path>
+          </Grid>
+        </DataTemplate>
+        <DataTemplate DataType="{x:Type local:Circle}">
+          <Grid>
+            <Ellipse
+              Width="100"
+              Height="100"
+              Fill="HotPink"
+              Stretch="Fill"
+              Stroke="Black"
+              StrokeThickness="1">
+              <behaviors:Interaction.Behaviors>
+                <behaviors:MouseDragElementBehavior />
+              </behaviors:Interaction.Behaviors>
+            </Ellipse>
+          </Grid>
+        </DataTemplate>
+      </ItemsControl.Resources>
+      <ItemsControl.ItemsPanel>
+        <ItemsPanelTemplate>
+          <Canvas />
+        </ItemsPanelTemplate>
+      </ItemsControl.ItemsPanel>
+    </ItemsControl>
+  </DockPanel>
+</Window>
+```
+```C#
+using Reactive.Bindings;
+using System.Collections.ObjectModel;
+using System.Windows;
+namespace Questions349407
+{
+    public interface Shape { } // System.Windows.Shapes.Shape とは無関係
+    public class Diamond : Shape { }
+    public class Circle : Shape { }
+    public class ViewModel
+    {
+        public ObservableCollection<Shape> Shapes { get; } = new ObservableCollection<Shape>();
+        public ReactiveCommand AddDiamondCommand { get; } = new ReactiveCommand();
+        public ReactiveCommand AddCircleCommand { get; } = new ReactiveCommand();
+        public ReactiveCommand ClearCommand { get; } = new ReactiveCommand();
+        public ViewModel()
+        {
+            AddDiamondCommand.Subscribe(() => Shapes.Add(new Diamond()));
+            AddCircleCommand.Subscribe(() => Shapes.Add(new Circle()));
+            ClearCommand.Subscribe(() => Shapes.Clear());
+        }
+    }
+    public partial class MainWindow : Window
+    {
+        public MainWindow() => InitializeComponent();
+    }
+}
+```
+![アプリ画像](d51b340e77fb2881662a918b136c5482.png)