User controls are a composition of several controls that can be reused over and over. It is the equivalent to a TFrame in Delphi.

• Create control in one of the following ways:
  • Create new application of User Control type.
  • In existing application, go to Solutions Explorer, select project, right click, Add > User Control.
• Place all the required controls on the canvas.
• Add all the necessary code to interact with controls.
• Compile and build control (or application).

XAML Example:

<UserControl x:Class="ezFITPrototypeWPF.usrctrlDoubleBarSlider"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="160" Width="Auto">
    <Grid Background="Transparent">
        <Grid.ColumnDefinitions></Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="25" />
            <RowDefinition />
            <RowDefinition Height="25" />
        </Grid.RowDefinitions>
        <Button Grid.Row="0">^</Button>
        <StackPanel Grid.Row="1" Orientation="Horizontal">
            <ProgressBar Name="pbWest" Width="10" Height="Auto" Orientation="Vertical" Foreground="Red" Value="80" IsIndeterminate="False" 
                         MouseDoubleClick="pbWest_MouseDoubleClick" 
                         MouseWheel="pbWest_MouseWheel" 
                         MouseLeftButtonDown="pbWest_MouseLeftButtonDown" 
                         MouseMove="pbWest_MouseMove" />
            <ProgressBar Name="pbEast" Width="10" Height="Auto" Orientation="Vertical" Foreground="Blue" Value="80" IsIndeterminate="False" />
        </StackPanel>
        <Button Grid.Row="2">v</Button>
    </Grid>
</UserControl>

C# Example:

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;
 
namespace ezFITPrototypeWPF
{
    /// <summary>
    /// Interaction logic for usrctrlDoubleBarSlider.xaml
    /// </summary>
    public partial class usrctrlDoubleBarSlider : UserControl
    {
        public usrctrlDoubleBarSlider()
        {
            InitializeComponent();
        }
 
        private void pbWest_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            if (sender is ProgressBar)
            {
                // resize progressbar
                if (((ProgressBar)sender).Width == 10)
                {
                    ((ProgressBar)sender).Width = 20;
                }
                else
                {
                    ((ProgressBar)sender).Width = 10;
                }
            }
        }
 
        private void pbWest_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            if (sender is ProgressBar)
            {
                //MessageBox.Show(string.Format("Mouse Delta = {0}", e.Delta));  //debug
                if (e.Delta > 0)
                {
                    ((ProgressBar)sender).Value++;
                }
                else if (e.Delta < 0)
                {
                    ((ProgressBar)sender).Value--;
                }
            }
        }
 
        private void pbWest_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (sender is ProgressBar)
            {
                Point point = e.GetPosition(((ProgressBar)sender));
                //MessageBox.Show(string.Format("{0},{1}", point.X, point.Y));  //debug
                ((ProgressBar)sender).Value = 100 - ((point.Y / ((ProgressBar)sender).Height) * 100);
 
                // draw handle
                Rectangle rect = new Rectangle();
                rect.Height = 10;
                rect.Width = 300;
                rect.Fill = Brushes.Red;
                rect.BringIntoView();
                rect.PointFromScreen(point);
            }
        }
 
        private void pbWest_MouseMove(object sender, MouseEventArgs e)
        {
            if (sender is ProgressBar)
            {
                //Point point = e.GetPosition(((ProgressBar)sender));
                ////MessageBox.Show(string.Format("{0},{1}", point.X, point.Y));  //debug
                //((ProgressBar)sender).Value = 100 - ((point.Y / ((ProgressBar)sender).Height) * 100);
            }
        }
    }
}

• Add a reference to the application containing the control.
• In XAML, add the namespace support:

  xmlns:local="clr-namespace:WpfApplication1"

• Add and access the control through XAML editor using the given namespace (in this case, use local).

• Right click on Toolbox.
• From menu, select “Choose Items” > WPF Components > Browse, then select and add your assembly.