Animating Panels to display questions

[jayinthe813]

I am designing an application to standardize auditing processes. Essentially, I am creating a table which contains audit types, categories under those audit types, and questions pertaining to that category. An example of what I mean about the data:



So I am going to pull the categories and questions out of the database when a user selects the audit type from a drop-down combobox in a form. For each category under the audit type, I intend to load these items somehow into a format which will allow someone to perform data entry. I imagine I can create a flow layout panel for each category and use a custom control which has properties for the questions and points. A depiction of what I intend for this to look like is below:



The issue I am trying to currently solve for, is how I should be going about loading and displaying those panels as well as swapping them out? I imagine a back and forward arrow which uses an animation to display and hide panels for each category. I have an animating library (https://code.google.com/p/dot-net-tr...ithTransitions) I am just not sure about the methodology of seamlessly transitioning from one panel to the next. Any ideas?

[dolot]

I do something very similar right now in a project that I have where we have wizards. We switch from one step of the wizard to another by sliding one panel out and sliding another panel in. The arrows that control the sliding are positioned below the panels that slide - in a separate panel themselves. The sliding of the panels is done through a simple movement of the two panels by 30 pixel increments. I position the 'new' panel just outside the container, then move the existing panel out by 30 pixels, then move the new panel in by 30 pixels. It appears ever so slightly jerky, but the customer is pleased with it overall. The one place where it's an issue is when either of the panels has lots of controls. Labels are not so much an issue, but lots of textboxes, comboboxes, and radio buttons can cause the slide to move slower.

Once I get a panel outside of view, I remove it from the container, and I don't add a new panel to the container until I need it. So basically I'm creating and removing panels on the fly. The panels that I use are actually separate user controls, rather than panel controls, and actually they all inherit from a base user control that has common functionality that each 'sliding' control needs.

You could load them all up to start with and just leave them there, but that would make the form somewhat slow to load initially.

I feel like I'm all over the place here - let me know if I need to clarify something.

[jayinthe813]

I do something very similar right now in a project that I have where we have wizards. We switch from one step of the wizard to another by sliding one panel out and sliding another panel in. The arrows that control the sliding are positioned below the panels that slide - in a separate panel themselves. The sliding of the panels is done through a simple movement of the two panels by 30 pixel increments. I position the 'new' panel just outside the container, then move the existing panel out by 30 pixels, then move the new panel in by 30 pixels. It appears ever so slightly jerky, but the customer is pleased with it overall. The one place where it's an issue is when either of the panels has lots of controls. Labels are not so much an issue, but lots of textboxes, comboboxes, and radio buttons can cause the slide to move slower.

Once I get a panel outside of view, I remove it from the container, and I don't add a new panel to the container until I need it. So basically I'm creating and removing panels on the fly. The panels that I use are actually separate user controls, rather than panel controls, and actually they all inherit from a base user control that has common functionality that each 'sliding' control needs.

You could load them all up to start with and just leave them there, but that would make the form somewhat slow to load initially.

I feel like I'm all over the place here - let me know if I need to clarify something.

Thanks for the response. My first thought is that I need to make it sort of intuitive and easy to use. I thought I could use a tab control, but that is a bit boring but perhaps I am pushing the design limits of WinForms. Essentially your post describes what I would like to achieve (albeit I am stickler on the "smooth" animation). I will load a datatable containing all the required information (basically categories, descriptions, and weights) based on user selection, so I will have all the data up front. It is then how I need to display this to the user: Most likely looping the loaded datatable for the categories and questions, filling in my own control to display the pertinent data, then at the end, looping through those created controls and upload the data.

Let me ask, how do you handle form/window resizing? One thing I am unsure of is how that should be handled.

[dolot]

Let me ask, how do you handle form/window resizing?

We don't. The form is fixed size and modal, so in that respect we make our lives easier. The code that handles the sliding, though, doesn't use any fixed numbers, other than the increment of sliding. Otherwise I base the starting and ending points of everything on the size and location of the container and the panels (user controls) that were being slid in and out, so it would probably work even if the user resized the form, although a minimum size would be required.

I had to scratch my brain for a while before I got the sliding code worked out - kind of a fun exercise, though. Here's what one of the step slider functions looks like:

''' <summary>
        ''' Slides a step forward by sliding the current step out to the left while sliding the new step in from the right.
        ''' </summary>
        Public Shared Sub SlideStepForward(ByVal Container As Windows.Forms.Control, ByVal CurrentStep As Windows.Forms.Control, ByVal NextStep As Windows.Forms.Control)
 
            'get the width of the container
            Dim ContainerWidth As Integer = Container.Size.Width
 
            'compute step interval
            Dim StepInterval As Integer = ContainerWidth / 20
 
            'position the next step to the immediate right of the current step
            NextStep.Location = New Point(ContainerWidth + 1, 0)
 
            'undock the current step
            If CurrentStep IsNot Nothing Then CurrentStep.Dock = Windows.Forms.DockStyle.None
 
            'make sure p2 isn't hidden behind something else
            NextStep.BringToFront()
 
            'now move the steps.
            For I As Integer = ContainerWidth To 0 Step -StepInterval
                If CurrentStep IsNot Nothing Then CurrentStep.Location = New Point(I - ContainerWidth, 0)
                NextStep.Location = New Point(I + 1, 0)
                Container.Refresh()
            Next
 
            'add the final step - in case the step interval didn't get it there.
            NextStep.Location = New Point(0, 0)
            Container.Refresh()
 
            'dock the next step
            NextStep.Dock = Windows.Forms.DockStyle.Fill
 
        End Sub

[jayinthe813]

We don't. The form is fixed size and modal, so in that respect we make our lives easier. The code that handles the sliding, though, doesn't use any fixed numbers, other than the increment of sliding. Otherwise I base the starting and ending points of everything on the size and location of the container and the panels (user controls) that were being slid in and out, so it would probably work even if the user resized the form, although a minimum size would be required.

I had to scratch my brain for a while before I got the sliding code worked out - kind of a fun exercise, though. Here's what one of the step slider functions looks like:

''' <summary>
        ''' Slides a step forward by sliding the current step out to the left while sliding the new step in from the right.
        ''' </summary>
        Public Shared Sub SlideStepForward(ByVal Container As Windows.Forms.Control, ByVal CurrentStep As Windows.Forms.Control, ByVal NextStep As Windows.Forms.Control)
 
            'get the width of the container
            Dim ContainerWidth As Integer = Container.Size.Width
 
            'compute step interval
            Dim StepInterval As Integer = ContainerWidth / 20
 
            'position the next step to the immediate right of the current step
            NextStep.Location = New Point(ContainerWidth + 1, 0)
 
            'undock the current step
            If CurrentStep IsNot Nothing Then CurrentStep.Dock = Windows.Forms.DockStyle.None
 
            'make sure p2 isn't hidden behind something else
            NextStep.BringToFront()
 
            'now move the steps.
            For I As Integer = ContainerWidth To 0 Step -StepInterval
                If CurrentStep IsNot Nothing Then CurrentStep.Location = New Point(I - ContainerWidth, 0)
                NextStep.Location = New Point(I + 1, 0)
                Container.Refresh()
            Next
 
            'add the final step - in case the step interval didn't get it there.
            NextStep.Location = New Point(0, 0)
            Container.Refresh()
 
            'dock the next step
            NextStep.Dock = Windows.Forms.DockStyle.Fill
 
        End Sub

You might want to take a look at the transitions library that I posted. The transitioning is asynchronous. I am so far getting really smooth transitions (no jitter). The call looks like:

Transition.run(currentPanel, "Left", -1500, New TransitionType_EaseInEaseOut(300))

Where currentPanel is the control you are attempting to animate (so Container for you), "Left" is the property you are adjusting, and -1500 is the new value to transition to. This essentially moves the panel from its current location in the parent container to LEFT -1500 (which for me moves off screen).

I am really most concerned about how to generate the panel (meaning, should I generate them all up front and show them, or generate them as the user clicks "Next". I guess generating all up front makes the most sense, but as you said will create some lag time (The only thing I can use background worker for is the DB call, I guess)

[dolot]

I never tested the speed of loading all the panels at once. Seems like it would be slower, but since they aren't all being displayed all at the same time it may not be too bad.

One way to find out!

I'll check that transition library - thanks!