Tutorial WPF | Creating And Using An User Control (C#) | VS 2012

Here we focus on creating and using User Control in WPF. WPF User control easy way to create and use in it the entire application.

---

Closed Caption:

hello ladies and gentlemen welcome to
WPF tutorial video by why this tutorial
now so today we'll be talking about a
really important aspect of WPF the
development environment and that aspect
is about having the customization to
create your very own control now this
aspect is called user controls in WPF
user controls in WPF is just an
extension of customization of a
particular aspect of design of
functionality
now what do I mean by that really
complicated jective field sorry noun
field statement
well the just of it are the basic thing
that you need to know about user
controls is that user controls give the
option to the developer to have his own
set of controls which are customizable
according to the needs of his
application and that is a fantastic
thing to be to be to avail from this
particular aspect of coding so let's get
started by first introducing you to the
brand new visual studio 2012 environment
yes we have upgraded from 2010 going up
to twenty twelve now and it is really
really a programmer's delight I have to
say I was never a huge fan of the 2010
and I'm and I thought that they could go
really quite some notches up and they
have them that the design aspect and the
coding aspect is really smooth now you
have the intelligence even for jquery
javascript and all those things even
complicated methods can be done really
easily so the environment really looks
cool has a windows 8 kind of feel to it
and it really has these beautiful small
little transitions and fade ins and fade
out which I really like and it feels
like a premium software and it is it is
a premium so
so number one welcome to 2012 visual
studio so i have created this very basic
WPF demo project which is just a basic
demo the demo project it has nothing in
it and I'll just one that particular
project and you see a blank main window
there's nothing to it so we'll be adding
a usercontrol to this particular window
so user controls can contain anything
that's right it can have any any
controls in it and it can have its own
functionality so why do we need a
usercontrol and why not just create a
forum
well the idea of it is really simple
whenever you have certain functionality
that you need to perform throughout the
application but you need to do it in a
certain way it with some certain
functionalities embedded into that
particular functionality that is when we
use user controls user controls are
generally used when you have some
customized context menus or a menu of
your own dynamic generation of images
and all those beautiful beautiful things
that we do in application development as
we go forward you more and more
understand the importance of this
particular aspect of WPF so after
creating your very basic project you'll
see in my solution Explorer now that i
have a main window
xml and rest of it is just configuration
so already to do is click on my project
go to add new item and then I'll go to
WPF and then you'll see this and you
have your user control WPF and you just
change this name to i'm just going to
write some
you see demo so usercontrol demo is the
name of my file click on ADD and you get
this window is kind of window so there's
nothing to be really scared about
because this is nothing new it is the
same thing as a particular window would
have so you have your introduction tag
which is the usercontrol tag and it has
its own declarations set of declarations
and it has its own height and width now
let's just go in and change that
particular height and weight to say
let's say let's have the height of
hundred and the bit of 200 beautiful so
as you'll see I just change the height
of my control along with my wit now I
have a great over your so let's put in
some elements into this particular grid
let's say I want to add a label i'm just
going to label content equals say test
of my usercontrol fantastic I'm just
close it first i'll give it a name it's
very important that you named your
competence even though it's not
mandatory
you should always all these name your
competence so let's give it a name CL BL
test
fantastic i'm not that creative as I've
already spoken to you about it in my
previous videos okay so we have added
the label tag into our user control and
now you can see that the test of my
usercontrol is popping up in our
particular preview over you
so now I need this particular control to
be used throughout my application but i
wanted to be rendered as and when I
require two so what I'm going to do is
I'm going to go to my solution Explorer
i'm going to go to my main window about
XML now this is my entry . this is my
starting point for my application and
i'm going to add a button over here it's
gonna be really simple so i'll just add
a button and give it a name
let's ABT and show
and then I'm going to give it a click
event render that particular click event
auto-generated and then i'm going to
show content equals shop fantastic now
the entire page is the button and as I
have shown in my previous videos it's
because of my grids I'm gonna go grid .
row definitions inside that i am going
to say grid so we roll definition i'm
going to give it a height of say forty
fantastic
now i'm going to give this particular
button the grid to Arturo equals 0
fantastic so I have my grid number one
which has one drove currently and it has
a button now let's add another road but
let's not give this a height
let's keep it auto which is by default
so if you don't write anything height it
will be set to auto now I'm going to add
a stack panel and i'm going to give it a
name
let's say STK test
cool i'm going to add it in my second
goal instead of my first fantastic and
I'm not going to add anything inside my
back panel so the stackpanel is nothing
but an orientation container what it
does is it will take competence which
are inside this particular panel and
stack them up
it's as simple as that so I'm going to
just set the orientation it's going to
be vertical fantastic now now we're
going to work on how do we put our user
control into this particular stack when
i click the show button so let's come
onto the event that we created the bt
and show underscore click on the
call won this event is mapped with my
button which is beaten show and unclick
it will be fired
so all i have to do i'm going to show
you the most easiest way to add the user
controls i'm going to you see demo which
is the name of the class of my
usercontrol and i'm going to create an
object you see obj equal to Nu you see
demo what this will do is it will create
this particular object of you see demo
and it will keep it in memory so I'm
just going to take it from memory and
I'm going to show it to my users of my
application by just adding it into the
stacks i'm going to stack test .
children . Adam and i'm going to add my
UI elements so you'll see that the add
functionality for the stack has a UI
element as the parameter so the
parameter is going to be to see all the
j fantastic close it so what is going to
happen is when i run this particular
Ming window the BTN show button when
clicked will create at this point will
create my usercontrol in memory and this
particular stackpanel will be the one
who's going to display it on to my forum
so let's run the program you see the
show button and i click it and I get my
test of my usercontrol so user controls
are that simple to create and work with
there is another method to create your
user control and to implement it into
your application but that one is a
little more complicated so i'll be
getting it into a brand-new video which
is going to be the next pot but for this
particular method you have seen that it
is damn simple so all you need is a main
window
you need some functionality
on that you need a certain user control
to be displayed you can add a button you
can have a listview whatever you want or
you can have it even have a Windows
Event like window open minimize maximize
whatever on particular event firing all
you need to do is create the object of
your user control such as this and then
loaded into your window you can do it in
as many ways as you like and depending
on their functionality you can get keep
it as complex as you like so that was a
quick demo about user controls and how
to implement them into your main window
so if you have any doubts anything that
you like about it like about the video
did not like about the video store open
in general just leave a comment and if
you did like my videos please do share
it and please leave alike so thank you
for watching and more videos are coming
soon have a good