×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

After a longer-than-should-have-been delay (you can blame me for that) allow me to introduce JetPack.

JetPack theme

I’m really excited about this theme and the work that our team put together here.  You may have see Tsitsi talk about theming in general and introduce this theme on Silverlight TV.  The challenge behind this theme was to take some of the excitement around other Silverlight themes and create a great looking overall theme that could be used for line-of-business applications, but also extended as desired by any other application.

Working with the team at Pixel Lab, our small team looked at areas of inspiration from various online and client applications that are popular and what worked well about the user interaction on those themes.  Robby and team did a great job in my opinion of creating a very well designed theme that can be used in almost any circumstance.

During this September refresh of the themes we’ve also updated the previous 3 themes: Cosmopolitan, Windows and Accent Color with some minor fixes and tweaks based on some feedback we got.  You can see a preview of the various styles in JetPack here.

We hope you enjoy JetPack as much as we do!  We’ve provided the theme pack in the same way as we have the others, as templates for Visual Studio 2010 and Expression Blend 4 and the raw assets (resource dictionaries) for you to download.  Each Visual Studio template is build for modeling the Silverlight Navigation Application template and the WCF Ria Services Business Application template.  We’ve provided the VSIX installer formats so you just need to download that, double-click and you’ll have them in your File…New Project window for selection.

Thanks for your patience through the release of JetPack, there were some moving parts in the end (mostly delays in our release management system which underwent some changes) that were human-caused [blame me] but we’re glad to finally get it out in the wild!  Download all the themes here.

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


9/9/2010 8:45 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Is there any reason we don't get these available for WPf as well as SilverLight? Is all the noise out there true that WPF is being discontinued?
9/9/2010 8:59 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Tim, Thanks for the reply. There have been lots of rumours bandied around on Twitter yesterday and today, so it is good to hear it is not the case. I would love Microsoft to release these themes for WPF, and maintain some parity (Oh and while we talking about parity, the community is desperate for a WPF version of PivotViewer from GetPivot). Cheers, Bill
9/9/2010 9:24 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hopefully it is just me but when I follow your link the Template Download does not include JetPack. Thoughts?
9/9/2010 9:33 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
PATIENCE!?!?
I suppose I can manage a few more hours of it. Thanks to you and your team for all the hard work.
9/9/2010 9:42 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Rolls eyes. Thank god for another theme. Considering it would take <60 minutes to make SafeFileName a settable property on SaveFileDialog this is kind of absurd. My apologies for raining on the parade, but come on.
9/9/2010 9:43 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Is there documentation on the RIAServices folder in the VS2010 folder and there use? I think I understand but thought I'd check first.
9/9/2010 10:16 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Tim - Oops, I apologize that my confusion is creating confusion. I will refrain until I get my hands on the new download. Thanks for your patience.
9/9/2010 11:09 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Tim,

I congratulate you for what you gave us. After spending minutes on Jetpack (really cute by the way), you really feel that there have been some significant time spend on that theme. Great user experience, really good ! Even my wife who is the last person that kind of things could touch ... She loved it. Isn't it the point ?

I am fan !
9/10/2010 12:23 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
How do I replace the existing asset files in a existing cosmopolitan navigation app?? Once I replace the brushes etc with the raw asset files the whole app bombs...
9/10/2010 4:46 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi, is it possible to download jetpack demopage?
9/10/2010 6:55 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Why all font settings are reset to default when I run application? At design time fonts looks like bold Trebuchet MS (as set in Fonts.xaml), but at runtime it became Arial or somthing.
Please look at these pictures: http://img831.imageshack.us/gal.php?g=74524052.png
9/10/2010 7:18 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Theme looks great Tim. Your teams efforts were not in vain. I've been playing with this for the last day, and really love the new look and feel this theme can give an app. Thanks !
9/10/2010 9:19 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
OK... not shure if i'm not doing it wrong but i've managed to apply correct font at runtime.

I've added to corestyles.xaml new style:

<Style x:Key="BaseStyle" TaargetType="Control">
<Setter Property="FontFamily" Value="{StaticResource DefaultFontFamily}" />
<Setter Property="FontSize" Value="{StaticResource DefaultFontSize}" />
<Setter Property="TextOptions.TextHintingMode" Value="Animated" />
</Style>

Then using ctrl + h, replaced <Style with <Style BasedOn="{StaticResource BaseStyle}" in all resource xamls.

Important: Text styles (look for <!-- Text Styles. --> comment) in corestyles.xaml already has BasedOn so you should remove replaced BasedOn.
9/11/2010 3:17 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
There is a slight bug in the animation code when showing the login box in the RIA template. The opacity values for start and end color of the overlay should be switched from:

<EasingColorKeyFrame KeyTime="0" Value="#7F000000"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#00000000"/>

To:

<EasingColorKeyFrame KeyTime="0" Value="#00000000"/>
<EasingColorKeyFrame KeyTime="0:0:0.3" Value="#7F000000"/>

This will give a smooth fade-in transition.
9/11/2010 3:21 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
I forgot to mention that the above elements are found in Styles.xaml at lines 1085 and 1086.
9/11/2010 4:02 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
When i try create new Silverlight Navigation (Jetpack Theme)

img259.imageshack.us/img259/9479/errorbz.png

What i need to do?
9/12/2010 10:14 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Enoa, this is because the dlls are locked (because they have been downloaded). To remove this, right-click each dll in windows explorer, select properties and click unblock. That should do it.
9/14/2010 2:12 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Has anyone else seen a problem if the ErrorWindow is displayed under the JetPack Theme?

I get this error message:

Line: 56
Error: Unhandled Error in Silverlight Application
Code: 2516
Category: ParserError
Message: Cannot add instance of type 'System.Windows.Setter' to a collection of type 'System.Windows.SetterBaseCollection'.
File:
Line: 822
Position: 41

If I remove the Style setting for ErrorWindow, the ErrorWindow displays (without the themed Style, of course).
9/14/2010 7:18 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
I added a TabControl to my Home.xaml page and changed the TabStripPlacement to something other than Top. It disappears. Anyone seen this and know of a fix?
9/15/2010 6:23 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
I'm getting the same error as Martin. Have checked everything to no avail. Any thoughts/hints are greatly appreciated.
9/15/2010 7:27 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi, the themes with longer names (such as Silverlight Business Application Windows Theme) won't work on my XP machine. I believe the file paths are exceeding 250 chars (I think this is the limit in XP) . For you guys using Windows 7 I guess this is not an issue. When the limit is exceeded the files wont copy and the templates have lots of missing files when used with VS. They dont work!
Gravatar
9/15/2010 10:45 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
I have the similar problems with the theme project templates.
Here is the error message I received while trying to create project using these templates:
The file System.Windows.Control.Data.DataForm.ToolKit.dll could not be found within the project templates. Continuing to run, but the resulting project may not build properly.
To be specific, I tried to create project from "Silverlight Business Application(JetPack Theme)"
Gravatar
9/15/2010 10:48 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
My comment need correct, its not the same problem as above my comment
9/15/2010 5:44 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
Any chance we'll see a VB.Net version? Can't be that hard, right?
9/16/2010 2:53 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Re: problems with some templates on XP. Some templates (ones with longer names) don't work on XP. Created Windows 7 virtual PC and the templates work fine.
9/16/2010 8:49 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
The SL4Themes-RawAssets.zip download does not include the Jetpack files, and the "minor fixes and tweaks" for the other themes do not appear to be included. I ran a diff on the files in this download and the previous release - they are identical.
Gravatar
9/16/2010 2:33 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
Here is the error message I received while trying to create project using these templates:
The file System.Windows.Control.Data.DataForm.ToolKit.dll could not be found within the project templates. Continuing to run, but the resulting project may not build properly.
To be specific, I tried to create project from "Silverlight Business Application(JetPack Theme)"
Gravatar
9/17/2010 8:25 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi Tim,

Thanks for your reply. I am using the Silverlight Business application template with toolkit (april) already.

I am trying now to start a new project using the "Silverlight Business Application(JetPack Theme)" and during project creation, I am getting the error message:
The file System.Windows.Control.Data.DataForm.ToolKit.dll could not be found within the project templates. Continuing to run, but the resulting project may not build properly.

Thanks for your help.
NK
9/18/2010 8:01 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Is there any plan to make any of these Silverlight themes available in Lightswitch?
9/23/2010 7:02 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
You've posted screen shots of sample applications using this and other themes, like the Windows theme. Are these sample apps available anywhere?
9/24/2010 4:44 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi Tim, could you pls point me to a good tutorial regarding porting a silverlight theme (eg the beautiful jet pack) to WPF? The one link to the New Zealand site (dotnet.org.za/.../silverlight-love-for-wpf.aspx) I found, didn't return data. Love the blog. Cheers, Geoff
9/27/2010 6:16 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
I too, had errors like Martin.
Blend is more sensitive, and showed an error on line 821 in Styles.xaml

So, i copied the folowing lines from another ChildWindow style in styles.xaml
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>

That worked.

So, there's definitely a bug in Styles.xaml, line 821
9/28/2010 9:42 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Is the source code of the sample application at www.silverlight.net/.../jetpack.html available somewhere?

In particular I want to find out how to build those vertical separators into my own UI.
9/30/2010 2:11 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
This needs to be ported to WPF. How hard could that be?
Gravatar
10/4/2010 3:42 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi Tim,

Very good looking, that Cosmo theme,

but i get an error if i use a the sdk:datagrid

at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)
at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
at System.Windows.Controls.VisualStates.GoToState(Control control, Boolean useTransitions, String[] stateNames)
at System.Windows.Controls.DataGridRow.ApplyState(Boolean animate)
at System.Windows.Controls.DataGrid.set_MouseOverRowIndex(Nullable`1 value)
at System.Windows.Controls.DataGridRow.set_IsMouseOver(Boolean value)
at System.Windows.Controls.DataGridRow.DataGridRow_MouseEnter(Object sender, MouseEventArgs e)
at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)

Regards,
Luc
10/5/2010 1:23 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
I cannot get the TabStripPlacement="Left" (or "Bottom") to work for the SDK TabControl (styled using SDKStyles.xaml). I have to comment out the TabControl and TabItem templates in SDKStyles.xaml to see the tabs again!

Does anyone have a fix for this?
10/5/2010 3:38 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
Where can we get help or support regarding these templates? They do not work for me as has been reported on several forums?

The file System.Windows.Control.Data.DataForm.ToolKit.dll could not be found within the project templates.

Thanks.
10/6/2010 1:13 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
@Gary

Thanks very much for finding this solved my issue.
10/14/2010 11:59 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
@Gary

The mistake in line 821 is a missing value for the Border Brush, just add Value="Red" (or any color) and that problem goes away. Problem is that you most likely have an error somewhere else causing the error window to pop up.
11/1/2010 6:38 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
It looks to me like the version of the styles used in the sample site (www.silverlight.net/.../jetpack.html) does not match the styles I get when I build a site using the template or the raw assets. For instance, the text box and ComboBox have this nice dashed line around the text or selected item. Also, this ComboBox style does not support the INotifyErrorInfo interface with the expected red outline and error pop-up. Did an old version get uploaded, by chance?
11/23/2010 11:12 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hey Tim,

These are really nice themes. Is there some way to apply these to existing Silverlight Business Application project?

Thanks!
12/5/2010 10:26 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
I love this theme! But I have a problem. The ChildWindow control seems to be very bad styled. It has a light background, and the default text color is white. White text on a light background is not a good idea. Anyone else seeing this problem?
12/6/2010 1:21 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
The JetPack theme doesn't have the Validation Visual states so when you have a validation error on a Combobox, you don't get the red border
1/12/2011 8:40 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
@martin, gary

Thank you for the heads up on the error on line 821 in Styles.xaml
1/26/2011 12:05 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Nate D & Gary... thanks solved my issue
3/12/2011 5:55 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
I love themes but i always find that 70-663 test MS can't program them correctly and it wastes resources. I always disable them on my win machines. 70-648 test I use them alot on my mac or on linux but this is not a discussion on which 70-536 test one is better. But i have to agree that for themes like this one, 70-685 test i might enable them again.
Gravatar
3/24/2011 9:36 PM | # re: Introducing JetPack–a new Silverlight 4 application theme
Is the silverlight source code to www.silverlight.net/.../jetpack.html available?

I need to see how the styles are being referenced. Specifically, how to
(1) create the grey background
(2) create the horizontal menu "Core, SDK, Toolkit, Charts" is done. How would I implement submenu?
(3) reference i.e., "Option Three" button to <Style x:Key="GreenButton" TargetType="Button">?

Thanks.
4/6/2011 9:24 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Tim,

Great looking theme - lots of positive feedback from co-workers around here.

I have a couple of issues using the datagrid with the JetPack theme. As you know, with the standard datagrid, the first click on a row selects the row. The second click places the row in edit mode and, for example, highlights the text in a textbox. Pressing F2 on a selected row also places the row in edit mode with the text cursor placed at the end of any text already in the textbox.

With the JetPack theme applied (and this occurs on the example site www.silverlight.net/.../jetpack.html), the mouse click on a selected row or pressing F2 on a selected row seems to place the row in edit mode but does not give the textbox the focus i.e. you cannot start editing the contents of the datagrid cell. It appears that this means you can't actually use keyboard only editing of the datagrid which is definitely a problem for a business app.

The second issue is that there is no focus border around a cell. This means that
if you are using the arrow keys to navigate a datagrid, you can't tell which column you are currently in until you press F2.

I hope you are able to reproduce these issues and if so, is there any chance you would be able to update the theme? As I said, everyone here thinks it looks great but the issues with keyboard access for datagrids make it a problem using it with our business apps.

Cheers,
Steve
4/7/2011 7:33 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi,
Inline with a couple of other comments,
Is the silverlight source code to www.silverlight.net/.../jetpack.html available?
This would be very helpful.
Cheers
Paul
6/2/2011 10:22 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Tim, thanks very much to you and your team for providing us with this great, professional looking theme. I'm sure I'll reuse it many, many times over.
6/14/2011 2:25 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
Hi Tim,

I get the same error as Luc mentions

using the sdk:datagrid

at MS.Internal.XcpImports.VisualStateManager_GoToState(Control reference, String StateName, Boolean useTransitions, Boolean& refreshInheritanceContext)
at System.Windows.VisualStateManager.GoToState(Control control, String stateName, Boolean useTransitions)
at System.Windows.Controls.VisualStates.GoToState(Control control, Boolean useTransitions, String[] stateNames)
at System.Windows.Controls.DataGridRow.ApplyState(Boolean animate)
at System.Windows.Controls.DataGrid.set_MouseOverRowIndex(Nullable`1 value)
at System.Windows.Controls.DataGridRow.set_IsMouseOver(Boolean value)
at System.Windows.Controls.DataGridRow.DataGridRow_MouseEnter(Object sender, MouseEventArgs e)
at MS.Internal.CoreInvokeHandler.InvokeEventHandler(Int32 typeIndex, Delegate handlerDelegate, Object sender, Object args)
at MS.Internal.JoltHelper.FireEvent(IntPtr unmanagedObj, IntPtr unmanagedObjArgs, Int32 argsTypeIndex, Int32 actualArgsTypeIndex, String eventName)


How should it be resolved?

Regars,

Rabin
10/20/2011 12:14 AM | # re: Introducing JetPack–a new Silverlight 4 application theme
General fix for getting most control themed (e.g. DataForm, which when applied jet pack renders a blank page entirely.

apply following code.

Theme currentThemeHolder = (Theme)((FrameworkElement)Application.Current.RootVisual).FindName("ThemeContainer");

Theme.SetApplicationThemeUri(Application.Current, currentThemeHolder.ThemeUri);

But I am still able to solve bug for tabcontrol where, tab strip placement is other than top. does anybody know its fix style to make tabcontrol visible when using tab placement as left, right etc.?

 
Please add 5 and 3 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.