MENU

blog
スタッフブログ

dot
[WPF]入力した内容を自動反映するTextBox
技術

[WPF]入力した内容を自動反映するTextBox

こんにちは!
ソリューションセクションの日野です。

新年あけましてもう半月ですね
今年も一年よろしくお願いいたします🐰

今回もWPFの拡張コントロールを作成したので紹介したいと思います

指定のTextBoxに入力されたら自動的に別のTextBoxにも反映される拡張TextBoxを作りました。
完成形はこちら(動画です)↓

なぜか微妙な位置でしか撮れないキャプチャー
windowの動画を撮りたかったのになぜかどうやっても微妙な位置でしか取れませんでした・・・
なぜなんだ・・・(´・ω・`)

名前が入力されたらフリガナを自動的に入力したい!!とか、指定の値が入力されたら別のTextBoxの色を変更したい!!とかそうゆうときに使えるはずです。

ソースコード

それでは実際のソースコードです
TextBoxを拡張して「Target」のプロパティを追加しました。

AutoInputTextBox.cs

using System.Windows;
using System.Windows.Controls;

namespace WorkInstructionManager.Libs.Extend.System.Windows.Controls
{
    class AutoInputTextBox : TextBox
    {
        /// <summary>
        /// 入力完了時に操作するTarget要素を指定するプロパティ
        /// </summary>
        public static readonly DependencyProperty TargetProperty =
            DependencyProperty.Register("Target", typeof(UIElement), typeof(AutoInputTextBox), new PropertyMetadata(OnInitalizeTargetData));


        public AutoInputTextBox()
        {
            this.LostFocus += AutoInputTextBox_LostFocus;
        }


        /// <summary>
        /// 画面表示時にtargetのIsEnabledを更新します
        /// 基本falseになります
        /// </summary>
        /// <param name="d"></param>
        /// <param name="e"></param>
        private static void OnInitalizeTargetData(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var item = d as AutoInputTextBox;

            if (item.Target == null)
            {
                return;
            }
        }

        /// <summary>
        /// 対象のコントロール
        /// </summary>
        public UIElement Target
        {
            get
            {
                return (UIElement)GetValue(TargetProperty);
            }
            set
            {
                SetValue(TargetProperty, value);
            }
        }

        /// <summary>
        /// 自身のTextBoxのロストフォーカス時にTargetのTextBoxを処理します
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void AutoInputTextBox_LostFocus(object sender, RoutedEventArgs e)
        {
            if (Target == null || IsReadOnly) return;
            //ここの処理を変更でいろんなことできるかも
            ((TextBox)Target).Text = this.Text;
        }
    }
}

今回はAutoInputTextBoxに何かしら入力された後、フォーカスを外すと入力された値をそのままTargetのTextBoxに自動反映するようにしています。

あとはこれをWindowのXamlで呼び出します!

MainWindow.xaml.cs

<Window x:Class="WpfApp1.MainWindow"
        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:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="400">
    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <Label Content="拡張TextBox"/>
            <local:AutoInputTextBox Target="{Binding ElementName=Test}" Width="150"/>
            <Label Content="対象のTextBox"/>
            <TextBox Name="Test" Width="150"/>
        </StackPanel>
    </Grid>
</Window>

Targetに対象のTextBoxのNameを指定しています

最後に

かゆいところに手が届きそうで届かない・・・それがWPFですね(私談)
こんなことやってるの私だけでしょうか・・・
なにかのお役に立てると嬉しいです🐰

それではこの辺で!

dot
dot
PAGETOP