create custom wpf usercontrol in csharp

To create a custom WPF UserControl in C#, follow these steps -

  1. Open Visual Studio and create a new WPF Application project.
  2. Right-click on the project in the Solution Explorer and add a new User Control.
  3. In XAML, design the appearance of the control as per your requirements.
  4. In the code-behind class of the user control, add the logic to define the behavior of the control. You can add properties, methods, and events as per your requirements.
  5. Build the project to compile the control.
  6. You can now use the custom control in other parts of your application by adding it to the XAML and filling in the relevant properties and events.

Here is an example of a custom user control in C# -

main.cs
//CustomUserControl.xaml.cs
public partial class CustomUserControl : UserControl
{
    public CustomUserControl()
    {
        InitializeComponent();
    }

    //Adding a custom property
    public string CustomText
    {
        get { return (string)GetValue(CustomTextProperty); }
        set { SetValue(CustomTextProperty, value); }
    }

    public static readonly DependencyProperty CustomTextProperty =
        DependencyProperty.Register("CustomText", typeof(string), typeof(CustomUserControl), new FrameworkPropertyMetadata("Custom Text", FrameworkPropertyMetadataOptions.None));

    //Adding a custom event
    public event EventHandler ButtonClicked;

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        ButtonClicked?.Invoke(this, EventArgs.Empty);
    }
}

//CustomUserControl.xaml
<UserControl x:Class="WpfApp1.CustomUserControl"
             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="450" d:DesignWidth="800">
    <Grid>
        <Button Content="Click Me" Click="Button_Click"/>
        <Label Content="{Binding CustomText}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</UserControl>
1463 chars
41 lines

In the above code, we have defined a custom property "CustomText" and a custom event "ButtonClicked". The event is raised when the button is clicked. The control can be used in other parts of the application by adding it to the XAML code as follows -

<Window xmlns:local="clr-namespace:WpfApp1"  x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <local:CustomUserControl CustomText="Hello, World!" ButtonClicked="CustomUserControl_ButtonClicked"/>
    </Grid>
</Window>
407 chars
9 lines

In the above code, we have added the custom control to the grid and set the custom property "CustomText" to "Hello, World!". We have also subscribed to the custom event "ButtonClicked" and set the relevant event handler method "CustomUserControl_ButtonClicked".

gistlibby LogSnag