Let's get started with the main logic in our application.
But first of all, I want to point out that my approach is to first of all, design the application.
So I think about what should the application do.
Then I design the application and then finally I just implement the functionality.
This is my approach, but you could for sure do it entirely differently, right?
So feel free to try out and find your own approach.
But for me it's pretty easy that way because I know.
All right.
Yeah, there is a button.
I forgot to implement that one.
So I will now implement the button and then I exactly know that I've done that.
Well, to be honest, those functionalities right now, they are still quite simple.
Later on, when we build more complicated applications, we will have separate projects maybe, and
then you could like entirely split your coding process into front end development.
So graphical user interface or well, logical development, let's say anything that's really unrelated
to graphical user interface.
So logical stuff like accessing databases and all of that.
Here we got our add to do button click event.
So the first thing that we want to do is we want to grab the to do text.
So whenever I write down something into our text box, I want to grab the text.
So to do text equals to now let's grab our to do text box.
So we call that to do input.
You can see that it is of type text box.
So let's grab that one and let's take the text right here.
Every now and then we want to make sure that our application works as intended.
So right now there's a good moment to just show a message box.
So messagebox.show and let's take a look what to do.
Text is right.
Let's just start the application, write down the text into our text box, for example.
Hello World.
Now let's click on the Create to do button.
A message box appears and it shows Hello World.
So it does successfully read the content from our text box.
So that's working as intended.
And as I said, like every now and then you should do exactly this kind of well code validation just
to make sure that everything up to here is already working, for example.
So there is a specific case like when we just let me just start restart my application when we just
click on the button, but we don't have any content written down, right?
So right now I did not enter anything and I click on Create to do.
We don't want to add an empty to do like this is a specific scenario like keep such things in mind and
maybe write them down.
So what could a user do with your application in good scenarios and maybe even in worst case scenarios?
Right?
So we want to check for if string is null or empty and then to do text, right?
So if it's not null or empty, we want to create something.
If the to do text is null.
So no value at all or just empty.
And if it's not empty or null, we want to create a text block.
So we simply create a text block here.
Let's call it Todo item.
Let's say it's a new text block.
Now, there are multiple ways on how you can initialize objects, right?
We simply just close our new item here and then simply access it that way so that we say todo item dot
text equals to todo text.
And just for your interest, I want to show you the other way, which is like new.
We don't add parentheses, instead we add curly braces immediately add a semicolon at the end and now
we can without referencing todo item all the time again.
And now we can access the property text for example, immediately.
So we can say text equals to todo text just like this.
Great.
So we create a new text block and we set the property text to have the value of our Todo input.
I guess that makes sense right now.
Finally, we take our to do list.
So this is our stack panel.
Always make sure to check like the type so that you know.
Oh yeah, I grabbed the correct item or element to do list.
Then we take the children.
For that.
Children like for a stack panel, all attached elements are inside of the children and we simply add
something to it.
So we add a new child, so to speak, and we add our Todo item, which is our text block.
Now finally, we want to clear our Todo input.
So our text box where we have written down any text, so we say todo input dot clear.
All right, let's save and let's take a look at our application now.
There we go.
Here it is.
Let's write down like go to the grocery store and let's click on Create Todo, and you can see go to
the grocery store our text boxes.
Well, now empty.
It got cleared, which is great.
And like the text or that's hard to read, we need to adjust that later on and we may need some margin
because the goal is already pretty close to the edge right here.
Let's try to add another thing right here.
Take dog for walk.
Let's create again.
And that also works.
So you can see it's nicely stacked.
Now let's add some margin, so let's close it.
But anyway, the main functionality is definitely working.
There are just some smaller styling adjustments now, so let's set the margin equals to new and therefore
we need to create a so-called thickness.
It's a struct, so create a new thickness and let's set the value to ten.
It's pretty simple.
And then we want to make sure that we can actually read the text.
So we need to make it white instead of black.
So let's take our foreground property, right?
You have already seen that from our well visual inspector foreground.
Let's set it to a new solid color brush.
You also have heard that term.
We want to set it to white.
So colors dot white.
Great moment to start our application again.
Let's take a look.
Let's give it a try.
Take dog for a walk.
Don't want to make it too long because I don't want to bore you for walk.
Let's click on create to do.
You can see now it's white and we have some nice spacing.
Now let's take a look at one more functionality, which is our scroll bar.
So I will simply just enter stuff and click on Create to do so that we get some entries to see if our
scroll bar appears.
That looks great.
So you can see now we have a scroll bar which we can use to check our items.
Also, if I don't enter something and click on Create to do nothing will happen because this scenario
is already handled by our is null or empty statement right here.
Great.
And this is how you can build a simple to do list application in WPF.
Now I hope you had some fun building it.
I think it's really cool.
Go ahead and take your time.
Try to experiment with some colors and maybe you want to add some other elements like labels or title
or some smaller descriptions.
Or you could also go ahead and try to extend that application.
Now, in the next lesson, we will move on with our WPF journey to explore it even further.