回答編集履歴

見直しキャンペーン中

2023/07/29 05:35

投稿

TN8001

スコア9326

test CHANGED Viewed

@@ -1,277 +1,139 @@
 >> [C# - C#、WPF、MVVM形式、で画面に図形を表示したい｜teratail](https://teratail.com/questions/349407#reply-478878)
 >> 例えば↑のようにDataTemplate・classを必要なだけ増やす
 > DataTemplate をクラスごとに出来るんですね。
 > 確かに、その方法で、プロパティも設定できるなら、必要な分だけ追加するのでも十分そうです。
+提示リンクとほぼ何も変わりませんが、雑に想定コントロール版に書き換えました（不足プロパティがあるでしょうが好きに足してください）
+面倒なので増減はしませんが、`Items`を増減すれば表示も追従します。
+PDFリーダーにこの（`ItemsControl`にバインドするような）方法が向いているかは、ちょっとわからないです。
-提示リンクとほぼ何も変わりませんが、雑に想定コントロール版に書き換えました（不足プロパティがあるでしょうが好きに足してください）
-面倒なので増減はしませんが、Itemsを増減すれば表示も追従します。
-PDFリーダーにこの（ItemsControlにバインドするような）方法が向いているかは、ちょっとわからないです。
-```xaml
+```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>
 ```
-```C#
+```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)