WPF 画像に文字を挿入

Question

こんばんわ。神村亮佑です。
今回、WPFを勉強している際に、PhotoShopの機能を模倣していくことを教授にアドバイスをいただきました。
そこで、私はPhotoShopをWPFでコードを書いております。
そのPhotoShopの機能の一つに画像にテキストを埋め込むという機能(横書き文字ツール)があります。

今回、その機能をWPFで実装していこうと考えております。
具体的には、マウスで大体の大きさの枠を決め、そこに文字を書いていきたいと考えています。

しかし、試行錯誤しググった結果、良い方法が見つからないため、今回ご質問させていただきました。
お時間ございましたら、ご回答よろしくお願いします。

試したこと

CanvasにImageタブとTextBlockタブを作成し、コード上での上記の画像は作成できました。
しかし、マウスから情報を取得し、TextBlockを作成する方法がわからなかったため質問させていただきました。

そのコードはこちらです。

<Window x:Class="PhotoShop.Test"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PhotoShop"
        mc:Ignorable="d"
        Title="Test" Height="450" Width="800">
    <Grid>
        <Canvas>
            <Image Source="Resources\whippet.jpg" Stretch="Fill" Height="421" Width="643" />
            <TextBox Text="神村亮佑" FontSize="16px" FontWeight="bold" Foreground="Red" Height="421" Width="793"/>


        </Canvas>
    </Grid>
</Window>

###補足情報

OS windows 10 Home
C# 7.0
Visual Studio 2019

方針又は、解決方法のご回答よろしくお願いします。

Comments

[m.ts10806]

>試行錯誤しググった結果
が質問本文にはどこにも現れていません。
試したこと調べたことを具体的に記載してください。
https://teratail.com/help/question-tips#questionTips1-2
>検索して見つけたページでわからない事があれば、どのページのどの部分がわからないのかを明確に記し質問してみてください。

[Zuishin]

「WPF マウスイベント」で探せばいいのではないでしょうか。

[退会済みユーザー]

やってみます！ありがとうございます。
できたらまた、この回答に投稿します。

Answer 1

PhotoShopの機能を模倣していくこと

入門者にはあまりに壮大な目標に感じますが、まあどこまでやるかによりますね。

PhotoShopは持っていませんが、ツールバーにある[TEXT]ボタンを選択して画面をクリックするとそこに枠が出る（ドラッグで範囲指定？）みたいなやつですね？
フォントや色を変更できて、欲を言えばマウスで移動やリサイズができる。と

凝ったUIの作りこみはロジック以上に難しいことが多いです（私はあまり手を出さないようにしています^^;
とはいえ出発点としてミニマムかつ、そこそこ遊べるような参考コードを書いてみました。

[仕様]
画像エリアをダブルクリックでその場所にTextBoxを生成
TextBoxの右クリックメニューに削除（コピー等はTextBoxのコピーではなく、テキストのコピー）
テキストの編集はその場で可能（複数行に対応）
ほかのプロパティはPropertyGridで編集（クリックしたTextBoxをPropertyGridに割り当てるため、選択が少し重いです）

• 移動はCanvasLeft・CanvasTop
• サイズはWidth・Height（NaNで自動調整）
• フォントはFontなんちゃら
• 色はForeground

NuGetからExtended.Wpf.Toolkitをインストールしてください（PropertyGridだけ使います）

<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>

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();

        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（ざっとやってみたが移動とテキストの編集を、どう両立させるかがむずかしい）
• 「WPF ラバーバンド」あたりで検索

Comments

[退会済みユーザー]

ご回答ありがとうございます。
マウスでのサイズ変更・移動を頑張ってやってみます。
また、その方針を示していただきありがとうございます。
頑張ってやってみたいと思います。ありがとうございます！

Answer 2

Marginをバインディングするのはどうでしょうか

public Thickness TextBlockMargin { get; set; }
TextBlockMargin = new Thickness(5,5,5,5);

<TextBox Text="神村亮佑" FontSize="16px" FontWeight="bold" Foreground="Red" Height="421" Width="793" Margin="{Binding TextBlockMargin}"/>

Comments

[退会済みユーザー]

ありがとうございます。やってみます。