Silverlight Spy provides detailed inspection of any Silverlight application. Explore the UI element tree, monitor events, extract XAML, get and set object properties, view statistics and more.
So you have a Silverlight project all sorted but you’re getting bored with the default splash screen animation showing the percentage loaded. Help is here at last for designers and creative gurus who may find programming Silverlight a struggle from time to time. I’m by no means a teacher so this may or may not make sense and I’m relying on your feedback to make this the best it can be!
Before you get started
In addition to your usual project files there are a few specific files required to make this work and these may not be part of your Silverlight project. These include a file with some JavaScript (to calculate the percent loaded, change a progress bar, etc.) and a XAML file for the actual splash screen visuals. The following steps go into a bit more detail about these:
Step 1
Create your Silverlight project (I use Blend and have VS2008 as a backup for helping with writing code from time to time).
Step 2
Create a JS (JavaScript) files in the same location as HTML and ClientBin. The name can be anything – I usually name this ‘SplashScreen.js’. This will contain a function (or multiple functions if you’re brave!) for things like updating text showing percent loaded, progress bar and/or countdown text where applicable.
Here is the complete code for all three:
function onSourceDownloadProgressChanged(sender, eventArgs) {
// UPDATE LOADING STATUS TEXT AS A PERCENTAGE
sender.findName(“uxStatus”).Text = “Loading: ” + Math.round(Math.round((eventArgs.progress * 1000)) / 10) + “%”;
// COUNTDOWN TEXT FROM 100 TO 0 (0 = 100% LOADED)
sender.findName(“uxStatus_CountDown”).Text = Math.round(100 – (Math.round((eventArgs.progress * 1000)) / 10)) +””;
// CHANGE THE WIDTH OF A PROGRESS BAR – THE MULITIPLYER IS THE SAME AS THE FULL WIDTH OF THE PROGRESS BAR AT 100% LOADED
sender.findName(“uxProgressBar”).ScaleY = eventArgs.progress * 100;
}
Step 3
Create a XAML file in the ClientBin folder – I usually name this Splash.xaml and it contains the actual splash screen elements such as the percent loaded text, progress bar and any animations. As far as I understand it this can NOT be a UserControl which can make designing difficult. I found that creating a separate Silverlight project for the splash screen helps with the design process as you can easily build the experience and test it to make sure it’s doing what you want it to. Then it’s as easy as viewing the XAML code, cutting all the elements from within the UserControl and pasting them into your Splash.xaml. Don’t worry if your confused, I was. But once you do it things will start to make sense!
One important note is to ensure the naming convention used in both the JavaScript and XAML files are consistent. I won’t go into any detail about this as I trust you understand the implications of this if your reading this. 🙂
Here’s an example that will work with the JavaScript file from Step 2 (you may need to tweak some of the values to display properly in your project):
<Grid x:Name=”LayoutRoot” Background=”White”>
<Canvas Canvas.Top=”208″ Canvas.Left=”95″ Width=”100″ Height=”10″ Background=”#19000000″ HorizontalAlignment=”Stretch” VerticalAlignment=”Bottom”>
<!– This is the progress bar –>
<Rectangle Width=”10″ Height=”1″ x:Name=”uxProgress” Canvas.Top=”10″ Canvas.Left=”0″ Fill=”#FFCCCCCC” StrokeThickness=”0″ UseLayoutRounding=”False”>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform x:Name=”uxProgressBar” ScaleX=”1″ ScaleY=”0.001″/>
<SkewTransform AngleX=”0″ AngleY=”0″/>
<RotateTransform Angle=”270″/>
<TranslateTransform X=”0″ Y=”0″/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
<!– TextBlock that will show the percent loaded –>
<TextBlock x:Name=”uxStatus” Height=”14″ Text=”Loading…” TextWrapping=”Wrap” Canvas.Top=”-12″ FontSize=”9″ d:IsStaticText=”True” Width=”98″ />
<!– TextBlock that will show a countdown from 100 to 0 –>
<TextBlock x:Name=”uxStatus_CountDown” Height=”14″ Text=”100″ TextWrapping=”Wrap” Canvas.Top=”12″ Width=”98″ FontSize=”9″ d:IsStaticText=”True” TextAlignment=”Right” />
</Canvas>
</Grid>
Step 4
You now have two files – SplashScreen.js and Splash.xaml. The next step is to add a few lines of code to your HTML file (Blend will create this file and name it ‘Default.html’).
Start by adding this line of code following the <head> tag and ensure that it is the first <script> code (there may be more than one and this must be the first):
<script type=”text/javascript” src=”SplashScreen.js”></script>
This will ensure the JavaScript for your splash screen is loaded first and ready to be used by the Splash.xaml.
Next add these two lines of code to the Silverlight <object> further down the page and immediately following the source parameter for the XAP file:
<param name=”splashscreensource” value=”ClientBin/Splash.xaml”/>
<param name=”onSourceDownloadProgressChanged” value=”onSourceDownloadProgressChanged” />
That’s it for the HTML file. Note the second parameter here, this is actually calling the JavaScript you created in step one that will update the Splash.xaml.
Conclusion
Good luck with your custom splash screens and please do let me know if anything is unclear in this tutorial.
Tim Heuer goes into detail regarding how to use custom fonts in Silverlight 2 (check it out here). This is a snippet from his blog:
“When we set that in the FontFamily to a file, Silverlight essentially creates the downloader for us in an efficient manner. The font file is requested based on the URI provided and downloaded via a GET request. Once downloaded it parses out the second part (the “#”) to look within that font file for the named font. So essentially the format is:
<file>#<named-font>
where # is the delimiter in this format. That’s it, you are done. No script needed. If you choose to package several font assets within your application you can put them in a single archive file as well and the same syntax would apply:
<TextBlock x:Name=”Header” FontFamily=”segoeB.zip#Segoe Bold” />
The same execution happens. Silverlight gets the archive file and then looks at the font file contents in the archive to find the first named font to use. The archive doesn’t have to only have font files either…which is cool at times.”
There I was getting very frustrated with Blend and how it deals with typography. I was building a Silverlight prototype and the design called for text with tight leading (line height). All was well until I couldn’t find any way to set this in the Properties window in Blend. ARGH!? All was not lost though, I found out that line height is supported for the TextBlock element but it’s very well hidden from use humble designers.
There are two properties that must be specified for custom leading to work with the TextBlock element:
- LineStackingStrategy
- LineHeight
Note that as well as setting LineHeight=”desired-height-in-pixels”, it is also necessary to set LineStackingStrategy=”BlockLineHeight”.
<TextBlock x:Name=”Header” FontFamily=”segoeB.zip#Segoe Bold” LineHeight=”18″ LineStackingStrategy=”BlockLineHeight” />
05
Dec
08
Apologies for the neglect!
I’m back and will do my best to keep this blog up-to-date and full of useful stuff for designers (and any one else interested!)
I’ve added a links section that will grow over time. If you have any links you think would be great to include let me know!
06
Sep
08
Silverlight 2 Timer
Creating a simple timer is a fairly simple process (honest!).
The first step in this example is to create a TextBlock in the Page.xaml to display the timers count.
<!– A simple TextBlock to show the output of the timer. –>
<TextBlock Loaded=”StartTimer” x:Name=”myTextBlock” />
The second step involves a bit of C# coding in the Page.xaml.cs. This includes create a timer object, starting count variable and something called a ‘tick’.
// 1. Create the timer
// 2. Set the timer interval (e.g. add 1 to the timer ever 100 milliseconds)
// 3. Create an Tick EventHandler (e.g. there will be a tick based on the timer interval)
// 4. Start the timer
public void StartTimer(object o, RoutedEventArgs sender)
{
System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();
myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 100);
myDispatcherTimer.Tick += new EventHandler(Each_Tick);
myDispatcherTimer.Start();
}
// This variable is the starting number for the timer display.
int i = 0;
// Fires while the DispatcherTimer is active and creates a incremental count based on the interval.
public void Each_Tick(object o, EventArgs sender)
{
myTextBlock.Text = “Count up: ” + i++.ToString();
}
Hello! We’re a group of designers that have embraced Microsoft Silverlight. However, it has proven a struggle coming to grips with this technology as most of the resources on the web are aimed at developers or those who already have a good understanding of the C# (the programming language that brings the magic to Silverlight). So it is with this blog that we hope to help designers better understand Silverlight and how to make the web a better experience.
silverlight for designers 