lisa-marie mueller

let's build the next thing together

BLOG PORTFOLIO ABOUT ARCHIVE

lisa-marie mueller

let's build the next thing together

BLOG PORTFOLIO ABOUT ARCHIVE

WPF sliders [part 2]

August 28, 2020

typewriter, Cuckoo Clock, marbles in orange Happy Friday! Last week we looked at sliders and how to move and adjust a collection of sliders. This week, we will look at locking and resetting sliders when a material is deselected. First, I’m going to discuss how I start storyboarding and putting together a UI.

UI storyboarding

I like to connect the visual requirements with the code so I usually start by sketching out what I want the UI to look like. I think about the different features I want to incorporate and how to best control them in an interface. For example, for the randomizing curtain wall mullions plug-in I wanted to makes sure it was possible to randomly delete only the vertical mullions, only the horizontal mullions, or both. This lended itself well to a check box that activated each option and allowed users to customize their selection. Additionally, I knew I wanted to allow users to randomize the materials of the panels. This made me start thinking about sliders since you can easily see the ratio of each material you have selected. Then I added additional layers for more control like the lock option.

slider lock

When selecting materials for your curtain wall, it is possible you may want to lock one material to a certain percentage and then adjust the rest of the sliders to adjust the ratio. This is why I have added a check box to lock a slider. When the lock is checked, we have the chk_sliderLock_Checked event handler that sets the slider and input box to be inactive. It then also ensures the value of the locked slider isn’t changed when our other sliders are updated. We have a second event handler that sets everything active again when we uncheck the box.


    private void chk_sliderLock_Checked(object sender, RoutedEventArgs e)
    {
        CheckBox lockCheck = (CheckBox)sender;
        var materialSelection = materialSelections.FirstOrDefault(s => s.Item3 == lockCheck.Name);
        string sliderName = materialSelection?.Item2;
        string textBoxName = materialSelection?.Item4;
        Slider lockedSlider = (Slider)this.FindName(sliderName);
        lockedSlider.IsEnabled = false;
        TextBox lockTextBox = (TextBox)this.FindName(textBoxName);
        lockTextBox.IsEnabled = false;
    }

reset slider after material change

One additional item we need to consider is what happens when a slider was set to a material and the user changes it back to “none”. In this case, we want to make sure the slider amount is redistributed to any active sliders and that the slider with no material selected is set to be inactive. This is exactly what our cwPanelType_SelectionChanged method does when the material selection is set to “none”.


    private void cwPanelType_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        ComboBox materialCombo = (ComboBox)sender;
        var materialSelection = materialSelections.FirstOrDefault(s => s.Item1 == materialCombo.Name);
        if ((int)materialCombo.SelectedValue == -1)
        {
            CheckBox disableCheckBox = (CheckBox)this.FindName(materialSelection.Item3);
            disableCheckBox.IsChecked = false;
            disableCheckBox.IsEnabled = false;
            Slider disableSlider = (Slider)this.FindName(materialSelection.Item2);
            disableSlider.IsEnabled = false;
            TextBox disableTextBox = (TextBox)this.FindName(materialSelection.Item4);
            disableTextBox.IsEnabled = false;
            int totalActive = materialSelections.Where(s => ((Slider)this.FindName(s.Item2)).IsEnabled).Count();
            if (totalActive == 0)
            {
                var firstSelection = materialSelections.First();
                CheckBox firstCheckBox = (CheckBox)this.FindName(firstSelection.Item3);
                firstCheckBox.IsChecked = false;
            }
            int index = materialSelections.IndexOf(materialSelection);
            equalizeSliders(index, -(int)(disableSlider.Value));
            setSliderValues();
        }
        else
        {
            CheckBox enableCheckbox = (CheckBox)this.FindName(materialSelection.Item3);
            enableCheckbox.IsEnabled = true;
            Slider enableSlider = (Slider)this.FindName(materialSelection.Item2);
            enableSlider.IsEnabled = !enableCheckbox.IsChecked ?? false;
            TextBox enableTextBox = (TextBox)this.FindName(materialSelection.Item4);
            enableTextBox.IsEnabled = !enableCheckbox.IsChecked ?? false;
        }
    }

summary

And that wraps up the Curtain Wall Randomizer plug-in. You can download the compiled DLL on my GitHub repo. Next week, I’ll start a new series where I start to explore some of API related to text.

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

#sliders

#WPF

#element types

#C#

#plug-in

#curtain wall

#randomizer

#coding

#Revit

#RevitAPI

lisa-marie mueller

let's build the next thing together

lisa-marie mueller

let's build the next thing together

WPF sliders [part 2]