Sunday, May 6, 2012

MCTS Windows Development with .NET 4

The first certification I am pursuing is the MCTS in Windows application development.  Coming in with a few years of C# winforms development in hand, I thought this one would be fairly straightforward.  I soon realized that having in-depth exposure in my world doesn't always equate to having wide exposure in the rest of the world.  The expectations are high for this session.  The workload amounts to 12-13 hours a day between labs, studying and practice tests.  I have read a five hundred and eighty page text book in just over two days and have found that at least 65% of it has been fairly new territory.  The MCTS certification is heavily slanted to WPF.  It seems like Microsoft is pushing the technology toward this platform as the standard for development.  After having some time to delve into it, the reason becomes obvious.  The rich presentation layer that can be created on this platform is powerful, scalable and adaptable.  The xaml itself is not unlike any other markup, and if you can read and follow html, xml, etc., you will be fine reading through xaml and understanding the intent of the code.  What stands out to me regarding this platform is the inherent dynamism of the GUI itself.  The ease with which we can create a highly usable and intuitive interface is really quite impressive.  Take the following example (borrowed from the class):

    <Window.Resources>
        <ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
            <Grid>
                <Ellipse Name="Ellipse1" Stroke="{TemplateBinding BorderBrush}"
         StrokeThickness="{TemplateBinding BorderThickness}">
                    <Ellipse.Fill>
                        <RadialGradientBrush GradientOrigin=".5, .5">
                            <GradientStop Color="Red" Offset="0" />
                            <GradientStop  Color="Orange" Offset=".25" />
                            <GradientStop  Color="Blue" Offset=".5" />
                            <GradientStop  Color="Yellow" Offset=".75" />
                            <GradientStop Color="Green" Offset="1" />
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter HorizontalAlignment="Center" 
         VerticalAlignment="Center"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Ellipse1" Property="Fill">
                        <Setter.Value>
                            <RadialGradientBrush GradientOrigin=".5, .5">
                                <GradientStop Color="LightCoral" Offset="0" />
                                <GradientStop  Color="LightSalmon" Offset=".25" />
                                <GradientStop  Color="LightBlue" Offset=".5" />
                                <GradientStop  Color="LightYellow" Offset=".75" />
                                <GradientStop Color="LightGreen" Offset="1" />
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Ellipse1" Property="Fill">
                        <Setter.Value>
                            <RadialGradientBrush GradientOrigin=".5,.5">
                                <GradientStop Color="Gray" Offset="0" />
                                <GradientStop  Color="LightGray" Offset=".25" />
                                <GradientStop  Color="Black" Offset=".5" />
                                <GradientStop  Color="White" Offset=".75" />
                                <GradientStop Color="DarkGray" Offset="1" />
                            </RadialGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard AutoReverse="True">
                            <DoubleAnimation To="0" Duration="0:0:0.1"   
             Storyboard.TargetProperty="Width" />
                            <DoubleAnimation To="0" Duration="0:0:0.1" 
             Storyboard.TargetProperty="Height" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template" Value="{StaticResource ButtonTemplate}" />
        </Style>
    </Window.Resources>

This creates a button template that applies a style (very ugly) and behavior that can be associated with any button.   By including the following style block and associated setters, the template is automatically applied to all buttons contained in the current window.

<Style TargetType="{x:Type Button}">
  <Setter Property="Template" Value="{StaticResource ButtonTemplate}" />
</Style>  

If I wanted to apply this template and style to the entire application, I would simply move these snippets to the app.xaml.  Another level of dynamism comes by allowing you to link to external xaml files as application resources and swap them.  So, not only could you customize the look and feel of the application, you can dynamically customize the inherent behavior of elements at the application level.  There is a ton more to get into with this kind of thing, and we will at a later date.  Other possibilities include, command triggers, gestures, framed animations and much more.  It has been very interesting to date and I will bring back some renewed focus on pushing the ui envelope within our applications.

2 comments:

  1. Is this making an elliptical shaped button with an animated gradient background?

    ReplyDelete
  2. Yeah. Actually, it is defining a rounded button with 3 gradient patterns, one for hover, one for disabled and one default. Then when you click it, there is an animation on the button size. It's pretty cool. Slap it in a xaml page and try it out.

    ReplyDelete