Hello Dear Students, Welcome to the Lecture 8 of Introduction to Programming with C-Sharp
Course.
So I am going to start a new project as usual.
So this week we are going to see checkboxes, radio buttons, list boxes, file stream, using
list reversal, panels and more.
Ok, so let's create a new project as usual.
Ok, wpf.net core.
Ok and user defined classes we have made entrance to this already.
So these things will start to make sense to you more and more with each lesson as we progress.
You will start to understand them better in details and however as I said previously please
write the code yourself at home ok not just copy paste from my uploaded code that will
help you tremendously.
So ok I will start with showing you how to use panels.
So to use panels I will use I will use stackpanel ok this is the wpf control so I have just
dragged it from here to here ok it is added like this however currently it doesn't have
any width or height therefore I have to change it myself so when I click this I think it
is currently selected and it is taking the full space.
Ok so inside stackpanel it has added another panel which I don't need right now.
So let's check its properties I think there is width let's say 200px and height let's
say 200px again ok so you see the panel is now visible like this I have added width and
height I am going to move it to like this ok so what does stackpanel do let's check
that ok stackpanel is a layout panel that arranges
child elements into a single line that can be oriented horizontally or vertically.
By default, stackpanel stacks items vertically from top to bottom in the order they are declared.
You can set the orientation property to horizontal to stack items from left to right.
Stackpanel defines border properties that let you draw a border around the stack panel
without using an additional border element.
The properties are stackpanel, border brush, stackpanel, border thickness, stackpanel,
corner radius, and stackpanel padding.
Ok so as you can see it is more about rendering and position of the elements.
So today we are going to see the radio buttons and checkboxes as well.
So radio buttons can be used as a group ok so I am going to add multiple radio buttons
and let them only one of them to be chosen at a time so I am adding them like this as
you can see so you see they are getting vertically aligned from top to bottom.
I can change their features as well ok so let's say you have multiple options and you
want only one of them to be chosen by the user to do that we can achieve that like this
let's say our choices can be authority level ok so I am going to make them such as how
to make it ok I am going to make them as Ruby user ok radio button user and let's say give
them student I will make it as guest guest student let's make this as lecturer and let's
make this as admin ok so let's run the application and see the behavior of them by default I
should be able to select only one of them yes it is like that as you can see I am able
to select only one of them because now these are as a group ok I am going to get some more
let's say properties to this stack panel what can we do we can I think add UC orientation
make them like this ok and maybe we can add some padding I don't know if there is padding
or not ok there is background as well let's add a background from here for example ok
like this or it can be gradient as well ok and let's change opacity is fine opacity max
ok this is fine let's change the font ok there is automation transformation and I wonder
if there is a padding option ok border padding ok this is interesting let's try this feature
so padding should let us have ok it didn't work as I wanted so what I want to achieve
is having padding of elements inside this is not working as expected ok so there is
margin you want and ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok ok
oh I see this makes sense let's try this so what I am going to add is I am going to
move to the xml window like this I am adding stack panel resources and type will be radio
button and this will give me a margin of I think x axis I will make it x and y axis let's
make it everywhere like this ok let's try this and let's return to design ok now you
see these elements are not as before they have now spaced out evenly with 10 pixels
we have achieved it with adding margin to do these elements each of them but not by
one we have used targets type with x type equal to radio button I didn't know this
previously I just did it from checking the internet this is how we do the things ok so
you see now they are having 10 margin ok it is like as we want ok so now I can add also
a button inside this however it would also get to the very top very bottom like this
a button let's make this a bit bigger so you see this is extremely useful for styling and
grouping our objects ok and I am going to set this button as let's give it a name and
some features ok and let's say go selected ok and when we run it currently no option
is being selected as you can see I can select one of them no this selection is possible
so let's add a click event to this button ok
so then I am going to switch and switch will not work I will check something
ok content ok it seems like we can put the same name to all of them ok there is also
group name ok so to be able to see which one of them
selected we need to add them group name ok let's first make them with the regular way
so this is not the appropriate way but I will just show you how to make it
this is a method that takes no parameters and it will return a string I am going to
make it like this if review guest is selected it is enabled not enabled it is checked ok
it is checked is the correct parameters the message will be equal to
ok it seems like we have to explicitly let it no because this is both get and sedable
that means you can either get or sed therefore we have to explicitly tell the compiler that
it is get by get what I mean currently with this equality it uses get method to check
the status of the is check it true or not let's make this student selected and let's
make
ok what if nothing is selected I can check that by two methodology here I can use if
string is null or empty method and showMessage equal to true which means that if this string
is empty or null this if will work alternatively I can use this alternatively if the length
of showMessage is smaller than one so the length gets the number of characters in the
current string which is zero characters at the moment and if none of the radio buttons
is selected these will work however there is a crucial difference let's say if this
is null ok if this is null this will throw you an error if the string is null this below
method will throw an unhandled error let me show you ah it wants me to return message
I will show each case so you will understand better so currently my string is null ok and
I didn't select any of the options so I click this and we haven't called this by the way
you have to call it like this I'm restarting the application so this is the method call
it doesn't take any parameters it will return a string however I don't have to assign
return value to anything ok ok so I am currently doing a debug so none of the radio buttons
is selected so you see this is check it false is check it false is check it false therefore
the string is currently null and if string is null or empty which is true you see it
gets into the inside of if and here now it will throw me an error it says trap an exception
of type system null reference exception so when I continue object reference not to set
an instance of object so strings are object types however it is they are immutable therefore
since this is null I am not able to use length method because it is null so I can use this
method or I can add a null check which is a feature of newer generation c-sharp so
this will ensure that this question mark will ensure that the right path of the length is
only check it if this object is not null I will just copy paste to not confuse you so
I am going to make this a comment say
this length is actually a method that returns or let's say rather than method it is a property
of a string that returns the length of the string you see it's it says that the number
of characters in the current string returns so this will not throw an error let's try
it this will not get inside of the if though okay so this will not work because our string
is currently null therefore it will not get inside of if you see it doesn't get inside
of it so if string is null this will not execute us let's show it like
and here empty so this question mark is called as let me find it for you okay it is called
as let's check the okay this is an app operator it is a null coalescing operators or something
like that yeah there is also this one oh I have shown you this I think so let's see the
English of this page and these are operators I think there is not forgiving operator oh
this is a c-sharp 8 features oh interesting I have never used this one
this is not what we want maybe this point is related oh no
it is called as no conditional operator okay
yes so it is called as member operate access operators and expressions so you see it is
showing that dot to access nested namespace within a nest a namespace that is how we call
methods or properties index operator like this indexer access other usages of index
okay no conditional operator here so this is called as no conditional operator
like this okay so it says that available in c-sharp 6 and later a null conditional operator
applies a member access or element access operation to its operand only if that operand
evaluates to non-null otherwise it returns null that is if it evaluates to null the result
of a x or a x is null if it evaluates to non-null the result of a x or a x is the same as the
result of a x or a x respectively so this is the null check and it prevents null reference
exception like we had have in our example okay so if none of the radio buttons is check
it I will check one of the radio buttons randomly and recall this method okay so let's do that
inside here and how am I going to do that is I'm going to edit here okay or let's edit
to the bottom and how am I going to do that is so easily let me show you I am going to
generate a list of radio buttons like this new list and here I will assign my buttons
to this list like this and so this will only get this list will only hold their references
addresses therefore whatever the changes I make the elements of this list will affect
these because these are the elements of this list is actually these objects okay and let's
pick a random number generator next it will be minimum you see there are overloading so
it will be minimum zero and the maximum value will be equal to number of elements okay so
this will generate numbers between minimum and less than max value you see it will be
greater or equal to mean value so it can be zero and it will be less than max value so
it won't be equal to number of four because this list have four elements and therefore
the maximum number it will return will be equal to three you know okay and I will make
the index of this is check it true and I will call this method again okay so I am going
to remove this message boxes like this okay and this will never be executed anyway currently
it will return show message so oh but by the way with this way we won't be seeing
the first no selected okay I'm going to first remove this so we can test it out okay let's
run the application if you don't understand what is happening always put a breakpoint
and execute the application step by step which is I am going to do right now to show you
so at first I didn't select any radio buttons and I'm just clicking the show selected option
it is starting from here so nothing none of them is selected and I generate a list currently
my list holds references to these radio buttons as you can see so I can access these radio
buttons with an index it is what it does I could use their name however I am using their
references inside the list therefore it is easier for me to modify them okay so if it
is null or empty it is null or empty currently and it will return the message so the message
box will show me no radio button is selected is null or empty method then what I am going
to do is
oh I can use another methodology right now since I have made I have added them to a list
I can use like this select let's say or yeah we can use select and I will use a link you
here this is a link you expression which is shown here lambda expression you can read
about lambda more here okay let's let's read it actually a lambda expression is an
expression of any of the following two forms let me add to this to our source code let's
read it expression lambda that has an expression as its body statement lambda that has a statement
block as its body currently we are using expression lambda use the lambda declaration operator
equals greater than to separate the lambdas parameter list from its body to create a lambda
expression you specify input parameters if any on the left side of the lambda operator
and an expression or a statement block on the other side any lambda expression can be
converted to a delegate type the delegate type to which a lambda expression can be converted
as defined by the types of its parameters and return value if a lambda expression doesn't
return a value it can be converted to one of the action delegate types otherwise it
can be converted to one of the funk delegate types for example a lambda expression that
has two parameters and returns no value can be converted to an action less than t1 t2
greater than delegate a lambda expression that has one parameter and returns a value
can be converted to a funk less than t t result greater than delegate in the following example
the lambda expression x equals greater than x asterisk x which specifies a parameter that's
named x and returns the value of x squared is assigned to a variable of a delegate type
okay you will understand lambda expressions as we use them so here what i'm going to
do is i will select check boxes where i'm using where pr is checkered equal to true
so this means that by pr you can give any name to it it is parameter so in this case
it is radio button this means that on the right side of the lambda expression it will
check each one of them okay and if they are true i will get them to a array like this
and i will get the length of the array and if it is equal to zero that means that none
of the radio buttons is selected this is this single line of code is equal to actually this
okay i will show you the other way as well equal to zero and what i'm going to do is
and so this you see this is how many lines it is six lines of code is equal to this actually
there is also this one so it is seven lines of code so
which lines here so all of this is written inside single line of code here it is same
they are same however this is more efficient way to do it and by the way if this is true
now it will enter inside this if statement as well by the way i will add some comment
here so you will understand one two okay three four five six and seven okay so these seven
lines of code is written in a single line of code okay so i have put a break point here
i'm going to remove this and i'm going to click the show so you see it is zero already
but it will be executed here as well so if if it is now inside if and i will generate
a random generator i will generate a random number here and my random number is one therefore
which one of the radio button will be modified the second which is student i believe okay
no radio button selected is null or empty and now student is selected randomly and when
i click you see student account is selected now i can select one of them as i want and
i can show that okay i can also add a clear selection button like this and to do that
what i'm going to do is i will take this list at an upper level like here so this list will
be available to all elements inside this class however it says a field initializer cannot
refresh non-static fields therefore what i need to do is i need to call it after the
constructors so this is and
so you see it says initialize component and then i am going to do my list initialization
that way now i can access this list inside every one of the methods or classes written
in this scope in the scope of this class okay so i can now add another button to clear the
selection by the way i am going to you see this is added randomly i'm going to remove
them and let's remove this as well uh what i'm going to add is let's type x type button
maybe can we add like this um i don't know if this will work or not type x type
maybe like this it says
okay someone has already asked the question
so let's apply this methodology and x type button this case and base it on says common
style let's make let's give it a name x key common style okay now it should work okay
and now this will be by tn clear selection and
let's create a new event
you
i see but it won't allow me to
do this because they are different uh type therefore i have to copy and paste this like
button okay and now it should work and let's try it
okay it says you have already key so it comes to key r and key b okay we didn't use these
keys by the way but they can stay okay let's run the application
okay button is running and oh i see my 10 this header property is gone right now and
why is that mainly because of key let's remove the key
okay now it works and now i have to make my the stack panel bigger i will also change
the style of these buttons from here let me show you and they will be applied to also
the property margin and let's add another setter property so there's property it should
automatically have font size okay value is let's say 15 i could also make this uh buy
one why but i will show you by the way you see you can close the um setter like this
or like this both is fine so this will be applied to all radio buttons and the value
uh font size will be 15 okay as you can see now they are bigger however i could also use
the uh set it like this from here when i click here okay my computer is a bit slow right
now okay font size equal to 20 i could also set each one of these properties like this
however it would be not as efficient as like this modifying all of them so this should
overwrite the previous uh value i think okay so you see now admin has bigger uh font size
the others are still fine and let's set the font size of the button as well i will make
the buttons as 16 let's run it yes now they're bigger okay let's make the clear selection
so with clear selection what we are going to do is we will do for each inside our list
which is now available to this method call as well because it is defined here therefore
it will be available to all methods and classes defined inside this scope okay so it is about
scope level so if they are at the same scope level uh let's call this is the scope level
zero zero and scope level one one and so since scope level one it will be available to all
scope level one this is also scope level one and this is also scope level one scope level
one and so you see now this is being scope level two why because it is inside scope level
one therefore it can access to all lower scope level elements which are scope level one methods
or scope level one um uh properties and attributes fields whatever there are so it is about your
scope level however um if there being another scope level here it becomes now a local variable
what i mean is uh something i will define here
so this will be available to only within this scope you see it is a local variable because
it is defined inside a method however this is defined inside a class therefore it is
field okay so these are differences so because this is defined inside this scope it can be
used uh all the below scopes uh like here let's say i can define a class here class
my term equal to like this so i can define another scope here okay and i can
okay it has broken my
my scope okay it appears that we are not able to define a class inside constructor i think
can i define it here no so classes can be defined only inside other classes it appears
that however i can define a class here and now inside this this is scope level one
i can define another class okay not get confused i'm going to delete this you will understand
it as you use and so this will be radio button and is check it equal to false this is same
as this for each is same as writing each one of the radio buttons is check it equal false
okay so but if there are 100 radio buttons you have to write every one of their names
which is uh inefficient way of doing uh radio buttons okay so
this is same as this one however you see this is very dynamic you should always try to dynamically
code your program okay uh which is much more efficient and i can increase the number of
radio buttons here as many as i want and uh so i wouldn't be need to write each one of
their names if i use the list method okay so let's run the application and see uh if
it is working or not okay clear selection now clear it and now randomly one of them
is selected clear it okay clear it you see guest one is selected clear it this one this
one you see admin selected and such okay so uh an alternative way would be for increasing
our dynamic uh naming we can add a group name to radio buttons okay so i will tell them
as uh user levels okay like this so i will put each one of them as a group name and okay
now instead of accessing them by name by name now i can use uh their group name how can
i do that how can i do that uh so proper way message this time i will uh eliminate all
the radio buttons which are part of a group name okay
okay this is the lame way as you can see okay here this is the way find this chandance
so what is our window name main window and find this chandance okay it doesn't have find
this chandance let's use this does it have um
okay it was like this maybe let's try this way
okay this doesn't work controls doesn't exist in the vpf so it is
now i need to find vpf version okay this is the senders methods
you remember these blocks i will try this
okay it looks really advanced i think
okay this is the way it is
so my container oh it doesn't contain containers
um yeah okay this looks pretty uh advanced
therefore uh it looks like it is hard to achieve in
vpf okay it looks like we have to use an extension otherwise it is not possible in vpf therefore
i am going to add an extension
so i am not sure if this will work or not
let's use
okay to be able to use this i am going to add
okay now it works and
we will look for radiobutton okay and here uh if reb dot okay there is group name okay
nice now it works uh equal to um so what group name we have given our radio buttons here
this one i am going to generate another radiobutton list
buttons list let's name it like this
now i have generated my um list i will i'm going to put it here so instead of uh defining
their names by one by one i can use this method and by the way to do that let's compose another
radiobutton list this time i will uh put them like this without using a stack panel and
you will see the difference you see now that now they are not getting
automatically positioned okay and now all of them will be ungrouped therefore they will
be used in that particular uh score what i mean is let me show one moment let's return
your message for now
okay you see now they are not grouped if i want to group these ones uh like these two
is as a group and these two as a group i have to give them a group name and or put them
inside different uh uh stack panel so i will give them a group name by the way i can i
can i should also give this a value uh as a value what was the uh name of the value
what was the name of the value what was the name of the value what was the name of the
value what was the name of the value okay data context i think it is this one or something
like this data context data context and content so data context is a property and let's make
the guests i will use the data context for these new ones so these new ones uh let's
make them like um let's give them some random uh scores okay so so let's make this one score
as 150 so the content of this will be dd okay and give it a group name let's make scores
of letters and let's copy and paste this uh like this world name content aa data context
will be 100 and let's give these two different something different so let's say letters of
sports sports group name so content value 50 data context will be dd this time and okay
this looks good aa 100 let's uh run the application now i could be able to select each of each
one of the elements i mean one element inside at each group so i can select use okay i can
select 100 and i can select dd and i can select lecture because now all of these radio buttons
belong to different groups okay so radio button is about selecting single option from a group
of options it is what is uh it is what is used for okay now i am going to dynamically
add them to the list uh i haven't given them uh custom names uh to access them manually
they only have uh group names okay one moment okay so let's continue okay and let's uh name
them as uh scores of letters and letters of scores
uh letters and
groups so so um scores of letters here and letters of scores here and group names are
as scores of letters and you see i didn't give them any name to access the specific
radio button therefore i can generate hundreds of different radio buttons and i can add all
of them at once to my list like this and i will also read their um values so now that
i have um their lists generated i can show as uh like this in the soft scopes
button and go to true
and plus over n over n plus beta context let's name it as the
and i am going to use this as at range and with at range i will add the other one as
well so with one for each loop now i will um i will make this as uh to oh it doesn't
need to do anything perhaps
leave uh this radio button okay i will show another interesting
thing at range okay
it doesn't work this is really interesting maybe we should make it like this
okay oh no it doesn't work okay so i have to write it like this so i have
composed a new list from the existing lists and edit them together so with only single
for each now i will loop all radio buttons
okay let's run the application and we haven't added a call for this one so this method has
zero references i will add a new button to call this
so the basic idea of radio buttons are grouping and letting user to select only one of the
possible options okay
go selected button radio buttons
on click
okay i can call the method like this because this method will return string therefore here
there will be a string okay so the result of this method call will be uh passed to the
message box show method okay so i can use it like this as well
okay when i click okay it says it is null uh it appears that our um method didn't work
why let's find it out so we had a problem here apparently so okay okay the problem
is that our find visual children method returns nothing it is null it didn't enter inside
this for each loop so when i click step into you will see that there is uh it will find
no object okay so our iteration method didn't work okay this object is our main window i
can visualize it and let's see if we can find the children here i'm trying to find if there
is somewhere available the children okay it is not null however can't get the children
okay visual tree helper why visual tree helper is not working because visual tree helper
is a method of windows media however we are using vpf okay so this looks a better methodology
and i will replace these methods say spider child name
hmm this is interesting maybe we can use this rather than using uh x name let me check
this i wonder if this will work radio button find name yeah it looks like working maybe
name group name
okay
good one but ensure control is loaded otherwise okay so it seems like we had to have control
to be loaded therefore okay it's it appears that our call order is incorrect okay so after
public window is executed we have to call it i think yes still error so let's call it
inside here this should still initialize it however it would initialize it every time
when we click so we will add a solution for it as well but i have to be sure that it works
okay now it it did find the radio button however now okay okay now it works okay okay it appears
that user control visible changed oh this is nice thing yeah but it is really complex
for you therefore i will um make it like this if uh score letters equal to null okay so
this will be only entered once as many without depending on the how many times we click the
button it will initialize the list like this and it is like this and then okay so when
i click the show button there is a better way too but it is it becomes even more complex
and harder to understand they are about events handling i am not going to show that right
now so when i click this button it will check that this list is new or not since it is new
at the beginning it is not initialized it will enter inside this if scope it will initialize
the list as empty list then it will iterate through to all radio buttons and add them
to the list if they are their group name is these ones you see the first iterated radio
button is rbs user levels which is this group we have defined it here so you see it is starting
from here and continuing and it will add all of them to the list so you see it did print
empty because none of them is chosen when i click again now this if will not be entered
because it is not anymore null it is initialized and you see now it will continue as expected
and let's delete this breakpoint and i will select 100 so it should show me okay the content
of the selected button is 100 yes and the value of the selected radio button is aa and
the other one is null so i will select this one okay and it will show the content of the
selected button aa the value of the radio button is 100 okay to remove the confusion
let's modify the program a bit more so let's make this as cc and content 60 and let's make
this bb and content 70 and if message is null we will not we will display another message
on the message box let me show you let's check it through okay so here we are showing extra
time so i'm going to remove this like this okay and okay so if the message is null i
will set it at default value so let's say okay now it should work better okay when i
click it will say no radio button is selected when i select 70 it will tell me that the
content of the selected button is 70 the value of the selected button radio button is bb
and i'm going to select this one it will tell me that the content of the selected button
is dd the value of the selected audio button is 50 and it should iterate both of them though
interesting oh it only shows only the one of them why because only one message is returned
back therefore what i need to do is plus equal and at the end i am going to add some new
lines like this okay let's run it again okay i click it it says no radio button is selected
i only select this it says no radio button is selected the content of the selected button
is 70 when i select it like this it shows like this so it's you see it becomes um it
is getting becoming confusing so i am going to return a list instead of um string and
i will change this to list it will be empty and this time we will add to the add message
to the list like this and if list is empty zero we will add a message to the list and
return as the messages okay and now uh you see this message box will not work anymore
what we are going to do is this will return a list this time let's run it
okay now it should work as expected properly i'm clicking no radio button selected clicking
the content of the selected button is 70 and okay one two you see now it is all working
and the good thing is i can add many other radio buttons okay like this let me show you
so let's copy and paste them okay i have copied and pasted it i have copied and pasted it
i have copied and pasted it and i don't need to change anything okay
i can copy and paste as many as buttons i want this okay and i only need to modify the
related values in the xml code here so give them whatever the value i want uh i'm going
to do it like 99 95 okay a a1 a a2 and 93 a a3 and let's give them 21 71 77 and 81 and
85 you see now it can be done in a dynamic way therefore it is working much better however
since i am not using any back panel i have to set the position myself so you see now
i can make it like that it is working and i didn't have to change any of the uh background
code because i have made them dynamically um to get assigned uh to get used therefore
it is working without a changing a code at the background i think now you get the idea
of radio buttons and stack panels okay and so the lesson is getting more um i will uh
show you uh the check boxes so with radio buttons we uh we are letting uh user to select
only single option out of multiple options okay uh what if if we want to let users to
select uh more than one option at a time what if if we want that you see this is a bad design
right now what i am doing is a bad user interface design but i'm just doing it for to show you
right now so with check boxes we can let users to check multiple uh options okay okay and
okay i have added three check boxes and we can give them uh data context so the first
one will be let's say 50 uh or we can um we can write them as lecture names maybe lecture
costs 250 and let's say content will be object oriented programming i'm going to remove this
okay and what was the code of the introduction to programming okay and let's copy and paste
this let's make this as and and let's add another one i say
now we can let users or student to pick uh the lessons um he is getting uh okay uh since
uh they are lesson they can select multiple by the way i am going to add a stack panel
uh to uh make them uh better so let's modify this with 100 bits
okay next multiple design okay now the stack panel is uh visible for me to modify
i'm going to modify it like this and i'm going to take these objects into the stack panel
how am i going to do that i'm going to do it like this and let's get these check boxes
inside the stack panel and let's see the design okay they are not visible right now
and
they are not visible because
our stack panel doesn't have any width or height let's make 400 feet and 200 heads
uh as pixels and let's see
okay interesting
you
okay
i'm looking for the properties window ah it's here okay from here uh i can select the somewhere
here i can't find right now we were able to select um the object directly but where was it
so
so
containers
not this one either it must be somewhere here but i can't find it
i should be able to pick the object i want
okay
okay the stack panel is here maybe we need to set the px that is why it is not working
okay
yes okay now the stack panel is here however the objects are not visible why
why it is because probably and the margin of the objects let's delete the margin of the objects
and yes when i have removed the margin now they are oriented automatically
uh oriented inside the stack panel okay now it is better and let's run the application
because margin is done within the parent element okay now you see i can select multiple of them
as i want and let's add a button to display which option is are selected and their values
okay to do that i will simply copy and paste the button
from here to here uh btn um
uh checkboxes
okay
let's compose a new event for this one
uh okay it is created here so this time i will just iterate through the checkboxes
instead of um writing them
as here i can also turn this into a method call
i will just copy paste for now
okay and this time it will make checkbox
uh checkboxes and
per checkbox and let's make it like this if is checkered equal to true
okay and let's talk show
content and
um
so you see i can add as many as checkboxes i want
however this will iterate through to all checkboxes inside um this uh
uh main window so if i add checkboxes here as well it will iterate through them as well
because i didn't group them i can group them uh if i want to like radio buttons
so let's just show you see nothing and i click this it says checkbox content software engine
checkbox value and if i check this as well it will tell me that i have checkered two boxes
and if i make it like this it will show me all three checkboxes i can also add
group name to them to have multiple checkbox groups let me show you
uh oh there is no group name so what else that is
uh maybe we can use uh the parent name like
first group and i can utilize this to group them
okay parent name of
let's name it as
as panel and okay
i still can't i can't value
maybe i can use it like this that in that time
uh stack what was the name you have given
yeah like this
yeah so with this methodology i can um group my checkboxes and make it iterate only this
checkbox group what i mean is let's say if i copy and paste this stack panel and have another one
second group and i will add different namings like this like this
and like this
and let's make the margin of this to different something
okay it said we have invalid markup
what is the invalid markup here
i hit this one i'm going to remove this okay you can't have same unique name
twice okay you see now they are shown like okay so let's make this a little bit smaller
okay and let's make it like this okay now the other checkboxes shouldn't be
displayed even though i iterate all of the checkboxes because they're they are inside
different group okay this works yeah you see the other ones are not displayed
right by the way my button was not visible i need to i can fix it with let me show
i'm going to remove this a little bit more and expand it like this okay so this will only get
the children inside this group okay the other ones will not be iterated because i am only getting
certain children of certain elements i will remove that restriction i will show you how it will work
without that restriction so now it works like this and i remove them and like this you see
this you see nothing happens however if i provide uh it's like this by the way this means uh main
window so you can use it as uh the object of main window how was it
it
yeah you have to use this word okay
i like to write yeah you can also call it like this for this is equal to
um no you have to use these keywords otherwise it doesn't sound okay anyway i have removed
the parent restriction therefore now it will work for all of the checkboxes okay
so how you design how you code your software totally up to you now you see it is working
and it is fully dynamic as before now it will show all of the checkboxes
so it is totally up to you uh let's limit this to group let's say second group for example i have
restricted to second group
second group
and now it will show the second group however first group will not be displayed okay
so it is the same logic once you get the logic the idea uh you can do it as you want
as you wish okay so we have some radio buttons checkboxes and let's show list box and add a
color it item to a list box i think in the previous lecture we have already shown the list boxes
the list boxes and let me open the context
so okay introduction to programming
so
okay
we didn't show the list box or not
you can also see it from here one second
okay let's add the list box so list boxes are extremely useful objects of
uh vpf and vporn okay i'm going to add a list box
so this list box currently
covering all my interface i think there was a way to select it from here but i can't find it
let me arrange my name
okay so you see currently and the last added element list box is selected and
i understand it from here and i will change width and height of it from this window you can also do
from you see when i change it to max width it is set like this let's modify it let's drag it over
here okay now we have our list box and i am going to expand our main window screen size like this
and what is this okay it is still uh working with okay let's set it a bit
not a max width because when you set max width it will be getting expanded phases on that
okay okay okay now we have our list box set it like this and let's give it a name
list box one okay so list boxes are uh lists basically lists
uh that can be elements added removed or changed uh i will show you uh what i mean okay let's
uh add some values to our list box from here currently button element is selected let's give
it a we can add random numbers okay let's give it a name from here content
numbers and let's generate a click event from here double tap okay it is generated
and random random equal to random let's add 10 numbers 10 random numbers so you can access it
like list box one items at my round next okay and let's format it with like this
so you see 10 numbers are added to my list box and now i can modify read or delete or
do whatever i want with these values i will show you them okay
okay so let's add
another button let's make it a little bit smaller i will call this button as btn
change this box or let's say modify
okay so um let's
give it a new content
modify this box and let's
uh change the click event of the button
okay uh let's do it from xaml here
okay so what i'm going to do is i will set the uh third item in the list box uh to something
different okay i can do it like this this will be equal to nine uh hundreds million
okay if i make it like this what will happen
by the way you have to set it like this items too if there is no uh item uh if there is no
item at the index of two it will throw me an error okay uh let me show you what i mean if i
click this i will get an error that specified argument was out of range of valid values because
items list is empty how can i fix that i can make a new check like this man now it should work
let's try it
um maybe like this oh no i can't use it
time we have seen the new checkbox
interesting why it is not working
huh okay i see i have to put the new check here not there like this
oh yeah let's try it like this no still not working
i think
it says items get
maybe like this
okay it appears that we can't use the new check with um
this box therefore i will add a manual check if items count bigger than two
i will edit like this so it will not crash anymore
okay modifying you see now it is working i have added and when i click you see now it
is modified as i wanted and i can also make it like this items insert
let's say with insert method we can define insert index i will insert to third item
uh third index and new item will be let's say this 75 000 billion
and for this work this time how many items we need we don't um we
we let's see i think this will also throw an error if there is not enough items in the
this box but i am not sure if it has a default behavior of handling
yeah it is throwing an error therefore this time how many items we need we need at least
four items because we are inserting to index three let's see this means that we have at least four
items okay yeah and now check that this number will get one below and there will be the new
number okay you see now this is the fifth item this is the fourth item and this is the third
item we have modified and let's make something like this as well okay what i'm going to do is
i will um items remove you see i can remove by name or index i will remove the index six i mean five
okay let's try it
okay nothing happens so the fifth uh index item is currently uh this one this is the fifth index
however since we will add another item here the fifth index item will be this one and this will
get removed and this will be the fifth index this is the fifth index this is the fifth index
since we will add another item here the fifth index item will be this one and this will get
removed now check it okay didn't get remotes interesting
three notes maybe we did the calculation incorrectly
zero one two three four five okay this this is fifth item and this will become the new
picked item so this will get removed okay okay so let's check it out and it is gone as you can see
okay and currently the fifth item is this one therefore this will get removed and another of
this one will get added it will be like this okay and no more changes because it removes
this one and add another one and let's make we have added removed
let's make a removal like this
like but um
oh let's show you how to let's make a read of the 13 index
7 I can read the value of the list box items
like this okay so if there are at least eight items I can read item seven and show it so you
see you cannot convert from object to string basically list box holds objects so far we have
added only a string however you still need to use the string method now it will work
and you see it has read the seventh eight item which has the seven index and let's click again
okay you see now I can read it I can also add custom items to my list box such as let's let
me show you this box item my custom item equal to new list box item and I can make it like you see
there is content equal to let's say this is what will be displayed custom item something
my custom item data context can be let's say this will be some value it can be like this as well
okay and I can also set um I think it was
foreground color okay foreground color will be from brush that I think it is
this brush controls foreground let's see yeah from brushes brush
or interesting it was brushes yes from brushes I'm setting the foreground as blue
and I will add this item okay you can also add custom items or objects I'm adding this
new list box item in this case and I will show the data context of that item okay how
am I going to do that is list box items items last one oh we can get the last
okay let's use it like this items count minus one this gets this gets the last item
and I will get the data context how am I going to do that maybe like this
how am I going to do that maybe like this
so
hmm probably I have to manually find like this and oh not fucking
hmm
so
what kind of context set there is set value
you
hmm yeah we are doing incorrectly so currently we can assign another value maybe
maybe we can try like this
yeah dependency property key
let's make this as key one
and something like this I wonder if it will work
no it doesn't work
um
hmm
okay I think we can define a custom class to do what we want I'm not sure
yeah we can do that right now I will just remove this so there will be foregrounds
so this is how we can add colored items to this box I will show you another method
that will let you to do how to add custom objects to this box it is another thing
so let's add random items let's click modify you see now this has a blue colors blue foreground
colors and let's change its background as well equal to brushes that for example yellow okay so
okay so you can modify the item and display it like this of the list box items you can still
read its value you see now it has blue color and yellow background colors I think we can also
change its font but I am not sure font size let's say 20
okay and yes you see now it has 20 font size okay
this is how you can add custom colors list boxes list box items
and after adding this we can still modify its value by accessing it it is totally fine
okay I think I will continue next week so let's write the today's week notes
okay so what we have seen and today
so
okay and
so
so
okay and what else there is
this this is actually the same thing but I will still write it style other type
okay and there is a setter
and property okay and
so
okay
so
so
okay we have shown this
in data context of this
so I will try something for that one moment
okay now I can read it however it doesn't implicitly convert object to
xbox item to do that okay now it works
okay
data context is used for other reasons as well however now we can use it like this
create certain values for example I will set it some let's make it like let's say squared mean
what I'm going to do is
square root okay yeah square root
and to do that I have to convert it to convert to double and
and replace or two strings first and replace this to this and okay okay I'm here string and
two yeah now with this I will read the value of the data context with this I will replace the
commas and with this I will convert it to double and with this I will take square root of the
double value and with this I will convert back into string okay
so let's check it out let's check the square root of this number
okay this is the square root let's verify it from google
yeah this is the square root and this is the value we get you see I only shown the
two values after the floating numbers point so it is correct totally same this show six so I
can modify it to show six numbers after the zero like this
is okay and square root is you see totally same okay you see I am displaying something
different and I am getting the value of it at the background it is totally uh
up to me how to use it okay let's um continue writing
so what else you see we have seen how to check box
so
okay and
using data context
okay the same
so
so
um
okay I think it is all we have written a extension however this didn't work as
extension to make this work as extension I have to use this keyword and if I added this keyword here
now I can remove this as well here and it would work or it doesn't work
um no it doesn't work okay anyway just uh let's don't change it okay
uh if I remove this how can I uh call these methods
I can give the full path like statistic extensions dot now it works okay so to not
write this I can add that class like this with this way I am adding
yeah okay and what else
okay and
okay
okay
okay you may not be understanding all of the things we are doing right now however
you will start to understand them as we see them in the upcoming lectures and
at the next semester there will be advanced programming and we will see most of these again
there so you may just memorize them at the moment however however in the future you will
start to understand them okay and at the next week
um what else we have shown this we have shown this um tabs
okay I will also show combobox did I show it previously
I think I didn't show the combobox yet let me open it
okay it is here or we have shown the combobox okay we have shown custom plus objects in combobox
okay yeah we have seen the combobox okay we don't need to show it I am getting sometimes
confused because I am also giving a lecture of object-oriented programming and sometimes
they are getting mixed okay we don't need to show this
okay I think for this week it is enough it is already over
two hours and 30 minutes I am going to upload the source code as usual
um oh by the way we have a volunteer so let's add the one I will do it later
okay I will upload the source code hopefully see you next week please try to stay away from
coronavirus please try to follow the rules because coronavirus is really dangerous
uh stay safe hopefully see you end of lecture