[WPF] Tạo Usercontrol trong WPF – Bài 01

Chào các bạn !

Trong bài này, csharpcanban.com sẽ hướng dẫn các bạn tạo Usercontrol có tên là LabeledTextbox, trong Usercontrol này bao gồm 2 Label và 1 Textbox, 1 Label để hiển thị tên của Textbox, Textbox sẽ hiển thị nội dung còn 1 Label sẽ hiển thị Mask, như hình dưới.

Bước 1. Tạo một Project WPF mới.

Bước 2. Tạo một Userconrtol và đặt tên là LabeledTextbox.

Bước 3. Thêm mã XAML vào Usercontrol như dưới đây

<UserControl x:Class="Tuan.Wpf.Controls.LabeledTextbox"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="200">
    <Border>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Label VerticalAlignment="Center" HorizontalAlignment="Right" Name="LabelValue" Grid.Column="0"/>
            
            <Label VerticalAlignment="Center" Foreground="LightGray" HorizontalAlignment="Stretch" Name="LabelMask" Grid.Column="1"/>

            <TextBox HorizontalAlignment="Stretch" Background="Transparent" 
                     BorderBrush="LightGray" BorderThickness="1" GotFocus="TextBoxValue_GotFocus" LostFocus="TextBoxValue_LostFocus"
                     Name="TextBoxValue" Grid.Column="1" 
                     VerticalContentAlignment="Stretch" 
                     Style="{StaticResource {x:Static ToolBar.TextBoxStyleKey}}"/>
        </Grid>
    </Border>
</UserControl>

Bước 4. Thêm mã C# vào Usercontrol như sau

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Text.RegularExpressions;

namespace Tuan.Wpf.Controls
{
    /// <summary>
    /// Interaction logic for LabeledTextbox.xaml
    /// </summary>
    public partial class LabeledTextbox : UserControl
    {
        /// <summary>The Value property represents the TextBoxValue of the control.</summary>
        /// <returns>The current TextBoxValue of the control</returns>      

        public LabeledTextbox()
        {
            InitializeComponent();
        }

        /// <summary>The Value property represents the TextBoxValue of the control.</summary>
        /// <returns>The current TextBoxValue of the control</returns>      

        public string LabelContent
        {
            get
            {
                return (string)GetValue(LabelValueProperty);
            }
            set
            {
                LabelValue.Content = value.ToString();
                SetValue(LabelValueProperty, value);
            }
        }

        // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LabelValueProperty =
            DependencyProperty.Register("LabelContent", typeof(string), typeof(LabeledTextbox),
              new PropertyMetadata(string.Empty, new PropertyChangedCallback(OnSomeLabelPropertyChanged)));


        private static void OnSomeLabelPropertyChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
        {
            LabeledTextbox numericBox = target as LabeledTextbox;
            numericBox.LabelValue.Content = e.NewValue.ToString();
        }

        /// <summary>The Value property represents the TextBoxValue of the control.</summary>
        /// <returns>The current TextBoxValue of the control</returns>      

        public string TextContent
        {
            get
            {
                return (string)GetValue(TextValueProperty);
            }
            set
            {
                TextBoxValue.Text = value.ToString();
                SetValue(TextValueProperty, value);
            }
        }

        // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TextValueProperty =
            DependencyProperty.Register("TextContent", typeof(string), typeof(LabeledTextbox),
              new PropertyMetadata(string.Empty, new PropertyChangedCallback(OnSomeValuePropertyChanged)));


        private static void OnSomeValuePropertyChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
        {
            LabeledTextbox numericBox = target as LabeledTextbox;
            numericBox.TextBoxValue.Text = e.NewValue.ToString();
        }

        /// <summary>The Value property represents the TextBoxValue of the control.</summary>
        /// <returns>The current TextBoxValue of the control</returns>      

        public string LabelMaskContent
        {
            get
            {
                return (string)GetValue(MaskValueProperty);
            }
            set
            {
                TextBoxValue.Text = value.ToString();
                SetValue(MaskValueProperty, value);
            }
        }

        // Using a DependencyProperty as the backing store for Value.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty MaskValueProperty =
            DependencyProperty.Register("LabelMaskContent", typeof(string), typeof(LabeledTextbox),
              new PropertyMetadata(string.Empty, new PropertyChangedCallback(OnSomeMaskValuePropertyChanged)));


        private static void OnSomeMaskValuePropertyChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
        {
            LabeledTextbox numericBox = target as LabeledTextbox;
            numericBox.LabelMask.Content = e.NewValue.ToString();
        }

        private void TextBoxValue_GotFocus(object sender, RoutedEventArgs e)
        {
            var tbx = sender as TextBox;

            LabelMask.Visibility = Visibility.Collapsed;
        }

        private void TextBoxValue_LostFocus(object sender, RoutedEventArgs e)
        {
            var tbx = sender as TextBox;

            if (string.IsNullOrEmpty(tbx.Text.Trim()))
            {
                LabelMask.Visibility = Visibility.Visible;
            }
        }
    }
}

Bước 5. Thêm mã XAML như sau vào Project ban đầu

<Window x:Class="TestUC.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:control="clr-namespace:Tuan.Wpf.Controls;assembly=Tuan.Wpf.Controls"
        xmlns:local="clr-namespace:TestUC"
        mc:Ignorable="d"
        Title="Csharpcanban.com" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <control:LabeledTextbox LabelContent="Họ và tên" LabelMaskContent="Nhập họ và tên" Height="50" Width="400"/>
            <control:LabeledTextbox LabelContent="Ngày sinh" LabelMaskContent="Nhập ngày sinh" Height="50" Width="400"/>
            <control:LabeledTextbox LabelContent="Số điện thoại" LabelMaskContent="Nhập số điện thoại" Height="50" Width="400"/>
            <control:LabeledTextbox LabelContent="Số CMND" LabelMaskContent="Nhập số CMND" Height="50" Width="400"/>
        </StackPanel>
    </Grid>
</Window>

Bước 6. Chạy ứng dụng và thu được kết quả như hình trên.

Chúc các bạn thành công !