編集履歴

回答編集履歴

見直しキャンペーン中

2023/07/17 13:47

投稿

スコア9337

test CHANGED Viewed

@@ -1,341 +1,171 @@
 > PhotoShopの機能を模倣していくこと
+入門者にはあまりに壮大な目標に感じますが、まあどこまでやるかによりますね。
+PhotoShopは持っていませんが、ツールバーにある[TEXT]ボタンを選択して画面をクリックするとそこに枠が出る（ドラッグで範囲指定？）みたいなやつですね？
+フォントや色を変更できて、欲を言えばマウスで移動やリサイズができる。と
+凝ったUIの作りこみはロジック以上に難しいことが多いです（私はあまり手を出さないようにしています^^;
+とはいえ出発点としてミニマムかつ、そこそこ遊べるような参考コードを書いてみました。
+[仕様]
+画像エリアをダブルクリックでその場所に`TextBox`を生成
+`TextBox`の右クリックメニューに削除（コピー等は`TextBox`のコピーではなく、テキストのコピー）
+テキストの編集はその場で可能（複数行に対応）
+ほかのプロパティは`PropertyGrid`で編集（クリックした`TextBox`を`PropertyGrid`に割り当てるため、選択が少し重いです）
+- 移動は`CanvasLeft`・`CanvasTop`
+- サイズは`Width`・`Height`（`NaN`で自動調整）
+- フォントはFontなんちゃら
+- 色は`Foreground`
-入門者にはあまりに壮大な目標に感じますが、まあどこまでやるかによりますね。
+NuGetから`Extended.Wpf.Toolkit`をインストールしてください（`PropertyGrid`だけ使います）
-PhotoShopは持っていませんが、ツールバーにある[TEXT]ボタンを選択して画面をクリックするとそこに枠が出る（ドラッグで範囲指定？）みたいなやつですね？
-フォントや色を変更できて、欲を言えばマウスで移動やリサイズができる。と
-凝ったUIの作りこみはロジック以上に難しいことが多いです（私はあまり手を出さないようにしています^^;
-とはいえ出発点としてミニマムかつ、そこそこ遊べるような参考コードを書いてみました。
-[仕様]
-画像エリアをダブルクリックでその場所にTextBoxを生成
-TextBoxの右クリックメニューに削除（コピー等はTextBoxのコピーではなく、テキストのコピー）
-テキストの編集はその場で可能（複数行に対応）
-ほかのプロパティはPropertyGridで編集（クリックしたTextBoxをPropertyGridに割り当てるため、選択が少し重いです）
-- 移動はCanvasLeft CanvasTop
-- サイズはWidth Height（NaNで自動調整）
-- フォントはFontなんちゃら
-- 色はForeground
-NuGetから`Extended.Wpf.Toolkit`をインストールしてください（PropertyGridだけ使います）
-```xaml
+```xml
 <Window
   x:Class="Questions233943.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="clr-namespace:Questions233943"
   xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
   Width="800"
   Height="450">
   <Window.Resources>
     <ContextMenu x:Key="TextBoxContextMenu">
       <MenuItem Command="ApplicationCommands.Copy" />
       <MenuItem Command="ApplicationCommands.Cut" />
       <MenuItem Command="ApplicationCommands.Paste" />
       <MenuItem Click="DelMenuItem_Click" Header="削除" />
     </ContextMenu>
     <Style x:Key="TextBoxStyle" TargetType="{x:Type local:TextBoxEx}">
       <Setter Property="AcceptsReturn" Value="True" />
       <Setter Property="AcceptsTab" Value="True" />
       <Setter Property="Background" Value="{x:Null}" />
       <Setter Property="BorderBrush" Value="{x:Null}" />
       <Setter Property="ContextMenu" Value="{StaticResource TextBoxContextMenu}" />
       <Setter Property="FontSize" Value="16px" />
       <Setter Property="FontWeight" Value="bold" />
       <Setter Property="Foreground" Value="Red" />
       <Setter Property="Text" Value="テキスト" />
       <Setter Property="TextWrapping" Value="Wrap" />
       <Setter Property="Template">
         <Setter.Value>
           <ControlTemplate TargetType="{x:Type TextBox}">
             <Border
               x:Name="border"
               Background="{TemplateBinding Background}"
               BorderBrush="{TemplateBinding BorderBrush}"
               BorderThickness="{TemplateBinding BorderThickness}"
               SnapsToDevicePixels="True">
               <ScrollViewer
                 x:Name="PART_ContentHost"
                 Focusable="false"
                 HorizontalScrollBarVisibility="Hidden"
                 VerticalScrollBarVisibility="Hidden" />
             </Border>
             <ControlTemplate.Triggers>
               <Trigger Property="IsMouseOver" Value="true">
                 <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
               </Trigger>
               <Trigger Property="IsFocused" Value="true">
                 <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
               </Trigger>
             </ControlTemplate.Triggers>
           </ControlTemplate>
         </Setter.Value>
       </Setter>
     </Style>
   </Window.Resources>
   <Grid>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="2*" />
       <ColumnDefinition Width="5" />
       <ColumnDefinition />
     </Grid.ColumnDefinitions>
     <Canvas x:Name="canvas" MouseLeftButtonDown="Canvas_MouseLeftButtonDown">
       <Image Source="Resources\whippet.jpg" />
     </Canvas>
     <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
     <xctk:PropertyGrid x:Name="propertyGrid" Grid.Column="2" />
   </Grid>
 </Window>
 ```
-```C#
+```cs
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 namespace Questions233943
 {
     // PropertyGridでいじれるようにCanvas.Left Canvas.Topをラップ
     public class TextBoxEx : TextBox
     {
         public static readonly DependencyProperty CanvasLeftProperty
             = DependencyProperty.Register(nameof(CanvasLeft), typeof(double), typeof(TextBoxEx),
                 new FrameworkPropertyMetadata(0d, new PropertyChangedCallback(OnCanvasLeftChanged)));
         public double CanvasLeft { get => (double)GetValue(CanvasLeftProperty); set => SetValue(CanvasLeftProperty, value); }
         private static void OnCanvasLeftChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
         {
             if(obj is TextBoxEx ctrl) Canvas.SetLeft(ctrl, ctrl.CanvasLeft);
         }
+        public static readonly DependencyProperty CanvasTopProperty
+            = DependencyProperty.Register(nameof(CanvasTop), typeof(double), typeof(TextBoxEx),
+                new FrameworkPropertyMetadata(0d, new PropertyChangedCallback(OnCanvasTopChanged)));
+        public double CanvasTop { get => (double)GetValue(CanvasTopProperty); set => SetValue(CanvasTopProperty, value); }
+        private static void OnCanvasTopChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
+        {
+            if(obj is TextBoxEx ctrl) Canvas.SetTop(ctrl, ctrl.CanvasTop);
+        }
+    }
+    public partial class MainWindow : Window
+    {
+        public MainWindow() => InitializeComponent();
-        public static readonly DependencyProperty CanvasTopProperty
-            = DependencyProperty.Register(nameof(CanvasTop), typeof(double), typeof(TextBoxEx),
-                new FrameworkPropertyMetadata(0d, new PropertyChangedCallback(OnCanvasTopChanged)));
-        public double CanvasTop { get => (double)GetValue(CanvasTopProperty); set => SetValue(CanvasTopProperty, value); }
-        private static void OnCanvasTopChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
+        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
+            if(e.ClickCount == 2)
+            {
+                var textBox = new TextBoxEx
+                {
+                    Style = FindResource("TextBoxStyle") as Style,
-            if(obj is TextBoxEx ctrl) Canvas.SetTop(ctrl, ctrl.CanvasTop);
+                    CanvasLeft = e.GetPosition(canvas).X,
+                    CanvasTop = e.GetPosition(canvas).Y
+                };
+                textBox.GotFocus += TextBox_GotFocus;
+                canvas.Children.Add(textBox);
+            }
         }
-    }
-    public partial class MainWindow : Window
-    {
-        public MainWindow() => InitializeComponent();
-        private void Canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
-        {
-            if(e.ClickCount == 2)
-            {
-                var textBox = new TextBoxEx
-                {
-                    Style = FindResource("TextBoxStyle") as Style,
-                    CanvasLeft = e.GetPosition(canvas).X,
-                    CanvasTop = e.GetPosition(canvas).Y
-                };
-                textBox.GotFocus += TextBox_GotFocus;
-                canvas.Children.Add(textBox);
-            }
-        }
         private void TextBox_GotFocus(object sender, RoutedEventArgs e)
             => propertyGrid.SelectedObject = sender;
         private void DelMenuItem_Click(object sender, RoutedEventArgs e)
         {
             if(sender is MenuItem menuItem)
             {
                 if(menuItem.Parent is ContextMenu contextMenu)
                 {
                     if(contextMenu.PlacementTarget is TextBoxEx textBox)
                     {
                         propertyGrid.SelectedObject = null;
                         textBox.GotFocus -= TextBox_GotFocus;
                         canvas.Children.Remove(textBox);
                     }
                 }
             }
         }
     }
 }
 ```
 ---
 マウスでサイズ変更・移動をちゃんとやるなら、この辺を参考に頑張ってください。
 * 大変古いが公式の [ResizingAdorner のサンプル | Microsoft Docs](https://docs.microsoft.com/ja-jp/previous-versions/dotnet/netframework-3.5/ms771714(v=vs.90)?redirectedfrom=MSDN)（ざっとやってみたが移動とテキストの編集を、どう両立させるかがむずかしい）
 * 「WPF ラバーバンド」あたりで検索