WPF에서 InkCanvas에 TextBox 추가하기

개발 환경

Visual Studio 2017 (C#)

Visual Studio 확장의 "Prism Template Pack"

Prism.Core 6.3.0

Prism.Unity 6.3.0

Prism.Wpf 6.3.0

CommonServiceLocator 1.3.0

Unity 4.0.1

MahApps.Metro 1.5.0

처음에

이전 프로젝트를 사용하기 때문에 Prism을 사용하고 있습니다 만, ViewModel 측에서 기술 할 필요는없는 처리입니다만, 다른 커멘드와 맞추기 위해서 ViewModel 측에 기술하고 있습니다.
※ 이전에 작성한 「WPF로 InkCanvas를 사용해 본다」로 작성한 프로젝트를 사용하므로, 도중까지는, 그쪽을 확인해 주세요.

참고

HIRO의 블로그
HIRO 's.NET htp : // bg. 히로 s-t. 네 t/

인체도 이미지를 빌렸습니다.
무료 일러스트 h tp // w w. 샤로 ts. 이 m/아이. HTML

설명 생략 부분

Prism Template Pack 설치
MahApps 설치
Prism Template Pack 프로젝트 만들기
「InkCanvas」의 각종 커멘드 조작의 구현
※「Prism Template Pack」의 인스톨은, 이전의 기사를 참고해 주세요.
Prism과 Unity를 사용하는 WPF 프로젝트 템플릿을 사용해보십시오.
※「InkCanvas」의 각종 커멘드 조작의 구현은, 이전의 기사를 참고로 해 주세요.
WPF에서 InkCanvas를 사용해보기

MainUc.xaml에 컨트롤 추가

MainUc.xaml

<Button Content="テキスト追加" Command="{Binding AddTextCommand}" CommandParameter="{Binding ElementName=inkCanvas}"/>

이번에도 ViewModel 측에서 InkCanvas를 사용하기 때문에 "CommandParameter"에 InkCanvas 이름을 넣고 있습니다.

MainUcViewModel.cs에 DelegateCommand 추가

MainUcViewModel.cs

        /// <summary>
        /// テキストボタンコマンド
        /// </summary>
        private DelegateCommand<InkCanvas> addTextCommand;
        public DelegateCommand<InkCanvas> AddTextCommand =>
            addTextCommand ?? (addTextCommand = new DelegateCommand<InkCanvas>(AddTextCommandExectute));

※DelegateCommand에 대해서 보충

※ 'Prism Template Pack'을 VisualStudio로 확장한 경우 'cmdg'를 입력하면 간단히 위의 DelegateCommand를 만들 수 있습니다.

MainUcViewModel.cs (cmdg 입력 후 Tab 키를 두 번 누르기 전)

cmdg

MainUcViewModel.cs (cmdg 입력 후 Tab 키를 두 번 누른 후)

        private DelegateCommand<string> fieldNameCommand;
        public DelegateCommand<string> CommandNameCommand =>
            fieldNameCommand ?? (fieldNameCommand = new DelegateCommand<string>(CommandName, CanCommandName));

이렇게 쉽게 매개 변수가있는 DelegateCommand가 만들어지기 때문에 fieldName과 CommandName을 변경하기 만하면됩니다.

MainUcViewModel.cs에 TextBox 추가 처리 추가

MainUcViewModel.cs

        /// <summary>
        /// TextBoxの追加処理
        /// </summary>
        /// <param name="inkCanvas"></param>
        private void AddTextCommandExectute(InkCanvas inkCanvas)
        {

            InkEditingMode = InkCanvasEditingMode.None;

            // TextBoxの追加
            TextBox newTextBox = new TextBox();
            newTextBox.Text = "入力してください";
            newTextBox.FontSize = PenSize;
            newTextBox.Foreground = new SolidColorBrush(Colors.Green);
            newTextBox.Background = Brushes.Transparent;
            newTextBox.BorderBrush = Brushes.Transparent;
            newTextBox.SelectAll();
            inkCanvas.Children.Add(newTextBox);
            // TextBoxの表示位置
            InkCanvas.SetTop(newTextBox, 5);
            InkCanvas.SetLeft(newTextBox, 5);

            // フォーカスの設定
            FocusManager.SetFocusedElement(FocusManager.GetFocusScope(newTextBox), newTextBox);
            // IMEの変更
            InputMethod.Current.ImeState = InputMethodState.On;

        }

디버그 실행

디버깅을 실행하면 다음과 같습니다.

같은 느낌으로 TextBox의 추가와 선택이 가능하게 되었습니다.
덧붙여 TextBlock이나 RichText에서도 가능합니다.

완성일까 생각해. . . .

InkCanvas의 자식 요소에 TextBox를 추가하여 볼 수있는 곳까지 확인할 수 있었지만 치명적인 문제가 발생했습니다.
이전 기사에서 만든 Stroke를 이미지 파일이나 isf 파일에 저장하는 방법을 그대로 두면 추가한 TextBox가 인식되지 않으므로 저장할 수 없습니다.
이유는 TextBox를 StrokeCollection으로 변환하지 않기 때문입니다.
원래 StrokeCollection으로 변환하는 방법을 모르기 때문에 어떻게해야할지 모색 중입니다.
우선, 이번은 화면에 표시하는 곳까지로 하고 있습니다.