So what have i been up to today: I have been studying some more WPF, and have learned how to apply an animation style to a data template. This means i can now make controls in a window appear out of nowhere on command, and make them sing. The dancing part i'm still working on.
Big thanks to mr. Daniel Pratt, whom you can find Here.
I have also learned that adding the coloranimation property Autoreverse=true makes the animation go in reverse after it has completed. Here is my code:
For completeness, the code used to show this datatemplate is below:
Adventures in programming, mostly in C#. I try to learn from whats in the manuals, and then do some stuff that isn't. So i guess you could say i'm writing a new manual for myself. Well that or i suck at Google.
Monday, October 31, 2016
Wednesday, October 26, 2016
Prevent a control from stretching beyond the viewable area
Making a good WPF dialog window can be a real challenge. What looks great in the designer might not once your list fills beyond the windows capacity. In this post I show you an easy way to ensure that your controls will stay within the limits of your window, without using the Height property.
For the purpose of this blogpost, i created a simple example program, with some extra borders to visualize what happens. Here is the structure for extra clarity:
- Grid (2 columns, no border)
- Stackpanel (Blue)
- Scrollviewer (Green)
- Itemscontrol, (Red)
- Stackpanel (Yellow)
- Button1
- Button2
Now the idea is to make a compact list of items you can scroll through. We made a nice, simple window, everything put in place from top to bottom.
But lets see what happens when we fill the list:
But lets see what happens when we fill the list:
OOPS. That wasn't quite the intended result. No active scrollbar, and the bottom of the scrollviewer and the itemscontrol are out of sight. Also, the two buttons that we put in are nowhere to be seen.
What happened becomes clearer if we increase the height of the window, until we reach the bottom: The scrollviewer has stretched all the way down to include ALL of the items in the list, and pushed the rest of the controls down with it.
Now to fix this we need to change not one, but two things:
Firstly, the stackpanel will allow child controls to stretch beyond its edges. That is, it does not force the height of its children to be smaller that its own height. (The wrappanel does this, too.) The only way to fix this is to replace the stackpanel with another control which does. This could be a grid, or a dockpanel. In the examples below I use the latter.

Now lets see what happens when we fill the list inside a dockpanel:
This is a little better. We can now see the bottom end of the scrollviewer (note the green border, and the bottom of the scrollbar), but the buttons are still missing. If you stretch the window it looks like the previous image.
The reason is the way XAML is parsed: from top to bottom, WITHOUT looking ahead. This means that when the scrollviewer requests the remaining space inside its parent, it gets ALL of the remaining space. No room is left over for any controls which come after it, like our buttons.
Which brings us to item number two: To get all of the controls to share the available room, we need to put the scrollviewer in last, so that it gets however much space remains after all the other controls have been placed:
Now when we run the program, it looks like this:
Everything is now shown! Just for kicks, I have done the same thing with a grid. It has 3 rows, with a height of: "Auto", "1*", "Auto".
In this case, the ScrollViewBorder has the property Grid.Row="1", with a height of "1*". (Any number followed by a star will work.) This works just as well a dockpanel, and gives the same result. Setting the height of the second row to auto does NOT constrain the height of the Scrollviewer, and gives the result at the Top of the page.
Finally: You might have noticed that the bottom of the red border is NOT contained inside its parent control. This is desired behavior: If it was, the scrollbar of the ScrollViewer would not become active.
What happened becomes clearer if we increase the height of the window, until we reach the bottom: The scrollviewer has stretched all the way down to include ALL of the items in the list, and pushed the rest of the controls down with it.
Now to fix this we need to change not one, but two things:
Firstly, the stackpanel will allow child controls to stretch beyond its edges. That is, it does not force the height of its children to be smaller that its own height. (The wrappanel does this, too.) The only way to fix this is to replace the stackpanel with another control which does. This could be a grid, or a dockpanel. In the examples below I use the latter.
Now lets see what happens when we fill the list inside a dockpanel:
This is a little better. We can now see the bottom end of the scrollviewer (note the green border, and the bottom of the scrollbar), but the buttons are still missing. If you stretch the window it looks like the previous image.
The reason is the way XAML is parsed: from top to bottom, WITHOUT looking ahead. This means that when the scrollviewer requests the remaining space inside its parent, it gets ALL of the remaining space. No room is left over for any controls which come after it, like our buttons.
Which brings us to item number two: To get all of the controls to share the available room, we need to put the scrollviewer in last, so that it gets however much space remains after all the other controls have been placed:
Now when we run the program, it looks like this:
Everything is now shown! Just for kicks, I have done the same thing with a grid. It has 3 rows, with a height of: "Auto", "1*", "Auto".
In this case, the ScrollViewBorder has the property Grid.Row="1", with a height of "1*". (Any number followed by a star will work.) This works just as well a dockpanel, and gives the same result. Setting the height of the second row to auto does NOT constrain the height of the Scrollviewer, and gives the result at the Top of the page.
Finally: You might have noticed that the bottom of the red border is NOT contained inside its parent control. This is desired behavior: If it was, the scrollbar of the ScrollViewer would not become active.
I hope this helps someone out, and happy coding!
Sunday, October 23, 2016
Templates to show controls on a form, with triggers.
There is a LOT of information on using XAML style and datatemplates and triggers on the internet, which is quite easy to find. Figuring out how to use them to display some controls on a window if a condition is met turned out to be a little harder. In this post i describe how to use both of them together to display some information, only when required.
So i just spent the entire afternoon reading, tinkering, and pulling my hairs out! There is a TON of information on XAML data templates, triggers, and conditional formatting on the internet. However what i wanted was to solve a problem to which i did not find an easy answer: to conditionally add some controls to my window.
This required me to put various pieces together, and try things out to learn about them, which was neither quick nor easy. I figured out early on how to hide existing controls, so i could just have put the information on the window and concealed it. That would be the quick, dirty method:
This required me to put various pieces together, and try things out to learn about them, which was neither quick nor easy. I figured out early on how to hide existing controls, so i could just have put the information on the window and concealed it. That would be the quick, dirty method:
Of course, I would never settle for such cheap trickery (well most of the time anyway.) I wanted to do something that turned out to be a little more difficult, and a LOT more time-consuming. I did not want to just conceal controls, I did not want anything to be there until it was needed. After trying and failing several times, I worked out a solution that gave me what i wanted, HOW i wanted:
1- In the Resources section of your window, add some DataTemplates which contain the controls.
2 -In the window, place and position a ContentControl object. This will be the parent control to your templates.
3 - In the content control, we define a style which uses the DataTemplates from step 1 as a static resource.
In XAML we add the following:
You could put these resources in your control as well. Here they are at the top of the window. Now on to the ContentControl that will display the two templates above.
As you can see, it is inside a grid to position it in the desired location. It also has a minimum height, so it can be selected even when there is nothing inside. Without the minimum height, it would resize to suit its contents (nothing) and collapse: I try to never use the height property of a control if I can help it, but always set alignment to stretch or center, as needed. That way if someone else has a different resolution or fontsize on their monitor, the controls will simply stretch or shrink to correctly show their contents.
And there you go: two nice rectangles with information directing the users attention to the next step they need to take, if one of the two conditions is satisfied. If not, neither of the templates is shown.
And since i have spent WAY too much time behind the computer today, I'm going to wish you a nice day and turn it off.
p.s. If you want to save yourself a bunch of time, make sure you check the visibility property on the CORRECT control....
Sunday, October 16, 2016
Where to start
So now you have the tools.
But unless you know how to use them,
you are one.
Programming in general is a broad topic. There are TONS of resources that can help you learn though. A lot of them paid, but with a little bit of time and patience, you can find some good free ones also. I would like to mention a few.
A lot of good information can be found at https://www.codecademy.com/. While they have both paid and free offerings, they don't include Visual Basic so I passed them over.
For visual basic a good place to start is the website:
http://www.homeandlearn.co.uk/NET/vbNet.html
For visual basic a good place to start is the website:
http://www.homeandlearn.co.uk/NET/vbNet.html
This will cover the basics, and some not so basic things farther down.
![]() |
| Image from Swisstools.co.uk |
However the topic of my current study is the younger brother of windows forms, Windows Presentation Foundation. Whilst you could use this similar to windows forms, that would be like taking a Swiss army knife and only ever peeling potatoes with it. Sure it will do the job, but if you look closer it can do SO much more.
A really good tutorial that does dive into that can be found at www.wpf-tutorial.com. Its free, but they also have extra content that is paid.
Of course while they cover a lot of material, me being the person that I am don't simply make the examples and move on, I decided to write a WPF app myself. It's job: To watermark images and write them to disk.
Sounds easy, right? Yeah that's what i thought too.
Don't get me wrong: the concept is perfectly simple. Until I decided to complicate things by using it as practice material to apply every technique I learned during the tutorials, and several others. (p.s: I LOVE GOOGLE. )
Welcome!
My name is Florian, self taught programmer, mostly amateur, definitely enthusiast! Recently i have taken up Visual Basic.NET as topic for my studies.
Even though visual basic has been around since 1991, the latest iteration can do everything expected of a modern programming language. More to the point, VB is one of a long List of languages which all compile to the SAME intermediate language. So basically, anyone writing in any of these languages can do the same thing, just differently formulated.
Now since i just started in earnest with VB, quite a lot of time goes into looking up how to do stuff. I decided that writing about it might save another guy / girl some time.
(I actually programmed before in C++, using some books, and in cobol for a job i held for a while. Cobol sucked. I learned from it though.)
What i am using:
I actually have two versions of compilers installed on my PC:
- Visual Basic 2010 Express (free)
- Visual Studio 2015 (free registration required after 30 days)
After downloading and trying the 2010 version first, it worked fine.
I then tried the 2015 version. It was bigger, badder and more intimidating looking. When using the WPF layout editor to try the very first tutorial, I experienced some weird bugs in the WPF editor, probably due to me doing something wrong. It also contains a lot of stuff i won't be using any time soon, and for some reason its considerably slower when i build and run an app.
So as long as 2010 does what i need it to, that will work just fine for me. I will miss out on the the bookmark window though.
Even though visual basic has been around since 1991, the latest iteration can do everything expected of a modern programming language. More to the point, VB is one of a long List of languages which all compile to the SAME intermediate language. So basically, anyone writing in any of these languages can do the same thing, just differently formulated.
Now since i just started in earnest with VB, quite a lot of time goes into looking up how to do stuff. I decided that writing about it might save another guy / girl some time.
(I actually programmed before in C++, using some books, and in cobol for a job i held for a while. Cobol sucked. I learned from it though.)
What i am using:
I actually have two versions of compilers installed on my PC:
- Visual Basic 2010 Express (free)
- Visual Studio 2015 (free registration required after 30 days)
After downloading and trying the 2010 version first, it worked fine.
I then tried the 2015 version. It was bigger, badder and more intimidating looking. When using the WPF layout editor to try the very first tutorial, I experienced some weird bugs in the WPF editor, probably due to me doing something wrong. It also contains a lot of stuff i won't be using any time soon, and for some reason its considerably slower when i build and run an app.
So as long as 2010 does what i need it to, that will work just fine for me. I will miss out on the the bookmark window though.
Subscribe to:
Comments (Atom)





