Posts
133
Comments
328
Trackbacks
0
August 2010 Entries
Silverlight 4 Application Template Themes by Microsoft

I watched John Papa’s Silverlight TV Ep 42: Apply and Customize the new Silverlight Themes this morning and decided to try it out. I felt that the documentation for getting started was sparse, so I decided to write my own to help the community.

First, what is is and why do I care? The themes are designed to provide a navigation template for a Silverlight Business Application. If you are not a designer then chances are you are not going to make something this pretty. =)

First, you should download the themes here. This pack includes the following themes :

Note: The Jet Pack is not available yet but should be available soon.

After you download the theme pack and extract it you will get 2 folders, one for Expression Blend 4 and another for Visual Studio 2010. I had no problem installing the VS2010 by double clicking on the .VSIX file. The Visual Studio 2010 was straight-forward, so I will focus on Blend 4.  The README_First.txt document says that you will need to copy the themes for Blend 4 into the %ProgramFiles%\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight folder. This is only correct for X86 installs of Expression Blend 4. For other X64 versions of Blend 4 you will need to copy the files into the \Program Files (x86)\Microsoft Expression\Blend 4\ProjectTemplates\en\CSharp\Silverlight folder.

At this point, it would be best if you install the Silverlight 4 Toolkit if you don’t already have it. If you don’t install the Silverlight 4 Toolkit and try to run the project you will get this.

image

So head on over to http://silverlight.codeplex.com/ and hit the download button. Click next, until the installation is finished.

image

Once they are installed you can use the theme by going into Blend 4 and selecting New Project –> Silverlight –> Themes.

image

Select the theme that you want and you should be good to go.

image

Posted On Saturday, August 28, 2010 1:56 PM | Feedback (0)
Flashing Text (using behavior/storyboard) in Silverlight 4

I noticed a lot of confusion around flashing text in Silverlight 4/WPF and wanted to show you a simple way to pull it off using Blend 4. I’ve seen plenty of examples of people using code-behind to accomplish this, but this should really be handled in the View or the .XAML file (if you are not familiar using the term View from the MVVM pattern). If you can get a grasp of Storyboard’s and Behaviors, you can do a lot of things similar to this without cluttering your code-behind files.

Full XAML is provided at the end of this article.

Let’s start with a basic Grid and add a TextBlock to it. You will get the following:

image

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="FlashingText.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="Black">
        <TextBlock Height="44" TextWrapping="Wrap" Text="http://michaelcrump.net" Width="167" Foreground="#FFFDFF00" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</UserControl>

 

Next, we need to add a StoryBoard. Begin by looking at the Objects and Timeline and hitting the + button to create a new storyboard. Name it “FlashMe” to differentiate it between other storyboard that you may create.

image

Now, you will notice your screen changed to what is pictured below.

image

This workspace is the design workspace. A better choice for the working in Animation is the Animation workspace. Who would have guessed? Go ahead and hit F6 to switch to the Animation workspace. As you can tell this is much easier to work with.

image

Click on the TextBlock to get started. We are going to create the storyboard but clicking on the 1 in the timeline below. Now look at the properties of the Textblock and set the Visibility property to Collapsed. We are going to do the same thing with the 2 but set the Visibility property to Visible.

image

image

image

Our Storyboard is now created. All we have to do now is wire up the Behavior to the control, determine what event we want and set it to repeat forever. Go ahead and drag a ControlStoryboardAction to our TextBlock that we created.

image

Click on the ControlStoryboardAction and you will have several Properties to configure.

We are going to change the EventName to “Loaded” and the Storyboard to “FlashMe”. You property window should look like the one below.

image

One last thing, click on the Storyboard you created called “FlashMe” and set the RepeatBehavior to Forever.

image

Go ahead and hit the run button and you should get flashing text. 

Full XAML included below.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    x:Class="FlashingText.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <Storyboard x:Name="FlashMe" RepeatBehavior="Forever">
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="textBlock">
                <DiscreteObjectKeyFrame KeyTime="0:0:1">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Collapsed</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
                <DiscreteObjectKeyFrame KeyTime="0:0:2">
                    <DiscreteObjectKeyFrame.Value>
                        <Visibility>Visible</Visibility>
                    </DiscreteObjectKeyFrame.Value>
                </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="Black">
        <TextBlock x:Name="textBlock" Height="44" TextWrapping="Wrap" Text="http://michaelcrump.net" Width="167" Foreground="#FFFDFF00" HorizontalAlignment="Center" VerticalAlignment="Center">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Loaded">
                    <ei:ControlStoryboardAction Storyboard="{StaticResource FlashMe}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </TextBlock>
    </Grid>
</UserControl>
Posted On Thursday, August 26, 2010 6:13 PM | Feedback (2)
Silverlight Spy 3.0.0.12 Review

Let me start by saying, I love looking at other people’s code. I have learned so much by reading code that I would put that in a top 5 list of things every programmer should do. If it wasn’t for tools like .NET Reflector or Snoop then I would have missed reading a lot of great code. I started working in Silverlight a few months ago and wanted a utility to browse the tree nodes like Snoop does for WPF. I found several solutions but wasn’t happy until I stumbled upon Silverlight Spy 3 by First Floor Software. I watched this video on Channel9 and instantly wanted to learn more about this application. I sent an email to  Koen Zwikstra letting him know that I wanted to review his software and he provided a free personal copy of the software. So how did it go you may ask? Well, check out my review below.

First what is it? Silverlight Spy is a runtime inspector tool that will tell you pretty much everything that is going on with the application. Basically, you give it a URL that contains a Silverlight application and you can explore the element tree, events, xaml and so much more.

Below is the main screenshot after the application is loaded.

image

 

In order to play with this application I’ve decided to use my “Fade-In Screen in Silverlight Application”. I decided to use it because its small and it would be easier to tell if Silverlight Spy 3 is telling the truth. So before we start reviewing it, we will want to go ahead and add a reference to Reflector. This will allow us to decompile Silverlight assemblies.

Go to Tools then Options then click the Reflector tab. Even though this step is not required to use the application it should be done to utilize the power of the application.

image

 

After you hit OK, its time to try it out. Go ahead and put in any URL and hit Go.

image

As you can tell by the screenshot we have a three main windows. The first is the Silverlight application, The explorer view and Properties. Lets examine the Explorer view first.

image

 

 

 

The explorer provides the following information:

  • Application Settings – This provides information about Content, Deployment, Host, Out of Browser settings and other misc settings. Being able to see the Runtime Version along with the Entry Point Assembly would definitely help during debugging.
  • XAP Package – This contains compression info along with what dll’s and manifest are included in the XAP. You can view the manifest by clicking view on the property window. This is a very cool feature.

image

  • Object Browser – This will allow you to examine the .NET classes available by the XAP package. You can drill down to get more info.

image

  • Isolated Storage – This will tell you what is contained in the Isolated Storage file if the application is using one. You can also export or delete files available in both Application and Site isolated storage.
  • UI Automation – This displays the automation object model a Silverlight application exposes to Automation clients.
  • Styles – This provides access to the default and application control styles found in the application.
  • User Interface Explorer – This will assist with exploring the visual or logical tree structure of an application. It not only provides you the full XAML that was used to create the application, but allow you to change properties real-time. So for example, your developing an application and wonder what the font will look like in a different size. Instead of stopping the application and changing it and recompiling, you just change the property in Silverlight Spy 3.

image

image 

The next thing to take a look at is the Monitoring Tools.

  • Performance Monitor – Tracks the performance of your application. It has different tabs for Memory, Process, Processor, Frame Rate and Isolated Storage.

image

  • Event Monitor – This tracks all the events raised by the Silverlight user interface in real-time.

image

Thankfully, Koen thought of adding a filter so that you could take off or add different items.

  • Network Monitor – Before you probably had to use some kind of application like Fiddler to see what happens when someone hits the website. Now you can enter the URL and watch the network traffic.

image

 

 

 

 

 

 

My application does not use the ClientAccessPolicy.XML so you do not see it here. Instead, you see the html, javascript and finally the XAP file is requested. Say goodbye to fiddler!

The Dynamic Language Runtime shell allows for interactively executing dynamic language code in the Silverlight application domain. Thankfully it provided samples as I’m not a Python or Ruby guy.

image

If you wanted to grab all of the text inside of the TextBlock you could write your own code or use the sample. Very nice touch, especially with the samples.

image

 

The Application Analyzer validates the Silverlight application by checking a set of rules that include best practices, common pitfalls and be used to improve the application. I decided to try it on my small app and this is what it suggested.

image

The statistics provides a count of all the elements, brushes etc on the page. While I’m not sure how this would help you its still very interesting.

image

 

It also comes with a Cross-Domain access Policy Validator.

image

Pros: Lets see, UI Element Tree browsing, XAP Package information, Monitoring, DLR Shell, Application Analyzer and Cross-Domain Access Policy information. What more could you ask for? The amount of features the app includes makes you feel like Koen actually though them through instead of throwing them in as a filler.

Cons: I’m not really sure if this is a con but no Silverlight 1.0 or Out-of-Browser support. I definitely think Out-of-Browser support should be added in the future. I would also like to see the installer detect or prompt for the location of Red Gates Reflector.

Bottom Line: It is the best tool for the job and if you are a Silverlight developer, its definitely worth a try. I appreciate Koen for giving me the chance to review his product and if you would like to know more about the product then click here.

Posted On Saturday, August 21, 2010 9:32 PM | Feedback (0)
“Fade in” Screen in Silverlight 4

I’ve had a couple request to create a fade in screen using Silverlight/Expression Blend 4 and decided that I would add it to my blog. The whole point of this application, is to present information to the user and once they click on the screen for it to appear in the background. This could be used in numerous ways for a business application. (click to shop, click for more info, etc).

Before diving into this, I did not want multiple XAML pages and chain them together. I wanted to use some of the built in behaviors and states and use no procedural code.

To get started, we will create a new Silverlight 4 application using Expression Blend 4. After we create the application, we will add 2 buttons and it will look like the following. Pretty simple right? I went ahead and added names and a background color but this is completely optional.

 

image

XAML here for those that want to follow along. Make sure that you edit the x:Class unless you named your project SilverlightApplication1.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="SilverlightApplication1.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="#FFDE5E5E">
       <Button x:Name="btnClick" Content="A Button" Height="55" Margin="83,102,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="122"/>
       <Button x:Name="btnClick2" Content="Another Button" Height="55" Margin="83,170,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="122"/>
    </Grid>
</UserControl>

Instead of creating another XAML file, we are going to cover the existing Grid with a new one and add our text. When the user clicks on the text then it will fade to the background and show the main application.

We are going to start with adding another Grid on top of the existing Grid and throw in 2 textboxes as shown below:

image

Notice that we have 2 grids in our Objects and Timeline. The first is named LayoutRoot and the second is grid with no name. I’ve highlighted the grids in red below. Please note that you won’t have the GoToStateAction just yet.

image

Next, we are going to add a State Group and 2 states. Begin by clicking States and clicking add state group. Now where it says VisualState group add 2 states and name them the same as the following:

  • Show
  • Hide

image

 

We are going to go ahead and setup the Default Transition. Click the little fx button and select Fade:

image

You may want to go ahead and put 0.5 second in for the transition duration.

Now click on the Hide state. After you clicked on Hide, then select the second grid that we added from Objects and Timeline and set its Opacity to 0% and Visibility to collapsed.

You should have the following properties assigned to the second grid that we added.

image

The only thing left to do at this point is to add a “GoToStateAction” Behavior to the Grid.

Select Assets and then behaviors and look for GoToStateAction.

image

 

 

 

 

Drag it onto the grid. Click it once and you will now notice that the properties of the GoToStateAction is available. We want this to trigger on MouseLeftButtonDown and fire the StateName called Hide. Also make sure that you have a check in UseTransitions.

image

Go ahead and build your application. When it runs you should be able to click on the main screen and it fade into the application.

Complete XAML located here:

<UserControl
    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:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" mc:Ignorable="d"
    x:Class="SilverlightApplication1.MainPage"
    Width="640" Height="480">

    <Grid x:Name="LayoutRoot" Background="#FFDE5E5E">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="VisualStateGroup">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.5">
                        <ei:ExtendedVisualStateManager.TransitionEffect>
                            <ee:FadeTransitionEffect/>
                        </ei:ExtendedVisualStateManager.TransitionEffect>
                        <VisualTransition.GeneratedEasingFunction>
                            <CircleEase EasingMode="EaseInOut"/>
                        </VisualTransition.GeneratedEasingFunction>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Show"/>
                <VisualState x:Name="Hide">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="grid">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <Visibility>Collapsed</Visibility>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager/>
        </VisualStateManager.CustomVisualStateManager>
        <Button x:Name="btnClick" Content="Button 1" Height="55" Margin="83,102,0,0" VerticalAlignment="Top" Click="btnClick_Click" HorizontalAlignment="Left" Width="122"/>
        <Button x:Name="btnClick2" Content="Button 2" Height="55" Margin="83,170,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="122"/>
        <Grid x:Name="grid" d:IsHidden="True">
            <Grid.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="0"/>
                    <GradientStop Color="#FF3F5CFF" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:GoToStateAction StateName="Hide"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <TextBlock TextWrapping="Wrap" Text="Click to Enter:" ToolTipService.ToolTip="For all your Looney Toones Needs" FontSize="48" Foreground="#FFF9F7F7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <TextBlock Height="24" Margin="8,0,242,8" TextWrapping="Wrap" Text="Acme Corporation" VerticalAlignment="Bottom" Foreground="#FFF7F2F2" FontSize="16"/>
        </Grid>
    </Grid>
</UserControl>
Posted On Saturday, August 14, 2010 7:21 PM | Feedback (3)
Book Review: Microsoft Silverlight 4 Step by Step
Microsoft Silverlight 4 Step by Step

(click book logo to be taken to the Catalog Page)

Book cover of Microsoft® Silverlight® 4 Step by Step 

By: Laurence Moroney

Publisher: Microsoft Press
Pub. Date: June 30, 2010
Print ISBN-13: 978-0-7356-3887-7
Pages in Print Edition: 336

I decided to do my first review with the new Silverlight 4 Step by Step book from Microsoft Press.  I have read the entire book and completed all of the exercises. I have found several errors in the book’s code, but they were not hard to figure out.

Instead of writing a formal book review that includes an introduction, body and conclusion. I’m going to do a chapter by chapter review that points out the highs/lows and I will rate that individual chapter.

Just FYI, I am a C# Developer of mainly business applications. I have a few months of Silverlight experience and was hoping that this book would bring me up to speed with the new features of Silverlight 4. The book did help, but it wasn’t exactly what I was looking for.

Please see my chapter by chapter review below:

Chapter 1. Introducing Silverlight

Description: This chapter shows you how to download and install the components that allow you to create Silverlight and WP7 applications. It walks you through a simple Silverlight app that consisted of a button and a textbox. It was very simple and someone with a few years of working with the Microsoft stack will be bored. This is a step by step book and I expected this coming in.

Chapter Rating: 2/5

Chapter 2. Silverlight Controls

Description: This chapter walks you through several of the standard Silverlight controls such as button, textblock, textbox, listbox, image and combobox. It was helpful to actually go into the MouseWheel event as I’ve never seen that mentioned in any other book. The chapter just barely touches on the Controls available; you could definitely learn more just by playing with the controls.

Chapter Rating: 1/5

Chapter 3. Layout and Styling

Description: Grids, Canvas and StackPanel’s. It basically walks you through creating these controls manually. While, I believe its great to know how to do with straight XAML, I wouldn’t recommend doing it that way. Expression Blend 4 is way too powerful to be creating these type of layout controls by hand.

Chapter Rating: 2/5

Chapter 4. Data and RIA Services

Description: A fairly interesting chapter on RIA Services. They walked you through creating a database to retrieve data to creating the RIA services server project. I actually learned a few things about the ADO.NET Data Model that I may be able to use in the future.

Chapter Rating: 4/5

Chapter 5. Rich Imaging

Description: This chapter discusses using the power of “Deep Zoom” and Photosynth. The version of Deep Zoom that they were using is a bit outdated, but it worked for the tutorial. It's my personal opinion that most developers will never use either of these technologies in a commercial app. The famous “Hard Rock” cafe demo is cool, but I can’t find many uses for this in business applications. Photosynth could be helpful in real estate applications that need a panoramic view of a room.

Chapter Rating: 3/5

Chapter 6. Media, Webcams, and Video

Description: This chapter only talks about the MediaElement control (which is great for video) and briefly goes over using a webcam.  While everyone that is doing media with Silverlight should know MediaElement inside and out, I find the webcam part useless. I will give this chapter a 2 because it does go over the necessary parts to understand the MediaElement control.

Chapter Rating: 2/5

Chapter 7. Transformation and Animation

Description: Expression Blend, Expression Blend, Expression Blend. This chapter unfortunately does not preach that entirely. They show you how to do a majority of this with straight XAML and finally show an example of Animations in Expression Blend. As I’ve said earlier, its great to know the syntax, but just plain stupid to do animation without Blend. You wouldn’t turn off VS IntelliSense because its “better” to type would you? Do your transformation/animation work in Blend people.

Chapter Rating: 1/5

Chapter 8. Building Desktop Applications

Description: This was actually one of my favorite chapters. It was very simple to understand and hit a lot of “need-to-know” topics like: Out of Browser, Detecting Updates & Network Status, Isolated Storage, Elevates Mode, Notification Windows and even Interoperating with COM. I actually got something out of this chapter in an easy to read format. The knowledge from thie chapter would have taken a while if solely searching on the net.

Chapter Rating: 5/5

Chapter 9. Integrating with the Browser

Description: Another outstanding chapter, probably worth the price of the book. I’ve looked for a way to learn how to call Javascript from Silverlight app and vice versa and have always come up short. This book explains it in a very simple way and even explores the Bing Virtual Earth API. Very cool!

Chapter Rating: 5/5

Chapter 10. Accessing Network Services

Description: This is another helpful chapter. It discusses consuming data from services on your network and the internet. Uses the WebClient class to retrieve data and bind to a Silverlight UI. It even goes into some LINQ to XML. While I have already worked on projects similar to this, I found it useful information that the average Silverlight developer will need in his/her career. 

Chapter Rating: 5/5

Chapter 11. Windows Phone Development

Description: This chapter helps you locate the tools needed to develop WP7 applications and walks you through building a application that consumes a web service. I admit that I was not expecting the WP7 chapters in this book. I am only planning on building Silverlight for the Desktop applications and maybe the last 4 chapters of this book belong in a different book.

Chapter Rating: 3/5

Chapter 12. Windows Phone Features

Description: This was a fairly informative chapter if you wanted to work with the WP7 series. It discusses orientation, back buttons, application bars and context-appropriate keyboards.

Chapter Rating: 4/5

Chapter 13. Expression Blend for Windows Phone

Description: Very short chapter that barely touches on what you can do with Expression Blend for WP7. It walks you through a simple animation and that's it. Leaves a lot to be desired.

Chapter Rating: 1/5

Chapter 14. Getting Started with XNA Game Development for Windows Phone

Description: Here we are again building an XNA Game for Windows Phone 7 and we are reading a Silverlight 4 book. While this chapter teaches you a few cool things about such as sprite sheet, it really doesn’t belong in this book.

Chapter Rating: 2/5

Final Thoughts:

This book is great for a starter Silverlight 4 book, but that is all. I felt that it hit a few high points and left a lot to be desired. Chapters 8-10 were the best parts of the book and I would recommend reading those if you just want the ‘meat’ of the book. The book comes with a CD that has all of the source code and I had to rely on it one time to get me past a typo in the book. I would only recommend this book if you are brand new to development and want to work with the Microsoft stack. For everyone else, I would recommend reading some of the Silverlight Blogs below:

Posted On Tuesday, August 03, 2010 4:02 PM | Feedback (2)
Tag Cloud