Saturday, April 22, 2017

How to create a Dependency Property in a UserControl and how use it

You can refer the topic Read my post : How to create a dependency property in my blog.

Problem : we need to create a user control which having label and textbox in combine and we can change the label ,text and fore color of textbox where it is use.





Add a UserControl 

Put Label and textbox in XAML

<UserControl x:Class="CustomDP1.LabelTextBox"
             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:DesignWidth="300" Height="36.091">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40*"/>
            <ColumnDefinition Width="60*"/>
        </Grid.ColumnDefinitions>
        <Label Content="Label" Name="lblDispaly" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" Background="Gray"/>
        <TextBox Grid.Column="1" Name="txtDispaly" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Stretch" TextWrapping="Wrap"  />
    </Grid>
</UserControl>




Create three Dependency property 
  • TextBoxForeColorProperty 
  • LabelTextProperty 
  • TextBoxTextProperty 

    /// <summary>
    /// Interaction logic for LabelTextBox.xaml
    /// </summary>
    public partial class LabelTextBox : UserControl
    {
        public LabelTextBox()
        {
            InitializeComponent();
            this.Loaded += LabelTextBox_Loaded;
        }

        void LabelTextBox_Loaded(object sender, RoutedEventArgs e)
        {
            lblDispaly.Content = LabelText;
            txtDispaly.Text = TextBoxText;
            txtDispaly.Foreground = TextBoxForeColor;
        }

        public static readonly DependencyProperty TextBoxForeColorProperty = DependencyProperty.Register(
        "TextBoxForeColor",
        typeof(Brush),
        typeof(LabelTextBox),
        new PropertyMetadata(new SolidColorBrush(Colors.WhiteSmoke)));

        public Brush TextBoxForeColor
        {
            get { return (Brush)GetValue(TextBoxForeColorProperty); }
            set { SetValue(TextBoxForeColorProperty, value); }
        }


        public static readonly DependencyProperty LabelTextProperty = DependencyProperty.Register(
       "LabelText",
       typeof(string),
       typeof(LabelTextBox),
       new PropertyMetadata(null));

        public string LabelText
        {
            get { return (string)GetValue(LabelTextProperty); }
            set { SetValue(LabelTextProperty, value); }
        }


        public static readonly DependencyProperty TextBoxTextProperty = DependencyProperty.Register(
        "TextBoxText",
        typeof(string),
        typeof(LabelTextBox),
        new PropertyMetadata(null));

        public string TextBoxText
        {
            get { return (string)GetValue(TextBoxTextProperty); }
            set { SetValue(TextBoxTextProperty, value); }
        }
    }

Use this User control

Add the namespace of usercontrol
Add user control
now we can add values in custom dp(s)

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:CustomDP1" x:Class="CustomDP1.MainWindow"
        Title="Custom Control" Height="165.789" Width="501.316">
    <Grid>
        <local:LabelTextBox HorizontalAlignment="Left" VerticalAlignment="Top" Height="36" Width="356" LabelText="my label" TextBoxForeColor="Red"
                            TextBoxText="my custom textbox" Margin="59,45,0,0"/>
    </Grid>
</Window>

We can put these dp(s) values or bind with view model properties.