Exercise 6: Implicit Styling

Since the user registration features are, by definition, visible to the end user, visual design starts to become more of a concern than it might be for a purely internal application. (Not that there’s anything wrong with wanting internal LOB applications to look good. But appearance tends to become a higher priority with UI that customers can see.) The buttons we added earlier in this lab aren’t very consistent with the look of the rest of the application. The main navigation chrome’s link buttons look like neither normal hyperlinks nor normal buttons. And even where moderately normal-looking buttons appear (e.g. in the login UI) they don’t use the standard Silverlight appearance for a button.

To make our buttons look more harmonious with the rest of the application, we’ll define a style for them. We’ll use the implicit styling feature added in Silverlight 4 to apply this style automatically to all buttons in the application that don’t specify their own custom style. That way, all the unstyled buttons we have added already will pick up the new look, as will any more we add in the future.

1. Open the SlEventManager project in Visual Studio 2010.
2. Open the App.xaml file.
3. You’ll find the file already contains an <Application.Resources> element, with a <ResourceDictionary> inside it. The ResourceDictionary contains a couple of merged dictionaries. You’re going to add the style after the closing </ResourceDictionary.MergedResources> tag and before the closing </ResourceDictionary> tag. Paste in the following Xaml between those two closing tags:

   XAML

   <Style TargetType="Button">
     <Setter Property="Background" Value="#FF484848"/>
     <Setter Property="Foreground" Value="White"/>
     <Setter Property="Padding" Value="6"/>
     <Setter Property="Margin" Value="3"/>
     <Setter Property="BorderThickness" Value="1"/>
     <Setter Property="BorderBrush" Value="#FF1C1D33"/>
     <Setter Property="Template">
       <Setter.Value>
         <ControlTemplate TargetType="Button">
           <Grid>
             <VisualStateManager.VisualStateGroups>
               <VisualStateGroup x:Name="CommonStates">
                 <VisualState x:Name="Normal"/>
                 <VisualState x:Name="MouseOver">
                   <Storyboard>
                     <DoubleAnimation Duration="0" To="1"
                       Storyboard.TargetProperty="Opacity"
                       Storyboard.TargetName="BackgroundAnimation"/>
                   </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Pressed">
                   <Storyboard>
                     <DoubleAnimation Duration="0" To="1"
                       Storyboard.TargetProperty="Opacity"
                       Storyboard.TargetName="BackgroundAnimation"/>
                     <ColorAnimation Duration="0" To="#FF563AFF"
       Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
       Storyboard.TargetName="BackgroundAnimation" />
                   </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Disabled">
                   <Storyboard>
                     <DoubleAnimation Duration="0" To=".55"
                       Storyboard.TargetProperty="Opacity"
                       Storyboard.TargetName="DisabledVisualElement"/>
                   </Storyboard>
                 </VisualState>
               </VisualStateGroup>
               <VisualStateGroup x:Name="FocusStates">
                 <VisualState x:Name="Focused">
                   <Storyboard>
                     <DoubleAnimation Duration="0" To="1"
                       Storyboard.TargetProperty="Opacity"
                       Storyboard.TargetName="FocusVisualElement"/>
                   </Storyboard>
                 </VisualState>
                 <VisualState x:Name="Unfocused"/>
               </VisualStateGroup>
             </VisualStateManager.VisualStateGroups>
             <Border x:Name="Background"
                   BorderBrush="{TemplateBinding BorderBrush}"
                   BorderThickness="{TemplateBinding BorderThickness}"
                   Background="{TemplateBinding Background}"
                   CornerRadius="1"
                   Padding="1">
               <Border x:Name="BackgroundAnimation" Background="#FF448DCA"
                       Opacity="0"/>
             </Border>
             <ContentPresenter
               x:Name="contentPresenter"
               ContentTemplate="{TemplateBinding ContentTemplate}"
               Content="{TemplateBinding Content}"
               HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
               Margin="{TemplateBinding Padding}"
               VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
             <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF"
               IsHitTestVisible="false" Opacity="0" RadiusY="1" RadiusX="1"/>
             <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false"
               Margin="1" Opacity="0" RadiusY="0.5" RadiusX="0.5"
               Stroke="#FF6DBDD1" StrokeThickness="1"/>
           </Grid>
         </ControlTemplate>
       </Setter.Value>
     </Setter>
   </Style>

4. Run the application.
5. Log in. (You can log in either as ian or administrator (P@ssw0rd, in either case), as either kind of user will cause some buttons to appear.)
6. The buttons that appear when you log in should now look slightly more in keeping with the overall look provided by the Silverlight Business Application template. (Feel free to express your creativity by modifying the style to suit your own tastes.)