Click here to Skip to main content
15,893,487 members
Articles / Desktop Programming / XAML

A Pluggable Architecture for Building Silverlight Applications with MVVM

Rate me:
Please Sign up or sign in to vote.
4.71/5 (23 votes)
6 Jul 2011CPOL7 min read 145.5K   2.2K   90  
This article describes building a sample Silverlight application with the MVVM Light toolkit, WCF RIA Services, and a pluggable application architecture using MEF.
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:ee="http://schemas.microsoft.com/expression/2010/effects"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:local="clr-namespace:IssueVision.Common;assembly=IssueVision.Common">

    <Style TargetType="local:FlipControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:FlipControl">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="Normal" From="Flipped" GeneratedDuration="0:0:1">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                                                             Storyboard.TargetProperty="RotationY" To="-90" Duration="0:0:0.5"/>
                                            <DoubleAnimation Storyboard.TargetName="FrontContentProjection" 
                                                             BeginTime="0:0:0.5" Storyboard.TargetProperty="RotationY" To="0" Duration="0:0:0.5"/>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition To="Flipped" From="Normal" GeneratedDuration="0:0:1">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FrontContentProjection"
                                                             Storyboard.TargetProperty="RotationY" To="90" Duration="0:0:0.5"/>
                                            <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                                                             BeginTime="0:0:0.5" Storyboard.TargetProperty="RotationY" To="0" Duration="0:0:0.5"/>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="BackContentProjection"
                                                         Storyboard.TargetProperty="RotationY" To="-90" Duration="0:0:0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Flipped">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FrontContentProjection"
                                                         Storyboard.TargetProperty="RotationY" To="90" Duration="0:0:0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"></RowDefinition>
                        </Grid.RowDefinitions>
                        <!-- This is the front content. -->
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter Content="{TemplateBinding FrontContent}"/>
                            <Border.Projection>
                                <PlaneProjection x:Name="FrontContentProjection"></PlaneProjection>
                            </Border.Projection>
                        </Border>
                        <!-- This is the back content. -->
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Background="{TemplateBinding Background}">
                            <ContentPresenter Content="{TemplateBinding BackContent}"/>
                            <Border.Projection>
                                <PlaneProjection x:Name="BackContentProjection"></PlaneProjection>
                            </Border.Projection>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:MainPageControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MainPageControl">
                    <toolkit:DockPanel LastChildFill="True">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition To="LoggedIn" From="LoggedOut" GeneratedDuration="0:0:1.2">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="visibleStop"
                                                             Storyboard.TargetProperty="Offset" To="1.2" Duration="0:0:1.2"/>
                                            <DoubleAnimation Storyboard.TargetName="transparentStop" 
                                                             Storyboard.TargetProperty="Offset" To="1" BeginTime="0:0:0.2" Duration="0:0:1"/>
                                        </Storyboard>
                                    </VisualTransition>
                                    <VisualTransition To="LoggedOut" From="LoggedIn" GeneratedDuration="0:0:1.2">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="visibleStop"
                                                             Storyboard.TargetProperty="Offset" To="0" Duration="0:0:1.2"/>
                                            <DoubleAnimation Storyboard.TargetName="transparentStop"
                                                             Storyboard.TargetProperty="Offset" To="0" BeginTime="0:0:0.2" Duration="0:0:1"/>
                                        </Storyboard>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="LoggedIn">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="visibleStop"
                                                             Storyboard.TargetProperty="Offset" To="1.2" Duration="0:0:0"/>
                                        <DoubleAnimation Storyboard.TargetName="transparentStop" 
                                                             Storyboard.TargetProperty="Offset" To="1" Duration="0:0:0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoginPageBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainPageBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoggedOutMenuBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoggedInMenuBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="LoggedOut">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="visibleStop"
                                                             Storyboard.TargetProperty="Offset" To="0" Duration="0:0:0"/>
                                        <DoubleAnimation Storyboard.TargetName="transparentStop" 
                                                             Storyboard.TargetProperty="Offset" To="0" Duration="0:0:0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoginPageBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MainPageBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoggedOutMenuBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LoggedInMenuBorder"
                                                                       Storyboard.TargetProperty="(UIElement.Visibility)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid toolkit:DockPanel.Dock="Top">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="42"/>
                                <RowDefinition Height="21"/>
                            </Grid.RowDefinitions>
                            <!-- This is the title content. -->
                            <Border Grid.Row="0">
                                <ContentPresenter Content="{TemplateBinding TitleContent}"/>
                            </Border>
                            <!-- This is the loggedIn menu content. -->
                            <Border x:Name="LoggedInMenuBorder" Grid.Row="1" Visibility="Collapsed">
                                <ContentPresenter Content="{TemplateBinding LoggedInMenuContent}"/>
                            </Border>
                            <!-- This is the loggedOut menu content. -->
                            <Border x:Name="LoggedOutMenuBorder" Grid.Row="1" Visibility="Visible">
                                <ContentPresenter Content="{TemplateBinding LoggedOutMenuContent}"/>
                            </Border>
                        </Grid>
                        <Grid>
                            <!-- This is the main page content. -->
                            <Border x:Name="MainPageBorder" Grid.Row="0"                                   
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="{TemplateBinding CornerRadius}"
                                    Background="{TemplateBinding Background}">
                                <ContentPresenter Content="{TemplateBinding MainPageContent}"/>
                            </Border>
                            <!-- This is the login page content. -->
                            <Border x:Name="LoginPageBorder" Grid.Row="0">
                                <ContentPresenter Content="{TemplateBinding LoginPageContent}"/>
                                <Border.OpacityMask>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                        <GradientStop Offset="0" Color="Transparent" x:Name="transparentStop"/>
                                        <GradientStop Offset="0" Color="Black" x:Name="visibleStop"/>
                                    </LinearGradientBrush>
                                </Border.OpacityMask>
                            </Border>
                        </Grid>
                    </toolkit:DockPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="local:MainPageContentControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MainPageContentControl">
                    <Grid>
                        <VisualStateManager.CustomVisualStateManager>
                            <ei:ExtendedVisualStateManager/>
                        </VisualStateManager.CustomVisualStateManager>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="MainPageStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:1">
                                        <VisualTransition.GeneratedEasingFunction>
                                            <CubicEase EasingMode="EaseOut"/>
                                        </VisualTransition.GeneratedEasingFunction>
                                        <ei:ExtendedVisualStateManager.TransitionEffect>
                                            <ee:SlideInTransitionEffect SlideDirection="LeftToRight" />
                                        </ei:ExtendedVisualStateManager.TransitionEffect>
                                    </VisualTransition>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="MainPageStateA"/>
                                <VisualState x:Name="MainPageStateB"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="Loaded">
                                <ei:GoToStateAction StateName="MainPageStateA" UseTransitions="False"/>
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                        <ContentPresenter Content="{TemplateBinding Content}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
United States United States
Weidong has been an information system professional since 1990. He has a Master's degree in Computer Science, and is currently a MCSD .NET

Comments and Discussions