WPF sliders [part 1] link

August 21, 2020

Happy Friday! I hope August is treating you well. Our family has lots of celebrations in August including my wedding anniversary and my mom’s Birthday within just a few days of each other. I needed to take a quick break last week but have regrouped and prepared a post on sliders in Windows Presentation Form (WPF). When creating a user interface, the interactions can have a lot of pieces. When you incorporate user selection, you need to consider all of the different scenarios.

For the curtain wall randomizer, we have the material selection which involves a handful ofdifferent parts that work together. We use the material selection combobox, slider, textbox, and lock option as components to allow users to enter information. All these elements need event handles and this is what I will discuss this week and next week. For user interfaces, it’s important to keep in mind that intricate interfaces take time to storyboard and implement. For the Randomizer plug-in, I spent almost as much time on the UI as I did on the plug-in. The methods used by the UI, which includes event handlers and update methods, are located in the code-behind file for the form, which is the .xaml.cs file.

First we need to store a few values. A list of tuples helps store the various WPF form elements we need so we can easily access them in all of our methods. We also need a list to store the integers for the slider values. We’re going to read and write to this list throughout the process.

set slider value

The first method I am going to discuss is setSliderValues. This method takes the slideValues list and assigns them to the correct slider. This method, along with a few others reference the equalizeSliders method, which is a longer, more intricate method that ensures all of the sliders add up to 100. I’m covering a handful of different methods this week on a higher level, so I won’t be discussing the equalizeSliders method in detail. You can however take a look at how it works on GitHub.

value change via slider

In addition to having a method to update the sliders, we need to consider what happens when you move the slider back and forth. This change is handled through an event handler on the slider itself. The event handler updates all of the slider and the sliderValues list as you move the slider back and forth.

value change via text input

Additionally, it would be nice to have a text input that allows users to enter the percentage instead of using the slider. This way, you can be more precise in the percentages or enter them quickly if you know how the different materials should be allocated. The sltext_LostFocus method takes the value entered in the textbook and updates all the sliders.

summary

And that covers a few of the considerations for using sliders in WPF. Next week, I will discuss two additional features I integrated into the sliders: the lock feature and resetting sliders.

resources

If you want to learn to code and don’t know where to start check out my posts about Steps to Learn to Code [for architects and designers] Part 1 and Part 2.

Revit API Docs