Well, now that we have created our entire layout with all of the well required elements, we can go
to the next step or finally come to the next step, which is assigning the name well property so that
we can access it from our code behind files or C sharp files in general.
You can see that right here.
Now I will just make the example window a little bit bigger so that it's easier for you to follow along.
Now let's get started here.
We got all of our elements, which we need.
So generally speaking, for sure, we need to have any kind of event when we click on the button because
that's well, the moment when we say like, okay, I clicked on the button, now you want to enter something
into our to do list, we want to create a text block, right?
So we need a button event.
So for our button we don't need the X name.
We can simply create an event handler.
That's fine.
So let's say for our click event, we want to create a new event handler And I don't want to just let
this system create the new event handler.
I want to do it on my own and therefore I just say like add to do button and then underscore click.
So that seems to be a reasonable name.
Let's switch over to our CSS and let's create that.
Let's create the private void exactly the same name.
So just take a look here.
It has to be matching.
If not, we will get a compile error.
So add to do button and we got an object.
It's a sender routed events or routed events.
Argh!
There we go.
So it looks like this auto completed.
Everything is good now.
So here we got our event.
Let's continue with our example for the text box.
We want to access it once we click the button to read the content and therefore we need to have an X
name attribute, we could simply call it like X name and then give it a matching name, like to do input,
for example, or to do like this to do input.
So just make sure that you exactly pay attention on how you write it so that you can later on access
it.
And finally, we will attach those new text blocks that we will create in the stack panel or to the
stack panel.
We will not attach it to the scroll viewer, so we don't need to access the scroll viewer.
We need to access the stack panel and therefore we set another name here which will then be so let's
say X name to do list.
All right, so let's sum that up.
We got three things.
First is we now have a click event handler on our button, which is calling an add to do button click
method inside of our code behind.
And we have a text box which is called to do input by setting the X name property.
Same for the stack panel with the name set to to do list.
Awesome.
Now let's switch over to our code behind one of our previous lessons I showed you that you can use this
X name property right here to find an element, but what we can also do is we can immediately access
it by simply writing down the name.
So for the stack panel, for example, if we want to get access to it, we can simply write down to
do list, right?
So this is the stack panel.
Take a look.
It's already the instance.
So if we just go to our example again and we will get access to this stack panel here because we are
writing down that to do list.
So this is actually our instance.
Just keep that in mind.
I just wanted to point that out because this is what we'll be using.
Instead of finding an element by its name, we will access it immediately this time because this is
much easier for sure.
So now that we set up everything, set up the events, X name properties and all of that, and also
created an event, we are now good to go to add the main functionality when it comes to our code.
So in the next lesson we will see how to create the text block item to add it to our stack panel.