回答編集履歴

見直しキャンペーン中

2023/07/29 05:35

投稿

TN8001

スコア10108

answer CHANGED Viewed

@@ -1,139 +1,139 @@
->> [C# - C#、WPF、MVVM形式、で画面に図形を表示したい｜teratail](https://teratail.com/questions/349407#reply-478878)
->> 例えば↑のようにDataTemplate・classを必要なだけ増やす
-> DataTemplate をクラスごとに出来るんですね。
-> 確かに、その方法で、プロパティも設定できるなら、必要な分だけ追加するのでも十分そうです。
-提示リンクとほぼ何も変わりませんが、雑に想定コントロール版に書き換えました（不足プロパティがあるでしょうが好きに足してください）
-面倒なので増減はしませんが、Itemsを増減すれば表示も追従します。
-PDFリーダーにこの（ItemsControlにバインドするような）方法が向いているかは、ちょっとわからないです。
-```xaml
-<Window
-  x:Class="Questions359699.MainWindow"
-  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-  xmlns:local="clr-namespace:Questions359699"
-  Width="800"
-  Height="450">
-  <Window.Resources>
-    <DataTemplate DataType="{x:Type local:PathItem}">
-      <Path
-        Width="{Binding Width}"
-        Height="{Binding Height}"
-        Data="{Binding Data}"
-        Stroke="{Binding Stroke}" />
-    </DataTemplate>
-    <DataTemplate DataType="{x:Type local:EllipseItem}">
-      <Ellipse
-        Width="{Binding Width}"
-        Height="{Binding Height}"
-        Fill="{Binding Fill}" />
-    </DataTemplate>
-    <DataTemplate DataType="{x:Type local:ImageItem}">
-      <Image
-        Width="{Binding Width}"
-        Height="{Binding Height}"
-        Source="{Binding Source}" />
-    </DataTemplate>
-    <DataTemplate DataType="{x:Type local:RectangleItem}">
-      <Rectangle
-        Width="{Binding Width}"
-        Height="{Binding Height}"
-        Fill="{Binding Fill}" />
-    </DataTemplate>
-    <DataTemplate DataType="{x:Type local:RichTextBoxItem}">
-      <RichTextBox Width="{Binding Width}" Height="{Binding Height}">
-        <FlowDocument>
-          <Paragraph>
-            <Run Text="{Binding Text}" />
-          </Paragraph>
-        </FlowDocument>
-      </RichTextBox>
-    </DataTemplate>
-  </Window.Resources>
-  <Grid>
-    <ItemsControl ItemsSource="{Binding Items}">
-      <ItemsControl.ItemsPanel>
-        <ItemsPanelTemplate>
-          <Canvas />
-        </ItemsPanelTemplate>
-      </ItemsControl.ItemsPanel>
-      <ItemsControl.ItemContainerStyle>
-        <Style>
-          <Setter Property="Canvas.Left" Value="{Binding X}" />
-          <Setter Property="Canvas.Top" Value="{Binding Y}" />
-        </Style>
-      </ItemsControl.ItemContainerStyle>
-    </ItemsControl>
-  </Grid>
-</Window>
-```
-```C#
-using System;
-using System.Collections.ObjectModel;
-using System.Windows;
-using System.Windows.Media;
-using System.Windows.Media.Imaging;
-namespace Questions359699
-{
-    public class Item
-    {
-        public double X { get; set; }
-        public double Y { get; set; }
-        public double Width { get; set; }
-        public double Height { get; set; }
-    }
-    public class PathItem : Item
-    {
-        public Brush Stroke { get; set; }
-        public string Data { get; set; }
-    }
-    public class EllipseItem : Item
-    {
-        public Brush Fill { get; set; }
-    }
-    public class ImageItem : Item
-    {
-        public ImageSource Source { get; set; }
-    }
-    public class RectangleItem : Item
-    {
-        public Brush Fill { get; set; }
-    }
-    public class RichTextBoxItem : Item
-    {
-        public string Text { get; set; }
-    }
-    public partial class MainWindow : Window
-    {
-        public ObservableCollection<Item> Items { get; }
-        public MainWindow()
-        {
-            InitializeComponent();
-            DataContext = this;
-            Items = new ObservableCollection<Item>
-            {
-                new PathItem { X = 50, Y = 50, Width = 50, Height = 50, Stroke = Brushes.Red, Data = "M0,25L25,50L50,25L25,0Z", },
-                new EllipseItem { X = 200, Y = 50, Width = 50, Height = 100, Fill = Brushes.Green, },
-                new ImageItem { X = 50, Y = 200, Width = 32, Height = 32, Source = new BitmapImage(new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail_32x32.jpg")), },
-                new RectangleItem { X = 200, Y = 200, Width = 100, Height = 50, Fill = Brushes.Blue, },
-                new RichTextBoxItem { X = 400, Y = 50, Width = 300, Height = 300, Text = "RichTextBoxItem" },
-            };
-        }
-    }
-}
-```
+>> [C# - C#、WPF、MVVM形式、で画面に図形を表示したい｜teratail](https://teratail.com/questions/349407#reply-478878)
+>> 例えば↑のようにDataTemplate・classを必要なだけ増やす
+> DataTemplate をクラスごとに出来るんですね。
+> 確かに、その方法で、プロパティも設定できるなら、必要な分だけ追加するのでも十分そうです。
+提示リンクとほぼ何も変わりませんが、雑に想定コントロール版に書き換えました（不足プロパティがあるでしょうが好きに足してください）
+面倒なので増減はしませんが、`Items`を増減すれば表示も追従します。
+PDFリーダーにこの（`ItemsControl`にバインドするような）方法が向いているかは、ちょっとわからないです。
+```xml
+<Window
+  x:Class="Questions359699.MainWindow"
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:local="clr-namespace:Questions359699"
+  Width="800"
+  Height="450">
+  <Window.Resources>
+    <DataTemplate DataType="{x:Type local:PathItem}">
+      <Path
+        Width="{Binding Width}"
+        Height="{Binding Height}"
+        Data="{Binding Data}"
+        Stroke="{Binding Stroke}" />
+    </DataTemplate>
+    <DataTemplate DataType="{x:Type local:EllipseItem}">
+      <Ellipse
+        Width="{Binding Width}"
+        Height="{Binding Height}"
+        Fill="{Binding Fill}" />
+    </DataTemplate>
+    <DataTemplate DataType="{x:Type local:ImageItem}">
+      <Image
+        Width="{Binding Width}"
+        Height="{Binding Height}"
+        Source="{Binding Source}" />
+    </DataTemplate>
+    <DataTemplate DataType="{x:Type local:RectangleItem}">
+      <Rectangle
+        Width="{Binding Width}"
+        Height="{Binding Height}"
+        Fill="{Binding Fill}" />
+    </DataTemplate>
+    <DataTemplate DataType="{x:Type local:RichTextBoxItem}">
+      <RichTextBox Width="{Binding Width}" Height="{Binding Height}">
+        <FlowDocument>
+          <Paragraph>
+            <Run Text="{Binding Text}" />
+          </Paragraph>
+        </FlowDocument>
+      </RichTextBox>
+    </DataTemplate>
+  </Window.Resources>
+  <Grid>
+    <ItemsControl ItemsSource="{Binding Items}">
+      <ItemsControl.ItemsPanel>
+        <ItemsPanelTemplate>
+          <Canvas />
+        </ItemsPanelTemplate>
+      </ItemsControl.ItemsPanel>
+      <ItemsControl.ItemContainerStyle>
+        <Style>
+          <Setter Property="Canvas.Left" Value="{Binding X}" />
+          <Setter Property="Canvas.Top" Value="{Binding Y}" />
+        </Style>
+      </ItemsControl.ItemContainerStyle>
+    </ItemsControl>
+  </Grid>
+</Window>
+```
+```cs
+using System;
+using System.Collections.ObjectModel;
+using System.Windows;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+namespace Questions359699
+{
+    public class Item
+    {
+        public double X { get; set; }
+        public double Y { get; set; }
+        public double Width { get; set; }
+        public double Height { get; set; }
+    }
+    public class PathItem : Item
+    {
+        public Brush Stroke { get; set; }
+        public string Data { get; set; }
+    }
+    public class EllipseItem : Item
+    {
+        public Brush Fill { get; set; }
+    }
+    public class ImageItem : Item
+    {
+        public ImageSource Source { get; set; }
+    }
+    public class RectangleItem : Item
+    {
+        public Brush Fill { get; set; }
+    }
+    public class RichTextBoxItem : Item
+    {
+        public string Text { get; set; }
+    }
+    public partial class MainWindow : Window
+    {
+        public ObservableCollection<Item> Items { get; }
+        public MainWindow()
+        {
+            InitializeComponent();
+            DataContext = this;
+            Items = new ObservableCollection<Item>
+            {
+                new PathItem { X = 50, Y = 50, Width = 50, Height = 50, Stroke = Brushes.Red, Data = "M0,25L25,50L50,25L25,0Z", },
+                new EllipseItem { X = 200, Y = 50, Width = 50, Height = 100, Fill = Brushes.Green, },
+                new ImageItem { X = 50, Y = 200, Width = 32, Height = 32, Source = new BitmapImage(new Uri("https://teratail-v2.storage.googleapis.com/uploads/avatars/u13/132786/KnkDDC5A_thumbnail_32x32.jpg")), },
+                new RectangleItem { X = 200, Y = 200, Width = 100, Height = 50, Fill = Brushes.Blue, },
+                new RichTextBoxItem { X = 400, Y = 50, Width = 300, Height = 300, Text = "RichTextBoxItem" },
+            };
+        }
+    }
+}
+```
+![アプリ画像](https://ddjkaamml8q8x.cloudfront.net/questions/2023-07-29/e9ec19fc-7fc1-4f7f-891f-ef64a4855fb4.png)