Tip:
Highlight text to annotate it
X
managing control layout
parts on this video gallery keep our focus on user interface here i wore really gedcom
push
learning how to organize our user a face into manageable
sub units
i'm going to do this by using were called container controls and container controls
are
controls that host other controls
again this is going up to
affects actually number one as i mentioned it's been a lot to create
in organize user interface which'll
of course up allow the user
visually see
how the application should flow in how the date issued photo replication
i've not only that but it's going to help us as programmers
learn how to manage
uh... this user case in the controls within these container controls
in coat it's much easier to manage controls that are
you know and you know if you don't hire section of control it's much easier to hide intersection
than to go in and hide
you know all the specific controls in the same thing company to disable a renewal these
controls and such
so the ripple kazan is video
is many control elbow
boson code and also
to uh... to create a user friendly interface let's jump in the outline here in to go deeper
local recovering
we're gonna start within overview computer-controlled hoops
and uh... really will really focus on here's what just talked about just
talk a little bit about will contain your controls are used for it also go over all
the different container controls in the dot into portal framework
by local reversed in northern because they all have their uses
for different scenarios
and all jump into a demo here now
teacher use
all the different hair controls madonna to portal framework again
uh... they all have their place so that's why when trade all of them
and it in here will take a look at how to work with container controls isn't it
really focus on howdy do things like dynamically had controls in code at runtime
to a container control
also how did
work with what's called the control collection of a container control
how we can uh... create very fishing code by whipping through
all of the controls within a specific container and doing things on the maybe disabling enabling
them
uh... things of that nature
faisal sera puritan or view uh... container controls and just talk a little bit about
what content controls are used for
began mentioned most of our annual alles ist
to group controls in the seventies and help maintain our information flow across
our user case that's
that's important of course we wanna
make the application
and user interfaces is easy as possible to use for users in this is really just the start
of doing so also gives our forms logical and physical boundaries again one of those
visual
uh... assistance
that things are for the user
also child controls inherent para properties unless pacifico sfas italy overridden in this
is the case for
pretty much it you know things in windows in folders
same thing with user interfaces and and container controls
for instance we talked about this in a previous video
the form itself is the host
everything sorting everything hurts the formal specifically overridden
seems container controls we drag of the group box
onto a form
bill which i'll controls are gonna
uh... really inherit some of the
some of the uh... the common properties
between
uh... those to control so
safety happens here with with container controls as happens with the poor
i will serve a control collection as i mentioned here that we can use to access
the child controls australia's there because that is gonna
uh... a great way didn't easy way an inefficient way tereko to access i_d_'s
uh... child controls
and uh... we also have
populist or container controls as a mention here we have the group box
witches out just a of very simple way to group
controls
as a little border around it
and i'll show you a second
uh... but it's also a adjusted agreat
way to do things such as
uh... radio buttons
if you have uh... you know
many many radio buttons that you need to tahoe sana formal provides a great way to group
them together
uh... so in that way but we mutually exclusive within that group box
wheels of the pale control
uh... the panel control is pretty much exact same thing as a group box accepted by default
it doesn't have a
it doesn't have a border on it
uh... another thing is that this is actually a scroll ball control meaning you can scroll
with it
the folding up as a brand new control here in about a two point o_ framework
and it's really nice because it
pretty much manages
the way out of the controls
which is really have to tell the word of break within the control a couple other things on
the shaded demo on this but this is a brenda controlled a lot of people and asking about
because uh... it's new it's a different way of thinking about how to manage and control
uh... layouts
it's politically does most of that work for a laying out the controls and
makes consistent manner and form so once you get the hang of these
controls it's there actually really any i will save you time because now you don't have
to manage
how controls our position on a farm automatically
are you can let the container the folio container do it for us
the table wale ko is very similar to the fold-out power and manages
the controls within it the difference here is is this allows for much more complex layouts
because uh... just says an html table are up
a table you can build inward
or excel anything like that
pretty much the same thing we can build this table then and if we were statically and then
the controls of the place within a year dynamically statically
will automatically flow within the cells
within of course the rows and columns
of the table else will take a good look at it
use this control as well
and the way of the tab controller personal favorites because just a great
all-around control four
managing and creating um... a lot of space in one form if you have a few
if you need to do a lot
in one form
the temp controls a great way to do a 'cause really what you get
you know it's c_e_o_ five tabs on his head control now you really have five forms within
one
so it's just uh... just wonderful control you would like a ritual took a good look at
how to use it
and wheels of the split container control which is a nice
way to create kind of uh...
a moving user interface so
users can size within a form they can size you know break down the middle
split in size
different controls a penny what side of the contents will take a look at how to use
all these container controls in the devil
before we get it i just want to be a
just a quick idea of
of what a couple of these look like your religious if it would here
the group blacks in the technical 'cause they're all over and windows even if you just recruitment
esquire agora properties down here
right at the better see this is a tad control
just to give you an idea
you can see this is
there's a group box right here
uh... read on the first born here and it's just groups these controls together
seemed the star many we can't have
uh... disseminate at here we have
two studies to standard radio buttons selection here
and then we have although privacy so itsy-bitsy just
the group box is probably the most popular container control upwards because it's simple
it's a great easy way
controls are like yours on the notification area where two group boxes one
with uh... just a general high-concept leans in one with
our system icon settings done for the system tray here
and uh... and that's pretty much of such order which one to briefly show here is that the
group blacks
definitely the most common and you also see the tad control
all over too because it is again such a great control now that we can use this tutsis split
apart
our user face on one for men
turned into many user interfaces
all right how about we get familiar with some container controls hereby
bubbling up adele and uh... just generally working with these controls
inside a visual studio two thousand five slots get out of the white board hearing
head on down to start button for programs will open a visual studio here michael too
many system in
player of the integrated development environment here
and more and it's you can see i have a project created here called seventy dash five to six
underscore
zero three controlling
so will work with container controls
and the pressing or do before even getting into these container controls
is that talk about a few common properties and all the container control share
and that we weren't talking about here is
is is stealing
controls on a sizable for and what does that mean well
all container controls be a host
uh... beat the actual form of course the host of all the controls
or container control the host elder controls
on display did this property lead work with your incurred and doctor danielle actually
see that every single control has
the spin current doc property
and what we do here is is is basically
the celeste risk iranian scaling is just when we decide to form out of the controls within
that form respond
they stay where they are
he decides with the form into the scale with the fork so that's what did the two properties
only showing here
if i click on the close button
just to show your we screw it up
with the anchor property
and we have the doc property
these are the two that we're gonna be uh... really most concerned with when it comes to
sizing in scale where forms
and this is a relevant because of course when you're working with container controls that
is what they're going to scale
in doc and anchor to are the actual container controls themselves
all right so we have
a form here right and uh... just to show you how the other group box controllers again
is the simplest the of the container controls and it's really meant for just grouping
controls that were copied rather in this case
unit xbox search button brady's go together because when you click on search button its
gonna work on data
with that's within this text box control
so that's that this is a great ten instance yuri twenties a group box control to give
the visual representation that haiti's controls
work together
uh... interested to give you an idea here it is a dream docking by default all of the
controls
are incurred
top left in what that means
is that they will always maintain the same distance
from in this case the top
and left borders of the form
sophie resize this form right now
close button is gonna stay sickly where it is
relative to the top in the lab
estimate that
seem to group box control
seen without that
text box control in the search button the difference here is these
v since they are inside of a container control
are going to maintain that
uh... relation
to the group box control rather than for mike the group box and of course but
so i have this not set up for a drink
and uh... indocin quite yet
uh... the soldiers default itself i i run a now
which a mature here in chile a that uh... this is in the scale we want our trade zekryan
how we want to do it now wanting or mission here we put the run button if you have multiple
forms in your project
it is one sure that the form that you're you're thinking he's gonna fire up is actually gonna
start when he couldn't start the project here today that you can just double click on the
my project
uh... tab urno they should say within our solution and on the application tab just insure
that your startup farms the for many like since we have three forms in here
going to make sure that we have the scaling form eyes are startup foreman
that cuts will save that will close out of our properties here
in a slender slipped a run button
and for tour dealing with a hankering just uh... to a clarify that then you can see here
if i'd size this you can see the control they're staying exactly where they put me because
that's the default
they are maintaining the distance between
in this case top and left edge of the four
so if we wanna
to to make that uh...
you know a little bit
a more intuitive here would say we were close button always to see down here in the lower
right hand corner of the forms only
size of the user sides it that close button will stay down there
and also with the group box control the maintenance distance all left the top
emirates will also size with the dynamically
in another way that we also have to work with our controls within here
let's keep the civil sterols work at the close button
difficult to the anchor property
you can see if we drop this down the city was little visual of
currently were docked there were anchored to any conceded
by default top left
we really want this to be
right bottom
so we're gonna gladden choose the right and the bottom of the organ on shoes the top and
a lot so now are close button
hoops are but that is
aclu buttons anchored
on the lowering one corner
are for
now become the group box controls to the same thing let's go up to date for nearly two hundred
years his dad it to the right
snark group box
should hang in there on the right
the sea level so far we're going to run button here
and it's going to resizer for memory that so far so good are closed
button is staying great down there on the lower right hand side in group boxes doing
we wanted to as well
difference here
this of course we need to work with our search
button and our tech stocks intro because
we will also want these
to work in houston with the group by exercise properly
pills work with the controls within our group box here
mostaert search but we will always with the search button to maintain this distance within
the group box control
on the right hand side to a twenty-two the rent expects herself to put their search button
and scroll trying for property
organist gannett flip this around here and make sure its
top instead of left upper top what sore on top rains atop what that means always been
the side of the group uk central
and protect spots
we actually always wanted to maintain assistance from the left we also want to maintain its
distance from the search contro
so we really need to hear his duke they left and right
right and so now we do
when we have to run but in here
and so is it
still size this way buddy that you can see
at the text boxes maintain position from the search button in the search buttons maintains
position on the right hand side an important in a position within the group are central
to sell
now if i could down however you can see it's not narrowly sizing at this point we're just
scaling or sizing you know horizontally niver eclipse
uh... we yes we can do that too and this is all done to the anchor property here seaweed
in order to have in the first thing we need to do is massive air container introvert we
need to take our group box control and ensure that it's also anchored to the bottom of the
four saddam maintain its position around the entire form essentially uh... and the tech
stocks we can do the same thing
might xbox to also maintenance position
top to bottom
and i search button here since that's always sdn array were religious point keep it on
the bottom there
at first you think this is a lot of work but there's actually something with the tech stocks
that we need to do you can see here uploaded worker worked perfect lou that whom and that's
actually collects at the property prior to nuns at the proper say what that is actually
property and hear uh... called multi-line see this if it's not a multi-line text box
it won't do that industry again here like turn it off
so this is a last single line tech stocks no matter what you do with the single in tech
stocks it's gonna stay single line
uh... if you want it to you that sizing in such the need to make it a multi-line techspot
so will back up component xbox
that the multi-line property in terms of true knowledge can be
multiple wants has a property suggests oakley hit run into that again
now everything is sizing dynamically with the for so that's all done via the anchor
property the anchors really can where you where you're going to determine your sizing
in your scaling its it's a very any property if miller with his if
the more you understand about lingering and just get the hang of it all you have some
really nice tenanted farms and you know people other when they can make forms of size they
really want to read in them be locked into a specific size now that the docking control
i'm actually had just one mentioned herein shelia it's pretty simple it's really just
uh... a specific border of the control is going to be tied tulip to the actual container
itself
so in this case look at the close button here for dropped ana dot property which is the
bottom see that the docs the entire bottom of course intellectually scale and size dynamically
based on
so it's kind of a nice property you can work in hand with anchoring abut the really good
where the uh... a real good use for this comes into play is when we get into using the split
container
um... yeah we'll talk about a little bit of a