locked
side-ways sliding form? RRS feed

  • Question

  • Hey everyone

    I remember seeing on some websites a control (or set of controls?) of a form thats basically broken up into pieces. The pieces are put side by side, and when you fill out one bit, you click next, and a little timeline on the top of the page highlights part 2, and then you would have a different form (or different piece of the form), and then you could click next for the slideshow to scroll to the next form, or you could click on any part of the little timline on top of the page to get to the corresponding section...

    Does anyone know what I'm talking about? Can someone give me some guidance as to how this can be built in silverlight? 

    Thursday, September 29, 2011 4:32 AM

Answers

All replies

  • I've done this with a transitioning content control in a navigation frame control.  I had to tweak the transitioning content control style to add left/right transitions:

     <Style TargetType="tk:TransitioningContentControl" >
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Transition" Value="DefaultTransition" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="tk:TransitioningContentControl">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="PresentationStates">
                                    <VisualState x:Name="DefaultTransition">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="UpTransition">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="30" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="-30" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="DownTransition">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-30" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="30" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="LeftTransition">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="-30" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="30" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <VisualState x:Name="RightTransition">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="1" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="CurrentContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="30" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>

                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="PreviousContentPresentationSite" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.300" Value="-30" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Grid>
                                <ContentPresenter x:Name="PreviousContentPresentationSite" Content="{x:Null}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ContentPresenter.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform />
                                            <SkewTransform />
                                            <RotateTransform />
                                            <TranslateTransform />
                                        </TransformGroup>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>

                                <ContentPresenter x:Name="CurrentContentPresentationSite" Content="{x:Null}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                    <ContentPresenter.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform />
                                            <SkewTransform />
                                            <RotateTransform />
                                            <TranslateTransform />
                                        </TransformGroup>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

     

    Implementation:

                <nav:Frame >
                    <nav:Frame.Template>
                        <ControlTemplate TargetType="nav:Frame">
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <tk:TransitioningContentControl
                                        Content="{TemplateBinding Content}"
                                        Cursor="{TemplateBinding Cursor}"
                                        Margin="{TemplateBinding Padding}"
                                        HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                     VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Transition="Normal" />
                            </Border>
                        </ControlTemplate>
                    </nav:Frame.Template>
                    <nav:Frame.UriMapper>
                        <uriMapper:UriMapper>
                            <uriMapper:UriMapping Uri="/{view}" MappedUri="/{view}.xaml" />
                        </uriMapper:UriMapper>
                    </nav:Frame.UriMapper>
                </nav:Frame>

    Thursday, September 29, 2011 8:06 AM
  • Have you taken a look at any carousel control examples?

    Thursday, September 29, 2011 8:16 AM
  • i have but it isnt quite what i wanted
    i wanted to figure out how to do something like this:
    http://css-tricks.com/examples/MovingBoxes/ 

    but with forms instead of images. reason why i want to do it in silverlight is so i can use WCF RIA for security.
    any ideas?

    Monday, October 3, 2011 1:53 PM
  • I think the transitioning content control is going to be your best bet.

    Monday, October 3, 2011 2:29 PM
  • Hi Tayseer,

    In the beginning most ("images") slideshows like the ones you're refering to were made of retemplated listboxes,
    though in your case, like someone suggested above, I would go for the TransitionningContentControl which is part of the Silverlight toolkit.
    You can have a look at
    http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html 

    Transition property allows you to define the type of transition you want 

    Transition="<Transition Name>" //XAML
    or
    TCC.Transition = "Transition Name"; //Code Behind

    You can even go a bit deeper in effects and add a personal touch... like the sample below

    Using Blend 4's new built-in TransitionEffects in Navigation and MVVM applications
    http://www.silverlightshow.net/items/Using-Blend-4-s-new-built-in-TransitionEffects-in-Navigation-and-MVVM-applications.aspx

    Last one, but not the least is a video I encourage you to take a look at:
    Creating Rich Interactions Using Blend 4: Transition Effects, Fluid Layout, and Layout States (Silverlight TV #32)
    http://channel9.msdn.com/shows/SilverlightTV/Creating-Rich-Interactions-Using-Blend-4-Transition-Effects-Fluid-Layout-and-Layout-States-Silverlig/

    If this answers your question, please Mark as an answer. Thank you.

    Tuesday, October 4, 2011 12:10 PM
  • YES thats what i was looking for!
    THANK YOU SO MUCH! 

    Tuesday, October 4, 2011 8:00 PM
  • You're very welcome :)

    Tuesday, October 4, 2011 8:29 PM