Click here to Skip to main content
15,867,568 members
Articles / Desktop Programming / WPF

How to Create a WPF User Control & Use It in a WPF Application ( C# )

Rate me:
Please Sign up or sign in to vote.
4.43/5 (72 votes)
24 Jan 2009CPOL1 min read 672.7K   27.4K   124   37
Creating a WPF User Control & using it in a WPF application ( C# )
preview

Introduction

This article shows you how we can create a User Control in WPF and how we can use it in our WPF applications. In this article, I'll show you how we can create a custom ToolTip in WPF with VS2008 SP1 & C#.

Background

There are similar articles like this, for example, see this article that was written by Sacha Barber.

Using the Code

There we go. First we should create a User Control. Thus we have to select WPF User Control Library Project.

Custom User Control in WPF

Now, we can create or edit the XAML code for creating a custom user control. I've used this XAML code for a custom tooltip. It's up to you what you want.

XML
<UserControl 
    Name="UserControlToolTip"
    x:Class="CustomToolTip.UserControl1"
    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" 
    mc:Ignorable="d" RenderTransformOrigin="0,0" HorizontalAlignment="Left" 
	VerticalAlignment="Top" >
    
    <UserControl.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1" ScaleY="1"/>
            <SkewTransform AngleX="0" AngleY="0"/>
            <RotateTransform Angle="0"/>
            <TranslateTransform x:Name="UserControlToolTipXY" X="0" Y="0"/>
        </TransformGroup>
    </UserControl.RenderTransform>
    
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center" 
	MinWidth="200" MinHeight="120">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="0.333*"/>
    		<RowDefinition Height="0.667*"/>
    	</Grid.RowDefinitions>
        <Rectangle Fill="#FFFBFBFB" Stroke="#FF000000" RadiusX="10" RadiusY="10"
        	 RenderTransformOrigin="0.139,0.012" StrokeThickness="1" Grid.RowSpan="2">
            <Rectangle.BitmapEffect>
                <DropShadowBitmapEffect Opacity="0.8"/>
            </Rectangle.BitmapEffect>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.139,0.012" 
        	StrokeThickness="10" Stroke="{x:Null}" 
	Margin="1,1,1,1" Grid.Row="0" Grid.RowSpan="2">
        	<Rectangle.Fill>
        		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0.725">
        			<GradientStop Color="#00E6D9AA" Offset="0.487"/>
        			<GradientStop Color="#FFE6D9AA" Offset="0.996"/>
        		</LinearGradientBrush>
        	</Rectangle.Fill>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.493,0.485" 
        	StrokeThickness="10" Stroke="{x:Null}" Grid.RowSpan="2" Margin="1,1,1,1">
        	<Rectangle.Fill>
        		<LinearGradientBrush EndPoint="0.014,0.5" StartPoint="0.211,0.5">
        			<GradientStop Color="#00E6D9AA" Offset="0.513"/>
        			<GradientStop Color="#FFE6D9AA" Offset="0.996"/>
        		</LinearGradientBrush>
        	</Rectangle.Fill>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.493,0.485" 
        	StrokeThickness="10" Stroke="{x:Null}" Grid.RowSpan="2" Margin="1,1,1,1">
        	<Rectangle.Fill>
        		<LinearGradientBrush EndPoint="0.493,0.002" StartPoint="0.493,0.33">
        			<GradientStop Color="#00E6D9AA" Offset="0.513"/>
        			<GradientStop Color="#FFE6D9AA" Offset="0.996"/>
        		</LinearGradientBrush>
        	</Rectangle.Fill>
        </Rectangle>
        <Rectangle RadiusX="10" RadiusY="10" RenderTransformOrigin="0.493,0.485" 
        	StrokeThickness="10" Stroke="{x:Null}" Grid.RowSpan="2" Margin="1,1,1,1">
        	<Rectangle.Fill>
        		<LinearGradientBrush EndPoint="0.99,0.441" StartPoint="0.794,0.441">
        			<GradientStop Color="#00E6D9AA" Offset="0.513"/>
        			<GradientStop Color="#FFE6D9AA" Offset="0.996"/>
        		</LinearGradientBrush>
        	</Rectangle.Fill>
        </Rectangle>
        <TextBlock Text="TextBlock" TextWrapping="Wrap" x:Name="TextBlockToolTip" 
        	RenderTransformOrigin="0.5,0.5" Grid.Row="1" HorizontalAlignment="Left" 
            	VerticalAlignment="Center" Margin="20,0,0,20" />
        <TextBlock Name="ToolTipTitle" HorizontalAlignment="Stretch" Margin="15,16,15,6.1" 
        	FontSize="14" Text="title" d:LayoutOverrides="Height" />
    </Grid>
</UserControl>

Also, I've added these methods and properties for controlling the elements:

C#
namespace CustomToolTip
{
    public partial class UserControl1 : UserControl
    {
        public UserControl1()
        {
            InitializeComponent();
        }

        public double UserControlToolTipX
        {
            get { return this.UserControlToolTipXY.X; }
            set { this.UserControlToolTipXY.X = value; }
        }

        public double UserControlToolTipY
        {
            get { return this.UserControlToolTipXY.Y; }
            set { this.UserControlToolTipXY.Y = value; }
        }

        public string UserControlTextBlockToolTip
        {
            get { return TextBlockToolTip.Text; }
            set { TextBlockToolTip.Text = value; }
        }

        public string UserControlToolTipTitle
        {
            get { return ToolTipTitle.Text; }
            set { ToolTipTitle.Text = value; }
        }
    }
}

After that, press Shift + F6 for building the DLL file. Now we can create a WPF application and use our custom user control in it. Thus, we should choose a WPF Application Project.

WPF APP

Then, we have to add our User Control DLL file in the references.

Image 4

We are going to use the custom User Control within a XAML window. So we have to add an extra XAML code. We have to add the following line within Window element:

user control XAML

At last, we must have a Window tag in our XAML code like this:

XML
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:myToolTip="clr-namespace:CustomToolTip;assembly=CustomToolTip"
    Title="Window1" Height="600" Width="800">
</Window>

OK, now we can use the User Control in the XAML code with XAML code like this:

user control XAML

At last, I've created this XAML code:

XML
<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:myToolTip="clr-namespace:CustomToolTip;assembly=CustomToolTip"
    Title="Window1" Height="600" Width="800">
    <Grid x:Name="rootGrid" RenderTransformOrigin="0.5,0.5">
    	<Grid.RenderTransform>
    		<TransformGroup>
    			<ScaleTransform ScaleX="1" ScaleY="1"/>
    			<SkewTransform AngleX="0" AngleY="0"/>
    			<RotateTransform Angle="0"/>
    			<TranslateTransform x:Name="rootGridXY" X="0" Y="0"/>
    		</TransformGroup>
    	</Grid.RenderTransform>
        <Rectangle Margin="26,34,496,374" Name="rectangle1" Stroke="Black" 
                   Fill="Coral" MouseLeave="rectangle_MouseLeave" 
		MouseMove="rectangle_MouseMove" />
        <Rectangle Fill="Lavender" Margin="537,29,53,376" Name="rectangle2" 
                   Stroke="Black" MouseMove="rectangle_MouseMove" 
		MouseLeave="rectangle_MouseLeave" />
        <Rectangle Fill="Peru" Margin="192,391,186,37.995" Name="rectangle3" 
                   Stroke="Black" MouseMove="rectangle_MouseMove" 
		MouseLeave="rectangle_MouseLeave" />
        <myToolTip:UserControl1 UserControlTextBlockToolTip="Some texts" 
                                UserControlToolTipTitle="Title" 
                                Visibility="Hidden" 
                                x:Name="customToolTip" />
    </Grid>
</Window>

And these are the methods for showing or hiding our custom ToolTip:

C#
namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void rectangle_MouseLeave(object sender, MouseEventArgs e)
        {
            state = true;
            customToolTip.Visibility = Visibility.Hidden;
        }

        bool state = true;
        Random rand = new Random(DateTime.Now.Millisecond);

        private void rectangle_MouseMove(object sender, MouseEventArgs e)
        {
            if (state)
            {
                customToolTip.Visibility = Visibility.Visible;
                customToolTip.UserControlToolTipTitle = 
			(sender as Rectangle).Name.ToUpperInvariant();
                customToolTip.UserControlTextBlockToolTip = "";
                for (int i = 0; i < rand.Next(1, 30); i++)
                    customToolTip.UserControlTextBlockToolTip += (sender as Rectangle).Name 
                    	+ "\t" + i.ToString() + "\n";
            }
            customToolTip.UserControlToolTipX = Mouse.GetPosition(this).X + 10;
            customToolTip.UserControlToolTipY = Mouse.GetPosition(this).Y + 10;
            state = false;
        }
    }
}

That's all.

History

  • First post: 24th of January, 2009

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Iran (Islamic Republic of) Iran (Islamic Republic of)
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralGood effort Pin
nasq9-Feb-09 10:17
nasq9-Feb-09 10:17 
GeneralRe: Good effort Pin
Mohammad Dayyan9-Feb-09 10:51
Mohammad Dayyan9-Feb-09 10:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.