Listening to PodCasts on Windows Phone

Using the Zune Software it is easy to listen to PodCasts on the Windows Phone. If you commute or have to wait regularly, you miss a lot when you don’t plug in your earplugs or connect your Windows Phone to your Car Stereo. There are many PodCasts and there is a lot to learn.

PodCastsInZune

For European Listeners there are some hickups: the Zune is officially not available in Europe, so PodCasts exclusively for Zune are restricted for use outside the USA. You can experience that by using the Zune links that are on the official homepages of the PodCasts. I’ve had a likewise experience when I subscribe from within the PodCast player in Windows Phone, showing a “cannot play this PodCast” message instead of playing it.

NotAvailableInYourRegion

To avoid this problem enter the RSS feed URL of a PodCast in the Subscribe dialog that appears when you click the Add a PodCast button at the bottom left of the Zune PodCast screen. When the PodCast episodes list has loaded, drag interesting episodes to you Windows Phone.

When you hit the Series Settings button on the right of the screen next to the episodes list, you can determine how podcasts are downloaded and synched to your phone:

PodCastsSeriesSettings

The Windows Phone standard PodCast player is actually very nice and complete, but if you want more or other features you can search the MarketPlace for other PodCast Players. Screenshots below illustrate the path to playing a episode from .NET Rocks!:

Screen Capture (9) Screen Capture (11) Screen Capture (10) 

Screen Capture (12) Screen Capture (6) Screen Capture (8)  

Screen Capture (7)When a PodCast is playing, you can always adjust volume or stop the show by using the volume button of you phone. It will place the player controls over any screen that is currently showing, even the startup screen:

 

 

 

 

    

It is hard, if not impossible to find the URLs back for the feeds once you are subscribed. Feeds I’m listening to are:

Dot NET Rocks!: http://www.pwop.com/feed.aspx?show=dotnetrocks
The Tablet Show: http://www.pwop.com/feed.aspx?show=thetabletshow
Deep Fried Bytes: http://feeds.feedburner.com/deepfriedbytes
DotNed PotCasts: http://www.dotned.nl/podcasts/podcasts.xml
HanselMinutes: http://feeds.feedburner.com/HanselminutesCompleteMP3
Yet Another Podcast: http://feeds.feedburner.com/JesseLibertyYapcast
MacWorld: http://www.macworld.com/weblogs/mwpodcast.rss
Windows Phone Dev PodCast: http://feeds.feedburner.com/WindowsPhoneDevPodcast Windows Weekly: http://leoville.tv/podcasts/ww.xml

Njoy!

How to stop a WPF Window from moving using Touch by removing the ManipulationBoundaryFeedback

When using Touch in WPF it is possible to scroll lists. It’s just that the Window is moving to give Feedback when you are reaching the end of the list. This is not always what you want. To make your application ignore this behavior you can mark the ManipulationBoundaryFeedback event handled:

<Grid :Name="LayoutRoot" 
    ManipulationBoundaryFeedback="ManipulationBoundaryFeedbackHandler">

<DataGrid
    ScrollViewer.CanContentScroll ="False"
    ScrollViewer.PanningMode="VerticalOnly"
    ScrollViewer.PanningRatio="2"
    ScrollViewer.PanningDeceleration="1000"
    ScrollViewer.VerticalScrollBarVisibility="Hidden">
        …
</DataGrid>

.. your application is here…

</Grid>

private void ManipulationBoundaryFeedbackHandler
    (object sender, ManipulationBoundaryFeedbackEventArgs e)
{
    e.Handled = true;
}

The event is bubbling only, so if you place the event handler on your LayoutRoot it should work for all lists.

Actually there is also a System settings in the Panning Tab in the Pen and Touch settings dialog. This is a setting the end users can choose.

Njoy!

Typography in Silverlight 5

Silverlight 5 is released and contains the Typography features that already existed in WPF. Designers can use these features to make beautiful typographic designs.

SilverlightTypographyThanks to the qualities of the OpenType font format, several typographic features are now available to every web designer. Combining TrueType and Postscript outlines in one format, smaller file sizes, more typographic control and allowing far more characters in a single font file have resulted in a much more versatile use of fonts. The Typography object is available to you inside a TextBlock or TextBox tag. Attributes of this object lead to various typographic results.

Inside a TextBlock or TextBox, a Run element is used that can only contain unformatted text. Properties of the Typography object are applied through this Run element. To group some of the Run elements together, use a <Span>. Both Run and Span have no inherent rendering.

One concept associated with typography is Kerning . Kerning is embedded in the selected font file and Silverlight has no influence on it other than being able to use it or not. You can set the Typography.Kerning attribute to False. The default setting is True.

Superscript and Subscript are Variants of normal characters in a font, placed on respectively a higher or lower baseline than the rest of the text. Other Variants are Normal, Titling, Inferior, Ordinal and Ruby. Note that a Superscript and a Subscript Variant needs to be present in the font file you use.

Nobody should use a smaller font size of normal Capitals when you really need SmallCaps. Spacing of SmallCaps is different and weight and proportion of the letters are adapted to their size and use. Also, for titling purposes capitals with elegant, slender stems are possible, if they are accounted for in the specified font. Setting the property Typography.CapitalSpacing=”True” is a good idea for titles or text that are in capitals, for the spacing between capitals and lowercase letters differs from the spacing between all capitals.

Ligatures are Alternates for two characters that would collide when spaced normally. In the lowercase combination of f and i for example, the point of character i interferes with the end of the stroke of the f regularly. So in the ligature this issue is solved. The same is true for ff, fl, ffi, ffl and many other character combinations. In OpenType fonts standard ligatures are enabled by default in Silverlight 5. If for some reason standard ligatures should be disabled, use the property Typography.StandardLigatures=”False”. Other reasons for ligatures are esthetic, resulting in discretionary or historic ligatures, using Typography. DiscretionaryLigatures and Typograpy.HistoricalLigatures. Ligatures must be present in the font file for you to make them visible with the Typography object.

Swashes are decorative elements of characters associated with calligraphy. Extended serifs and strokes on existing characters may be part of your OpenFont file. To enable a Swash on a character set Typography.StandardSwashes=”1”. When a standards Swash doesn’t result in an agreeable result setting Typography.ContextualSwashes=”1 for that character is also an option.

OpenType has so many positions for characters available, that Stylistic Alternative characters are at your disposal. To enable an alternative character, set the Typograhy.StylisticAlternates property. Random use of alternatives is possible when you specify Typography.ContextualAlternates=”True”, a great way to help a script font in suggesting true handwriting. A font may also contain AnnotationAlternates. These are Glyphs in circles, squares, parentheses, diamonds or rounded boxes used for annotation of images of illustrations. In code-behind this index can be set with Typography.AnnotationAlternates.

Some characters in a font may be designed to be used together, because they look better next to each other or work together somehow. These characters are combined in a stylistic set and a maximum of 20 of these sets may be set in code-behind.

Numerical features of OpenType include Typography.Fraction=”Slashed” or Typography.Fraction=”Stacked”, old style numerals with Typography.NumeralStyle=”OldStyle” inside a Run tag and Tabular or Proportional alignment with Typography.NumeralAlignment=”Tabular” and even, where available, a slashed zero using Typography.SlashedZero=”True”.

Here’s the XAML I used for the image at the beginning:


<StackPanel Background="White" Margin="0,0,0,0">
<TextBlock FontFamily="Adobe Caslon Pro" FontWeight="Normal" TextAlignment="Center" FontSize="200" Typography.StandardLigatures="True">
<Run FontStyle="Italic" Typography.StylisticAlternates="1">fi</Run>
<Run Foreground="Red" FontStyle="Italic" Typography.StylisticAlternates="1">fl</Run>
<Run FontStyle="Italic" Typography.StylisticAlternates="1">ff</Run>
</TextBlock>
<TextBlock FontFamily="Adobe Caslon Pro" FontWeight="Normal" Margin="0,-150,0,0" TextAlignment="Center" FontSize="200" Typography.StandardLigatures="True">
<Run FontWeight="Normal" Typography.StylisticAlternates="1">fi</Run>
<Run FontWeight="Normal" Typography.StylisticAlternates="1">fl</Run>
<Run FontWeight="Normal" Typography.StylisticAlternates="1">ff</Run>
</TextBlock>
<TextBlock FontFamily="Adobe Caslon Pro" FontSize="24" Margin="0,-125,0,0" TextAlignment="Center">
<Run Text="Superscript: M"/><Run Foreground="Red" Text="2" Typography.Variants="Superscript"/>
<Run Text="Subscript: H"/><Run Foreground="Red" Text="2" Typography.Variants="Subscript"/><Run Text="O"/>
<Run FontStyle="Italic" Text="Fraction: 8"/><Run Foreground="Red" FontStyle="Italic" Text="1/2" Typography.Fraction="Slashed"/><LineBreak/>
<Run Text="CAPITALS" Typography.Kerning="True"/>
<Run Text="SmallCaps" Foreground="Red" Typography.Capitals="SmallCaps"/>
<Run Text="AllSmallCaps" Typography.Capitals="AllSmallCaps"/><LineBreak/>
</TextBlock>
</StackPanel>

Also check out Silverlight 5 OpenType Support from Pete Brown at 10REM.NET.

Njoy!

Photoshop in METRO style 2: Filters

The comments on the previous post got met re-reading the existing documentation for METRO Style Apps. It appears the content of http://msdn.microsoft.com/en-us/windows/apps is quite different when you follow the HTML5/CSS/JS path from when you follow the C++/C#/VB/XAML path. Both are far from complete and one has more complete details on specific subjects than the other. For example, the part where controls are redesigned is much more complete in the XAML section, but the general UI guidelines is more complete in the HTML5 section…

Following new insights on how to design a UI for Photoshop in METRO style I set out on creating a few new screens. Naturally time constraints don’t help in investigating this interesting Style Exercise further. I would have liked to present more screens than these two, but decided to publish this result anyway to keep a conversation going.

The Filters Gallery is one of the most elaborate dialog boxes in Photoshop. It allows you to access all filters possible and determine specific settings for filters and judge the results in the dialog itself. Recreating a Metro Style version of this dialog seemed like an interesting challenge.

The idea was to try out On-Canvas controls. These are controls that are not tucked away in an app bar at the bottom of the screen or a controls area at the top of the screen. My issue with them is that they obscure the image that you are trying to edit. I think this doesn’t help in the image editing process. I decided on a Semantic Zoom as Reidar suggested in his comments. I also wanted to show the effect of a filter on the actual image on the screen.

The Filters Gallery screen show all filters in a specific group:

PhotoshopInMetroStyle06Small
Click to show a full screen image…

It has no use showing these filter effects on the actual image beneath them, because some would only show the blue sky. No effect would be visible in most cases. I opted for a small version of the current image with the filter applied in a GridView, with the title of the filter below. The title of the group is at the top of the screen. Swiping left or right or using the arrows left and right allow you to show the other groups of filters.

The Filter Detail screens will show the filter applied to the image:

PhotoshopInMetroStyle05Small
Click to show a full screen image…

Swiping would show the next filter in the group applied to the image. I’ve inversed the Overlay, this way the filter is applied to the visible part of the image and you can judge the effect of the filter correctly.

Three sliders (common to most filters in the Photoshop Filter Gallery) are show over the filtered image. They are minimalistic as they don’t show any value, but the effect of changing them should be visible immediately. An issue here is contrast: what if the image is white or black behind the Slider controls? The Check icon that is frequently used in Windows Phone and Windows 8 Metro Style apps is below the image to Apply the filter to the current image. To remove it, usually a similar Trashcan icon is used. But it is unclear as to where that icon would show up in this design.

I see how so-called On-Canvas controls can help in the design of Metro Style UI’s. In this case the image below the controls is important and should ideally be visible all the time. I like the way the filter effect is visible on the image right away and changing the setting would should the effect on the image at once. This comes closer to Direct Manipulation…

Njoy!

Photoshop in METRO style

Yes, I know that Photoshop is a software program that is so complex that is unlikely it will ever be refurbished into Metro style. But as a Style Exercise for using the design language it is an obvious choice. The goal of the exercise is to find the limitations of the Metro style, if any. Trying to recreate the Photoshop UI in Metro style seems like a foolproof test to find these limitations. Here are the result:

PhotoshopInMetroStyleSmall01PhotoshopInMetroStyleSmall02

PhotoshopInMetroStyleSmall03PhotoshopInMetroStyle04Small

You can click these thumbnails to view the 1366 x 768 px PNG files. I exported them from Expression Design, a vector drawing tool from Microsoft that allows you to export XAML (or PNG) easily. A side effect of this is that not all icons are pixel perfect: they are generated from vector illustrations.

Now, Photoshop is mouse and keyboard driven software. It uses a Toolbox, Palettes, a Command bar and Menu’s heavily. It is questionable if Photoshop would be usable on a slate or a tablet. In fact, I have tried to use it on my tablet pc once and it is not really workable in tablet mode. You miss all the keyboard short-cuts and modifier keys while doing mouse operations on the pixels. It simply doesn’t work. For Photoshop to work on a slate or a tablet is has to be redesigned from the ground up.Is Full screen editing of Photo’s using a touch interface valuable at all? Is it doable?

Metro is the style, or design language, introduced with Windows Phone 7 and is growing in momentum, because it is used as the UI style for the Phone, Xbox and the upcoming version of Windows called Windows 8. If you don’t know anything about the Metro style, Dennis Vroegop has a blog post that sums up the characteristics of the Metro design language. Metro will be hard to ignore in the coming years as these systems grow in importance. My concerns with Metro are firstly that is it a Style and styles are known to become outdated in about three years. Since Windows 8 will not see the light of day for about a year or so, this style will have to be interesting for at least five years from now. Will it live up to that? That is very hard to predict, let alone to test. My other concern is that Metro will not be versatile or flexible enough to accommodate all necessary UI design demands. Will it be possible to build any user interface you can come up with in this Metro style? Now this one can be tested today. That is what this Style Exercise is all about.

General aspects of Metro is that it is an interface for touch screens, like the ones in tablets and slates. Contrary to web pages in browsers, you navigate mainly in a horizontal direction by swiping the screen from the right to the left. It uses lots of single colored icons in circles. In Windows Phone these icons are located in Tiles, squares that represent and app, or in an application bar at the bottom of the screen. Areas are flat, so no gradients, no bevels and no borders. Is transparency allowed in Metro? I’ve seen apps that use it, the Weather app in the Windows 8 Preview for example. I will use it here too.

It may be good to realize that the left side of the screen is reserved for the OS. You can access the “BackStack” of applications by swiping from the left into the screen. As far as I know an app cannot have its own BackStack. Previously started apps will appear from the left and fill the screen. Also, the right side of the screen is reserved by the OS. Swiping in from the right into the screen initializes the “Charms” the allow applications to take part in system wide Searching and Sharing, access the Start Screen from the software and reach Devices and Settings. It is organized around your thumbs when they are over the screen vertically centered at the sides of your tablet.

Inspiration for these designs were the Window Phone 7.5 interface and the several apps that came with the Windows 8 Developers Preview. Especially Internet Explorer 10 in Metro style seems to be thought through really well. Some other apps inspired the solutions in this design while others only convinced me that their solution was not mine. Stacking icons in an app bar vertically is one of them.

In executing this exercise I obviously came across many questions. That was the point of it all: to see how far you can go. One of the no brainers was the choice of fonts. Segoe UI is the default font for Windows application from the Vista version on. It is a light an open font and I think it is beautiful. It has seen various incarnations, like a special version for Windows Phone, but for Windows 8 the standard Segoe UI seems to be used. It comes in the styles Light, SemiLight and SemiBold. I’ve used it for the Splash screen, replacing the Bold Adobe Gothic Std B. It is also the font of the titles of panels in the top bar in the screens. Finally I used it as a title in the picture with the Layer palette together with a DropShadow (that is certainly not Metro style), just to show a design for the Blending Options in the Layers palette.

PhotoshopInMetroStyleSmall01The Splash Screen

When you start a Windows 8 application, it will show a full screen animated splash screen. It is one of the characteristics of a Windows 8 Metro Style application. It has no other function than to identify the application and to give the application enough time to show the basic UI. Apart from the typography in Segoe I’ve added the Adobe logo in a Tile. Tiles are one of the typical screen elements in the Metro style. When the application is loaded the UI replaces this start screen. I is only visible for a second or so, but still it represents an important part of the Metro style experience. I actually used a gradient here even though it is not Metro style.

PhotoshopInMetroStyleSmall02The File Menu Screen

An obvious place to start is the file menu. Since the left and right side cannot be used, information is placed at the top and the bottom of the screen. The menu is moved to the application bar, which seems the right spot for these option. The application bar can be contextual and it should be in this design, because I also use if for the Toolbox icons. Just how you change your context from Menu to Toolbox is an unsolved issue so far. Icons can have a popup above the app bar. In Windows 8 Developers’ preview it is not possible to see whether an icon has a popup like that. I’ve added a small triangle above the icons for that. I reserve the possibility to swipe the app bar to the left or right, but in this screen the left and right buttons are disabled. The icon for New is a plus sign in Metro, other than in Photoshop were it is a document icon. I double the icon at the bottom right with the one next to the open files in the top navigation bar, but I could also leave that one out. The Save file popup needs a lot more options to be more like the current one.

One question is how to navigate to other menus options or other menus for that sake. Since Metro originated from Windows Phone 7, I image that the Pivot control could also be used in Windows 8. But it is not available in Visual Studio 11 Express for Windows Developer Preview. Anyway, I use that control to access other menu options. Tapping the Document, Import, Export or Print header would animate the item in the top bar to the left and show any necessary UI for that option in the blue bar at the top of the screen.

PhotoshopInMetroStyleSmall03 The Toolbox and Palettes Screen

Of course the Toolbox of Photoshop must be taken care of. Photoshop has a relative large toolbox, with many options in fly-out menus on several of the toolbox buttons. My solution is to put these icons in the app bar. You can swipe from the bottom of the screen up to access the toolbox. I’ve seen screens that stack rows of icons in the app bar, but that would take a large amount of screen real estate, and I think is not acceptable for software that should show the image that is manipulated and not the UI (Content not Chrome is one of the Metro Principles). This makes the toolbox horizontal, but looping round, so left is navigating back, right is navigating forward through the groups in the Photoshop toolbox. One axiom for tools is to keep them close at hand. I realize that this setup will not make them accessible with one tap. With some experience swiping the toolbox icons to the left or right make make accessing specific tools good enough. Fly-outs are dealt with by showing a popup with those options, with the current selection highlighted. An indication for an expanding panel is above the icon for the tool.

Normally Photoshop has Tool Palettes at the right hand side of the screen. Since this side is off limits, I have placed it at the top using the same Pivot style shown earlier. You can swipe from right to left to show more palettes and their necessary UI. One issue I run into is that the palettes use lots of very small icons. In a touch environment icons smaller than 30 pixels are unworkable. In Windows Phone 7 the smallest icons are 24 pixels, but always separated from other UI elements, so there is room to select them without accidently activating other icons. I think the small tiles in the Swatches palette may have this problem and the sliders in the Navigation and Color palettes may be too small to handle comfortably. UI for touch needs a lot of space.

PhotoshopInMetroStyle04SmallThe Layers Screen

I’ve run in serious issues with Layers Palette. Intrinsically layers are stacked vertically, but there is really no way to do that in Metro: the right side of the screen cannot be used. Your only option really is to place it at the top like the other tool palettes. The Layers palette is very important in Photoshop and it has many features and corresponding UI elements that need a place on the screen. One solution is to separate the options for all layers from the options for a specific layer as I’ve done in this screen. The first area under the Layers header shows the Layer Effect, Lock, Opacity and Fill options that are at the top of the layers palette in Photoshop now. Also the icons to link layers, a effects, masks, adjustments and to group layers are placed in this area. It should function about the same as it does in Photoshop now. Other icons that affect a specific layers, like the eye, lock and trashcan icons, are grouped with a layer thumbnail. These are “stacked” horizontally with an option to add a new layer after the last (second) thumbnail. In a horizontal layers palette, the question is which layer is above the other. It would be intuitive to show them vertically stacked. Currently in Photoshop effects are show below the layer with an option to hide all effect or a specific effect. In this design the effects are shown to the right of the thumbnail.

Issues I didn’t solve

Closing a Tab in Internet Explorer 10 is done using a X icon. Deleting an item in Windows Phone 7.5 is usually done using a context menu that shows up when you tap-and-hold an item. This is why I needed a trashcan icon even though Delete icons are not available in Metro.

Panorama or Pivot navigation is not included in Win8 Metro style. Navigating a screen without these controls will become very hard very quickly. I think Metro apps will need this type of navigation in the app bar and in the top bar. When you use the app bar and the top bar for different things contextually, it is not at all clear how you change the context from menu to toolbox or from Open documents to Palettes. Navigating around Metro apps is not solved adequately using the existing apps, nor this style exercise.

None of these screens show Dialog boxes. At this moment it is a mystery to me how that kind of functionality should be implemented in Metro style. SnapView is the option to divide the screen in two thirds for your app and one third for another app. But SnapViews are for other apps, not for dialogs in your own app. You can’t use them like a palette. Dialogs are a given in current Window applications, but there is no real solution for presenting these options in a Metro style app.

If you have any comments, please let me know!

Njoy!

A Style for the Silverlight CoverFlow Control Slider

I’ve been working with the Silverlight CoverFlow Control lately and think the default Silverlight Slider at the bottom of the screen sticks out like a sore thumb:
SilverlightCoverFlowControl
So, I’ve create a new Style for the Slider, resembling the original Cover Flow slider.
CoverFlowSlider
This is a Style for a Silverlight slider control, meant to be used on a black or dark background. It has rounded sides for the Track as well as the Thumb. The Track looks like it is lower because of the inner shadow at the top. The Thumb also has a shadow, but its surface is flat. This is only the Horizontal Template, so nothing will show when it is used vertically.
The Project File is on my SkyDrive, but the Style is simple enough to reproduce it here…
De XAML is a regular Slider with a Style:
<Slider Style="{StaticResource CoverFlowSliderControl}" Maximum="100" LargeChange="10" SmallChange="1" Value="50"/>
The Track has its own style, used in the ControlTemplate later on:
<Style x:Key="CoverFlowSliderTrackStyle" TargetType="Rectangle">
 <Setter Property="RadiusY" Value="12" />
 <Setter Property="RadiusX" Value="12" />
 <Setter Property="StrokeThickness" Value="2"/>
 <Setter Property="Stroke">
 <Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 <GradientStop Color="#FF202020" Offset="0"/>
 <GradientStop Color="#FF404040" Offset="1"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 <Setter Property="Fill">
 <Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
 <GradientStop Color="Black" Offset="0"/>
 <GradientStop Color="#FF202020" Offset="0.4"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 </Style>
The Thumb is no more than two rectangles, but both have their own Style:
<Style x:Key="CoverFlowSliderThumb" TargetType="Rectangle">
 <Setter Property="RadiusY" Value="10" />
 <Setter Property="RadiusX" Value="10" />
 <Setter Property="StrokeThickness" Value="2" />
 <Setter Property="Stroke" Value="#FF4B4B4B"/>
 <Setter Property="Fill">
 <Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.43,-0.02">
 <GradientStop Color="#FF252525" Offset="1"/>
 <GradientStop Color="#FF787878" Offset="0"/>
 <GradientStop Color="#FF424242" Offset="0.622"/>
 </LinearGradientBrush>
 </Setter.Value>
 </Setter>
 </Style>
 <Style x:Key="CoverFlowSliderThumbCover" TargetType="Rectangle">
 <Setter Property="RadiusY" Value="8" />
 <Setter Property="RadiusX" Value="8" />
 <Setter Property="StrokeThickness" Value="0" />
 <Setter Property="Fill" Value="#FF404040" />
 <Setter Property="Margin" Value="3" />
 </Style>
 <Style x:Key="ThumbStyle" TargetType="Thumb">
 <Setter Property="Margin" Value="0,2" />
 <Setter Property="Width" Value="50" />
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="Thumb">
 <Grid Margin="2,0">
 <Rectangle x:Name="Thumb" Style="{StaticResource CoverFlowSliderThumb}"/>
 <Rectangle x:Name="ThumbCover" Style="{StaticResource CoverFlowSliderThumbCover}"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 <Setter Property="Effect">
 <Setter.Value>
 <DropShadowEffect Direction="360" Opacity="0.5" ShadowDepth="3"/>
 </Setter.Value>
 </Setter>
 </Style>
There are two Repeatbuttons to the left and to the right of the Thumb. They are invisible and use the same Style:
<Style x:Key="RepeatButtonStyle" TargetType="RepeatButton">
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="RepeatButton">
 <Grid>
 <Rectangle RadiusY="6" RadiusX="6" StrokeThickness="2" Fill="Transparent"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
Finally, here is the Style for the Slider Control with the ControlTemplate that uses all Styles above…
<Style x:Key="CoverFlowSliderControl" TargetType="Slider">
 <Setter Property="Height" Value="24" />
 <Setter Property="Template">
 <Setter.Value>
 <ControlTemplate TargetType="Slider">
 <Grid x:Name="HorizontalTemplate">
 <Grid.ColumnDefinitions>
 <ColumnDefinition/>
 <ColumnDefinition Width="Auto"/>
 <ColumnDefinition/>
 </Grid.ColumnDefinitions>
 <Rectangle x:Name="Track" Grid.ColumnSpan="3" Style="{StaticResource CoverFlowSliderTrackStyle}"/>
 <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Style="{StaticResource RepeatButtonStyle}"/>
 <Thumb x:Name="HorizontalThumb" Grid.Column="1" Style="{StaticResource ThumbStyle}"/>
 <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Style="{StaticResource RepeatButtonStyle}"/>
 </Grid>
 </ControlTemplate>
 </Setter.Value>
 </Setter>
 </Style>
The result is a Cover Flow Slider that nicely fits in with the rest of the Cover Flow Control:
CoverFlowResult
Njoy!
Check out the Comments below about why this picture is up here…
Slide the Slider
Download the source for this Slider

When dynamically creating objects in code, use Styles

When you need to create objects in code, you can actually build up the entire look and feel in code.

This results in large blocks of code that do nothing special, but set the visual properties of an object:

Grid grdNow = new Grid();

 

//create Circle

Ellipse cirNow = new Ellipse();

cirNow.Height = 25;

cirNow.Width = 25;

cirNow.VerticalAlignment = VerticalAlignment .Center;

cirNow.HorizontalAlignment = HorizontalAlignment.Center;

cirNow.Fill = new SolidColorBrush (Colors.Red);

cirNow.Margin =new Thickness(5,5,5,5);

 

//create TextBlock

TextBlock txtNow = new TextBlock();

txtNow.VerticalAlignment = VerticalAlignment.Center;

txtNow.HorizontalAlignment = HorizontalAlignment.Center;

txtNow.Foreground = new SolidColorBrush(Colors.White);

txtNow.FontWeight = FontWeights.Bold;

txtNow.FontSize = 14;

txtNow.Margin =new Thickness(0,0,0,2);

txtNow.TextWrapping = TextWrapping.NoWrap;

txtNow.Text="now";

 

//add objects to grid

grdNow.Children.Add(cirNow);

grdNow.Children.Add(txtNow);

 

The drawback of this is that it is a lot of code and hard to maintain. The looks are integrated in the code and that is not what you want.

In Silverlight and WPF there is a standard model to separate the code from the look and feel of the application you’re building. It’s called XAML.

XAML is a markup language that’s easily generated by code and easily maintained by non-programmers with tools of even by hand.

When you are creating objects on the fly you should use Styles. These determine the way the object looks. Only keep the properties necessary for dynamically placing your object on the screen in your code:

Grid grdNow = new Grid();
Ellipse cirNow = new Ellipse();
TextBlock txtNow = new TextBlock();

cirNow.Style = App.Current.Resources["NowStyle"] as Style;
txtNow.Style = App.Current.Resources["NowTextStyle"] as Style;

grdNow.Children.Add(cirNow);
grdNow.Children.Add(txtNow);

This is a lot less code. Below is the markup that you shouldn’t have to worry about when you use Styles in your C# code.

You can even just create an empty Style block in App.xaml: <Style x:Key=”NowStyle” TargetType=”Ellipse” /> and thus use it with default values.

The look of these dynamically created objects can be changed later on or even be themed using a separate ResourceDictionary. A designer can come in at any time and change these properties using a Tool like Expression Blend.

<Style x:Key="NowStyle" TargetType="Ellipse">
    <Setter Property="Height" Value="25"/>
    <Setter Property="Width" Value="25"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Fill" Value="Red"/>
    <Setter Property="Margin" Value="5"/>
</Style>
<Style x:Key="NowTextStyle" TargetType="TextBlock">
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Margin" Value="0,0,0,2"/>
    <Setter Property="TextWrapping" Value="NoWrap"/>
    <Setter Property="Text" Value="nu"/>
</Style>

So, when you find yourself creating a lot of C# code to set the visual properties of a dynamically created objects: Stop!

Create a Style in XAML and refer to that Style instead.

Njoy!

DEMO: 5 gotchas combining SketchFlow, Visual Design and Silverlight Banners

Recently we created a demo. It was in SketchFlow, but it was not really a sketchy demo. Some screens are in the typical SketchFlow look, but for three important scenarios we’ve created a Visual Design. For the Homepage and a Product page in the demo we even created a Silverlight Banner, including the navigation inside the banner.

We’ve actually presented it inside the SketchFlow Player with panels collapsed. We gained the ease with which to connect the screens, in combination with the Behaviors the make parts of the demo interactive. And we combined real Silverlight applications inside the SketchFlow demo and they worked just fine. This is a demo that is meant to impress a customer.

I’ve collected some some gothas we run into when creating this demo:

  1. Large images are not include as a Resource, but as Content. In the Blend Options screen you’ll find a slider setting the limit for large images. You’ll get a warning when you import an image larger than that limit. You can choose to include the image as Content, not as Resource. This will result in the image not showing in your SketchFlow Player. So be sure to include all images in a subfolder in the MyProject_Screens folder and make sure the path in the Image Source is correct. When images show up in the root of a deployed SketchFlow project, you’re in trouble…
  2. When you use a Silverlight application inside a SketchFlow Page, you can use the NavigateToScreenAction inside your UserControl, but screens will not show up in the list in the Properties Panel. It has no use to create a reference to the SketchFlow project. You can add the correct path manually. You can find the names of the Screens in the Projects Tab.
    <i:EventTrigger EventName="MouseLeftButtonDown">
        <pi:NavigateToScreenAction TargetScreen="MyProject_DemoScreens.Screen_1"/>
    </i:EventTrigger>
  3. You can use Components as Masterpages. Remove all elements in the Visual Design that change between pages and put the rest in a Component screen. This allows you use this UserControl as the first element of a page. You can create separate boxes with content on the page to link to different pages in the prototype.
  4. Alternatively, use HyperlinkButtons with NavigateToScreenActions Behaviors to create “HotSpots” on a background image if you want to navigate to different screens. You’ll have to edit the HyperlinkButton ControlTemplate to remove the FocusVisual that appears when you click the control. Then they are invisible, but still catch the Click Event for the NavigateToScreenAction. It will navigate to the screen you enter as a Target.
  5. Use SketchFlowAnimation or GoToStateAction Behaviors for interactive elements on the page. This way you can use highlights and let pop-ups appear and disappear. SketchFlow Behaviors rock!

Njoy!

Using Silverlight 4 StringFormat for Data Binding a TextBlock to a Slider with no decimals showing

In Silverlight 4 it is possible to use the StringFormat extention to format output from Data Binding. I was always looking for a way to remove the trailing decimals from a TextBlock that was bound to a Slider. Today I found the answer:

<TextBlock x:Name="txtWeight" Text="{Binding Value, ElementName=sldWeight, StringFormat=\{0:n0\}}"/>

This says: Use the result as a number with zero decimals.

Use StringFormat=\{0:n1\}} if you want one decimal and StringFormat=\{0:n2\}} for two decimals. You can also use StringFormat=p for Percentage, StringFormat=c for Currency…

The Designer Silverlight site has more details…

Njoy!

Create a Button Control from an Expression Design drawing

I’ve placed a PushButton Design file in the Expression Gallery. A thousand people have actually downloaded the .design file. Only one question rose, asking how to implement that drawing as a Button Control. Here are the steps to do that:

PushButton

In Design:
– Click the square on the Layer named PushButton to select all elements
– Select File/Export and in the dialog choose XAML Silverlight 4 Canvas, Leave Text Editable, set Live Effects to Convert to XAML,  call it PushButtonNormal.xaml, remember where it is located after export. Click Export All.
– Click the square on the second Layer named PushButton Pressed to select all elements
-Select File/Export and use the same settings and location. Name it PushButtonPressed.xaml. Click Export All.

In Blend:

– Start a new Blend Silverlight Application, Call it PushButtonControl
– Open MainPage.xaml in the Code Editor using View/Active Document View/XAML View.
– Create a closing the tag for the Grid Named LayoutRoot.
– Open the PushButtonNormal.xaml file in Notepad. Cut the inner Canvas named PushButton, Paste in inside the LayoutRoot Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Open the PushButtonPressed.xaml file in Notepad. Cut the inner Canvas named PushButton_Pressed, Paste it under the PushButton Canvas and remove Width, Height and Canvas.Left and Canvas.Top.
– Resolve naming conflicts for Ellipses, you can only have objects with unique names.
– Switch to Design Vieww using View/Active Document View/Design View.
– Right Click the PushButton Layer in the Objects and Timeline Panel. Select Group into…/Grid from the context menu.
– Right Click the PushButton layer in the Objects and Timeline Panel. Select Make into Control… from the context menu.
– In the dialog select the Button control and name it PushButtonControl. Click OK.
– This will create a Button Control and open ControlTemplate Editing Mode. A ContentPresenter is added to the Button. Because the PushButton container is a Canvas you have to reposition this using the Left and Top properties.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Right Click the PushButton_Pressed layer in the Objects and Timeline Panel. Select Cut from the context menu.
– Left Click the [Grid] layer in the Objects and Timeline Panel. Select the [Grid] button in de Breadcrumbs at the top left of the Artboard to go into Template Editing Mode again.
– Right Click the [Grid] layer and select Paste from the context menu. This will place the Pressed state of the button over the Normal state. Remove the top most Ellipse. This is the transparent shadow and should not show twice. Drag the PushButton_Pressed layer up so it is above the [ContentPresenter] layer. The word Button should appear.
– Set the Opacity Property of PushButton_Pressed to Zero (0%).
– Now you should have a [Grid] with 3 layer in it: PushButton, PushButton_Pressed and [ContentPresenter]. The Normal state should be visible. The word Button should be visible in it.
– Open the States Panel (Window/States should have a check before it) and select the Pressed State. The Pressed state recording should go on, showing a red frame around the Artboard.
– Set the Opacity of PushButton_Pressed back to 100%.
– Click the Base layer at the top of the States Panel and switch between the Pressed and Base state. Make sure the Buttons overlap exactly.
– Click the [Button] button in de Breadcrumbs at the top left of the Artboard to go out of Template Editing Mode.
– Select File/Save all
– Press F5 to build the project, so you can test it.

Optimization would include replacing the Canvases with Grid containers while keeping all Ellipses in their places. This would allow for better control of button size and placement of the ContentPresenter.

Njoy!

Easy as Pie: Percentage Pie-Charts with the Expression Blend 4 Pie Shape

During the evolution of Silverlight and Expression Blend we’ve had to create Pie Charts for various projects. Often these were to illustrate the state of a percentage value in the application. Thus we’ve build our own a few times over. Now, with the new Pie Shape in Expression Blends 4 this has become a no-brainer. Here´s how:

 PieShape01  PieShape02 

  1. Create a new Silverlight Application project in Blend 4
  2. Open the Asset Panel and select the Shapes category
  3. Select the Pie Shape
  4. DoubleClick the Pie Shape at the bottom of the ToolBox so it is added to the Artboard with default values of StartAngle 90 and EndAngle 360
  5. Name it Pie1 in the Objects and Timeline panel. This way you can use code to access its properties.
  6. If you want you can give it a Fill Color to see it better.
  7. Add an event handler called UpdateArcEndAngle on the MouseLeftButtonUp event of the LayoutRoot Grid.
  8. In the Code Behind file (MainPage.xaml.cs) add a line of code to update the StartAngle of the Arc:private void UpdateArcStartAngle(object sender, MouseButtonEventArgs e)
    {
        Pie1.StartAngle += 45;
    }
  9. Build the project and click the Pie to update it with 45 degrees each time you click it. When the Pie has reached the 360 degrees, it with start again at 45.

Of course, you can style a Pie Shape any way you want. Now it is easier than ever to show a percentage Pie Chart…

 Pie01  Pie02

 Pie03

Njoy!

Focus on FocusVisualElement in Silverlight buttons

The FocusVisualElement is the equivalent of the dotted line that you see in Windows interfaces and on browser pages around an object on the page that “has the focus”. This means that it will receive the input a user is giving with a mouse, keyboard or touch. Actually, web designers don’t really like these dotted lines, because they degrade the look of their interface. It may disturb the carefully crafted look and feel of the page. But this FocusVisualElement has a function.

Normally I’m not so eager to use buttons as controls for showing examples. It usually doesn’t lead to an interesting visual result. As a designer my examples should look more interesting. Fortunately in Silverlight you can create other shaped and colored buttons easily using the Make into Control… option in the contextmenu of graphic elements gathered in a Grid. In this case the I’d like to focus on the FocusVisualElement element, so Buttons are my first choice.

In Silverlight the FocusVisualElement is an actual graphical element that is part of a control’s ControlTemplate. In Blend you can access this template by selecting Edit Template/Edit Current (I’d really like a keyboard shortcut here, but there isn’t, yet).

In template editing mode you can find the FocusVisualElement in every Silverlight control. It’s shape depends on the type of control, but in a Button it is a light blue Rectangle. By default this Rectangle has its Opacity set to Zero and the Focused State makes it visible. This leads to the notion that you can change the looks of this Focused State to anything you’d like:

UnFocused

  LinkFocused

ButtonFocused2  ButtonFocused

In these images I show how a HyperlinkButton could get a Glow Effect when it is focused. But there’s no reason to leave it at that. The oval Button plays an animation when it is focused. Apart from the Opacity, a TranslationX, Scale and a PointAnimation is applied to a semitransparent Ellipse when the Focused State is triggered. This makes the Ellipse move van left to right. The animation is AutoReversed and repeated Forever.

You can use the VisualStateManager to create the animations. You can also show the TimeLine and create an Storyboard that you paste in de <VisualState x:Name="Focused" /> Visual State. When you create a Button using Make into Control… you can copy the Visual States out of the ControlTemplate of a normal Button and use them in your own.

Make sure your animation for the Focused State of controls are low-key. You don’t want to irritate your users with flashing graphics only because a control is focused!

Working code from these Buttons is on my SkyDrive

Njoy!

Overlapping TabItems with the Silverlight Toolkit TabControl

OverlappingTabs

Standard TabItems are not overlapping, but designers like them to. You may encounter a design with overlapping tabs that you have to create and implement. This is not a simple task, certainly when the tabs have a tapered side that overlaps the tab to the right of it. The Z-Index of these tabs are opposite to the standard layout.

Control Vendors have custom versions of a TabControl, that use properties for overlap. The Toolkit TabControl currently doesn’t support overlapping tabs, but by updating templates and a bit of C# code you can get the same effect. Here’s how it’s done:

Creating an overlapping tab in Expression Design:

OverlappingTabsCreate01

  1. Start Design, start a new file with a size of 640 x 480 pixels.
  2. Add a rectangle, 50 pixels wide, 25 pixels high and make its CornerRadius 3 pixels. Make sure the Rectangle is selected.
  3. Choose Object. Convert Object to Path. This way you can change the vertices of the shape.
  4. Select the Direct Selection tool (second from the top in the Toolbox) and select the bottom right two vertices by dragging a selection area around them.
  5. Drag the two vertices to the right, about half the width of the rectangle. Hold the Shift key to constrain the translation horizontally.
  6. Zoom in to the right hand side of the shape. With the Pen Tool selected, at the right bottom corner delete the second vertice from the bottom by clicking on it.
  7. Hold the Alt Key and click the other vertice to make it a rounded point (fig. 1).
  8. Select the Direct Select Tool and move the second vertice from the top to the right. Select the Pen Tool, hold the Alt Key and drag from this anchor point in the direction of the line of the tab, so the sharp corner becomes smooth.
  9. Using the Direct Selection Tool, move the left vertice at the left bottom corner down to the bottom of the tab, delete the other by clicking on it with the Pen Tool selected (fig. 3).

OverlappingTabsCreate02

figure 1: Create a round point at the bottom right corner.

OverlappingTabsCreate03

figure 2: Create a smooth corner at the top right corner.

OverlappingTabsCreate04

figure 3: Remove a anchor point to create a straight corner at the lower left corner.

Double click the Magnifying Glass Icon at the bottom of the toolbox to show the entire drawing. It helps to place the top right corner of the tab at the 0,0 coordinates using the Action Bar at the bottom of the screen. Check if the Foreground color is white and the border is black. Make sure the tab is selected, showing its bounding box and transformation handles, and select Edit, Copy from the menu.

Implementing overlapping tabs in Expression Blend:

  1. Start Blend, Begin a new Silverlight project, Open MainPage.xaml.
  2. Open the Asset Panel, enter Tab in the search box, select TabControl and drag a rectangle on the Artboard. You’ll get a TabControl with two tabs. A reference to System.Windows.Controls.dll is added to the project references and a namespace xmlns:controls is added to your MainPage.xaml file.
  3. The TabControl is a container for the TabItems. It has a four Grids to place tabs on all sides of the tab area. Tabitems are placed in these grids. The TabItems consist of a Header and a Grid as you can see in the Object and Timeline Panel when a tab is selected. Right click a Tab and select Edit Template, Edit a Copy… from the context menu, choose a name and a location for the ControlTemplate and click OK.

OverlappingTabsImplement01

figure 4. Creating a TabItem ControlTemplate

  1. You’ll enter Template Editing Mode for the TabItem. The Objects and Timeline panel shows eight grids and a FocusVisualElement Border. For each of the four sides (Top, Bottom, Left, Right) you’ll see a Selected and a Unselected Part. Control Parts are recognizable by the green icon next to their name. You can also find them in the Parts Panel.
  2. Locate the TemplateTopSelected Grid in the Object and Timeline Panel and open all the borders and grids that are part of it by clicking the small triangles in from of it. Drag the ContentControl named HeaderTopSelected up to the TemplateTopSelected Grid so it moves to the same hierarchical level. Now you can delete the rest of the content of the TemplateTopSelected Grid. Also delete all the animations that reference those shapes if they are not deleted by Blend.
  3. With this Grid selected, choose Paste from the edit menu. This will place the tab you created in Expression Design into the grid. Remove its Margins to make the tab fit inside the Grid.
  4. Drag the layer of the new Path up so it is placed right beneath the TemplateTopSelected Grid and above the Focus and Disabled visuals in the Objects and Timeline Panel. Move the HeaderTopSelected Content Control beneath the Path.
  5. Repeat Step 3 and 4 for the TemplateTopUnselected Grid. Make its Foreground a slightly darker color than the selected state of the tab.
  6. Set for both the TemplateTopSelected as the TemplateTopUnselected Grid the left margin to –20 pixels. This will ruin the bounding box placing in Blend, but move the tabs to the left at runtime.
  7. Make sure the Grid for the selected state of the tab has a Path at the bottom, that makes the connection with the tab area beneath it. It is important that a tab connects to the area that shows when a tab is selected.
  8. You may want to delete the FocusVisualTop border because it is rectangular and your tabs are not. Also remove any animations targeting this control.
  9. Scope up to the Control Level using the breadcrumbs at the top of the screen or the Return Scope to [UserControl] button at the top of the Objects and Timeline Panel.
  10. Right Click the TabControl and Select Edit Additional Templates, Edit Layout of Items [ItemPanel], Create New. Make sure it is a StackPanel with its Orientation set to Horizontal. Scope up to the Control Level.
  11. Right Click the TabControl (not a tab) and Select Edit Template, Edit a Copy… Give the System_Windows_Controls_Primitives:TabPanel a left margin of 20, but leave the other margins as they are: margin=”20,2,2,-1″ compensating for the negative left margin on the first TabItem.
  12. Use the Visual State Manager to create a state for a MouseOver that is a light gray between the selected and unselected Foreground colors. A transition time of half a second gives the right effect.

        <controls:TabControl x:Name=”TabControl” Width=”500″ Height=”100″
             Style=”{StaticResource TabControlStyle1}”
             ItemsPanel=”{StaticResource ItemsPanelTemplate1}”
             SelectionChanged=”TabControl_SelectionChanged”>
            <controls:TabItem x:Name=”Tab_1″ Header=”Tab 1″
                 Style=”{StaticResource TabItemStyle1}”>
                <Grid Background=”#FFE5E5E5″>
                    <TextBlock Text=”Area 1″ Margin=”20″/>
                </Grid>
            </controls:TabItem>
            <controls:TabItem x:Name=”Tab_2″ Header=”Tab 2″ 
                Style=”{StaticResource TabItemStyle1}”> 
                <Grid Background=”#FFE5E5E5″>
                    <TextBlock Text=”Area 2″ Margin=”20″/>
                </Grid>
            </controls:TabItem>
            <controls:TabItem x:Name=”Tab_3″ Header=”Tab 3″
                 Style=”{StaticResource TabItemStyle1}”>
                 <Grid Background=”#FFE5E5E5″>
                      <TextBlock Text=”Area 3″ Margin=”20″/>
                 </Grid>
            </controls:TabItem>
            <controls:TabItem x:Name=”Tab_4″ Header=”Tab 4″
                 Style=”{StaticResource TabItemStyle1}”>
                 <Grid Background=”#FFE5E5E5″>
                     <TextBlock Text=”Area 4″ Margin=”20″/>
                 </Grid>
            </controls:TabItem>
        </controls:TabControl>

Getting the ZIndex right

All this will create the right shape and states of the the TabControl, but the order of the tabs is still wrong. By default the first tab is selected and a right tab will overlap a left tab. With overlapping tabs this should be the other way around. Setting the Canvas.ZIndex property of the TabItems in XAML won’t help. The control is initialized with the wrong settings at runtime.

A little C# helps. Thanks to Rachel, who solved this problem in WPF, we can set the overlapping tabs in the right order when the SelectionChanged event of the TabControl is fired:

private void TabControl_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e)

    TabControl tabControl = sender as TabControl; 
    tabControl.Dispatcher.BeginInvoke( new Action(() =>
            UpdateZIndex(sender as TabControl)));
}

private void UpdateZIndex(TabControl tc)

    if (tc != null)
    {
        foreach (TabItem tabItem in tc.Items)
        {
            tabItem.SetValue(
                        Canvas.ZIndexProperty,
                        (tabItem == tc.SelectedItem ?
                        tc.Items.Count :
                        (tc.Items.Count-1) – tc.Items.IndexOf(tabItem)));
        }
    }
}

The UpdateZIndex method is invoked in a way that updates all the TabItems. This way a left tab will show above a right tab the way you want in overlapping TabItems.

OverlappingTabs

fig 5. Overlapping tabs have a reversed ZIndex.

Working code is at my SkyDrive

Joe Gershgorin has refactored the code to use a Behavior. This also supp0rts longer text in the headers. You can find his version at: http://www.bitspy.com/OverlappingTabs_Silverlight4.zip

Njoy!

QuoteFloat: Animating TextBlock PlaneProjections for a spiraling effect in Silverlight

[silverlight: http://members.chello.nl/s.dol/QuoteFloat.html]

QuoteFloat is an animation for TextBlock elements, inspired by the way the HTC Touch HD shows SMS Text messages. It moves the text up and rotates it at the same time resulting in a spiraling effect. It is done by giving the TextBlock elements a PlaneProjection each and animating the RotationY and GlobalOffsetY properties.

The TextBlock elements are positioned below the bottom of the Canvas. The Canvas has a Clipping Mask so no one will see them until the animation starts. The XAML looks like this:

<Canvas x:Name="cvsBg" Width="500" Height="155"
    Clip="M0.5,0.5 L499.5,0.5 L499.5,154.5 L0.5,154.5 z">
    <TextBlock x:Name="txt1" Text="Txt1" Canvas.Top="192"
        Style="{StaticResource TextBlockStyle1}">
        <TextBlock.Projection><PlaneProjection/></TextBlock.Projection>
    </TextBlock>
    <TextBlock x:Name="txt2" Text="Txt2" Canvas.Top="228"
        Style="{StaticResource TextBlockStyle1}">
        <TextBlock.Projection><PlaneProjection/></TextBlock.Projection>
    </TextBlock>
    <TextBlock x:Name="txt3" Text="Txt3" Canvas.Top="265"
        Style="{StaticResource TextBlockStyle2}">
        <TextBlock.Projection><PlaneProjection/></TextBlock.Projection>
    </TextBlock>
</Canvas>

I use two Styles for the two TextBlocks. Notice the second style is BasedOn, so it needs only to define the properties that are different from the first style. The Canvas.Top property is different for all the TextBlocks and defined inline in the XAML above.

<Style x:Key="TextBlockStyle1" TargetType="TextBlock">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Width" Value="400"/>
    <Setter Property="Height" Value="25"/>
    <Setter Property="FontSize" Value="21.333"/>
    <Setter Property="FontFamily" Value="Trebuchet MS"/>
    <Setter Property="TextAlignment" Value="Center"/>
    <Setter Property="Canvas.Left" Value="50"/>
</Style>
<Style x:Key="TextBlockStyle2" TargetType="TextBlock"
    BasedOn="{StaticResource TextBlockStyle1}">
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Canvas.Left" Value="200"/>
</Style>

The actual animations are quite repetative, being almost the same for all TextBlock elements. The crucial word here is almost: the animations differ for .2 seconds. Stopping the text is the natural result from easing out and the easing in the animation.

QuoteFloatStoryboard

<Storyboard x:Name="QuoteFloat" RepeatBehavior="Forever">
    <DoubleAnimationUsingKeyFrames
        BeginTime="00:00:00" Storyboard.TargetName="txt1"
        Storyboard.TargetProperty=
            "(UIElement.Projection).(PlaneProjection.RotationY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="90"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01.5" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="00:00:03" Value="-90">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseIn"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
… more animations

    <DoubleAnimationUsingKeyFrames
        BeginTime="00:00:00"
        Storyboard.TargetName="txt2"
        Storyboard.TargetProperty=
            "(UIElement.Projection).(PlaneProjection.RotationY)">
        <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="90"/>
        <EasingDoubleKeyFrame KeyTime="00:00:01.7" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
        <EasingDoubleKeyFrame KeyTime="00:00:03.2" Value="-90">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseIn"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
… more animations

The text was not set using code, but in Blend. It then uses a DiscreteObjectKeyFrame for the TextBlock Text property and uses the given String Value.

   <ObjectAnimationUsingKeyFrames
    BeginTime="00:00:00"
    Storyboard.TargetName="txt1"
    Storyboard.TargetProperty="(TextBlock.Text)">
        <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Technology requires design"/>
        <DiscreteObjectKeyFrame KeyTime="00:00:03" Value="Imagine users as very intelligent"/>
        <DiscreteObjectKeyFrame KeyTime="00:00:06" Value="No matter how cool you interface is,"/>
        <DiscreteObjectKeyFrame KeyTime="00:00:09" Value="Significant change"/>
   </ObjectAnimationUsingKeyFrames>

The Loaded event of the UserControl is used to start the animation in the MainPage CodeBehind file:

<UserControl x:Class="QuoteFloat.MainPage"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    Width="500" Height="155" Loaded="StartAnim">

 


private void StartAnim(object sender, System.Windows.RoutedEventArgs e)
{
    QuoteFloat.Begin();
}

Complete Blend project is on my SkyDrive…

Njoy!

Silverlight Togglebutton Push Pin Style with IsoStore

Now you can pin a full-screen app to a second monitor in Silverlight 4, you may want an UI control to facilitate this. In fact, what you need is a ToggleButton. And your ToggleButton has to be communicate it’s function. A Push Pin Style is a good solution for that.

This Push Pin Style for a silverlight (or WPF) ToggleButton is small, totally customizable and free :). It features tooltips to show the action you can do. The setting is stored in IsoStore and picked up the next time you start your app. The states are each represented using a canvas, so you can easily swap the visuals for your own if you want to.

PushPin

The XAML is simple:

<ToggleButton x:Name="btnPin" Style="{StaticResource btnPin}" Checked="pin" Unchecked="unpin" Content="" ToolTipService.ToolTip="Pin this"/>

Files are too large to include here, but I put the project on my SkyDrive.

Njoy!

Accessing Properties and Objects in Silverlight Datatemplates using Loaded and FindName

Accessing properties and objects in a DataTemplate is not as easy as you would think. Normally the Template is separated from the item that uses it. You can find the DataTemplate as a Resource, but you cannot use the VisualTreehelper on it.

DataTemplate dt = Application.Current.Resources[“TheDataTemplate”] as DataTemplate;
int count = VisualTreeHelper.GetChildrenCount(dt);

This leads to the error: Reference is not a valid visual DependencyObject.

The solution is to use the Loaded event of the outermost container, quite often a Grid and use FindName in the EventHandler to get to Objects inside the DataTemplate and to properties of those:

<DataTemplate x:Key=”TheDataTemplate”>
    <Grid x:Name=”TheGrid” Grid.Row=”0″ Loaded=”TheGrid_Loaded”>
        //Objects and properties are here…
    </Grid>
</DataTemplate>

//enabling buttons in DataTemplate when Oob en Elevated…
private void TheGrid_Loaded(object sender, RoutedEventArgs e)
{
    if (Application.Current.IsRunningOutOfBrowser)
    {
        if (Application.Current.HasElevatedPermissions)
        {
            Grid grd = sender as Grid;

            if (grd != null)
            {
                Button c = grd.FindName(“btnCall”) as Button;
                c.IsEnabled = true;
                Button m = grd.FindName(“btnMail”) as Button;
                m.IsEnabled = true;
                Button p = grd.FindName(“btnCopy”) as Button;
                p.IsEnabled = true;
                Button v = grd.FindName(“btnVCard”) as Button;
                v.IsEnabled = true;

            }
        }
    }
}

Hope this helps! Njoy!

Tip: Set DesignWidth and DesighHeight when styling Silverlight 3 controls

I rediscovered the usefulness of the DesignWidth and DesignHeight Blend properties while styling several controls.

Next time you are looking at a very small ControlTemplate in Resource Editing Mode in Expression Blend, don’t forget to set the design-time width and height. It will make your life easier. You can set it at the expected size of the control in de real interface and you can work in the control and see a reasonably sized control.

Styling a TabItem, for instance, will show the tab at the MinimumWidth en MinimumHeight of 10 pixels, leaving you a 10×10 pixel tab to work with. Setting the DesignWidth and DesignHeight properties on the root grid of the control to, say 150 and 25 gives you  room to work with and a more realistic view on the tab.

<ControlTemplate TargetType=”TabItem”>
    <Grid x:Name=”Root” d:DesignWidth=”150″ d:DesignHeight=”25″>

This needs the Blend NameSpaces at the top of the page to work:

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”

Njoy!

Use initParams to swap ResourceDictionaries and load a Theme in Silverlight 3

I’ve been looking for a way the use themes just swapping ResourceDictionaries (RD’s) for some time. Now, with Silverlight 3 being able to use MergedDictionaries, this becomes possible.

It is Blendable, but you can only use RD’s with Build Action Resource and not Content. This is annoying enough to give it another go another time. You can use the workaround of using a the RD’s with build action as Resource for use with Blend only. You’ll have to change it back before you distribute your app. Want you ultimately want is to address the RD’s as Resource…

This method can help you when you:

  • want to load a theme once on application startup
  • want to set the theme as an initParam on the Silverlight plug-in
  • don’t want to use implicit styling: you’ll need two or more RD’s with identically named Styles and Resources

Restrictions of this method are:

  • Blendable using workarounds
  • You have to use one Default theme (which can have any name you want).
  • You cannot dynamically update the theme: you can set a certain theme only once at application startup.

If this is the method for you, this is what you need to do:

  • Create ResourceDictionaries for the Default theme and for one or more other themes that you want to load in the root of your Silverlight project.
  • Use x:Keys for Styles and Resources and keep them the same between RD’s.
  • Set the Build Action for these RD’s to CONTENT in Visual Studio or by editing your .CSPROJ file by hand.
  • Insert an initParam in the <Object> tag in your startup file like this:

<param name="initParams" value="Theme=TheTheme" />
  • Add a Default MergedDictionary in App.xaml:

<Application.Resources> 
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Default.xaml"/>
        </ResourceDictionary.MergedDictionaries>

  • Declare a private currentTheme variable in App.xaml.cs

public partial class App : Application
{
    private string currentTheme = "Default";
    …

  • Set the Default theme, get the initParam, make an URL to the filename and create and RD from that. Then add the RD to the MergedDictionaries:

private void Application_Startup(object sender, StartupEventArgs e)
{

    //set the current theme to the currentTheme variable
    string currentThemeName = string.Format("{0}.xaml", currentTheme);

    //get the theme name from the initParam
    string themeParameter = e.InitParams["Theme"];

    if (!string.IsNullOrEmpty(currentThemeName))
    { 
        //set the current theme to the theme parameter and create filename
        currentThemeName = string.Format("{0}.xaml", themeParameter);

        //create an URL from the currentThemeName
        Uri themeUrl = new Uri(currentThemeName, UriKind.RelativeOrAbsolute);

        try
        {
            //create a RD and set the source to the URL
            ResourceDictionary themeDictionary = new ResourceDictionary
            {
                Source = themeUrl
            };

            //Add the RD as a MergedDictionary
            Application.Current.Resources.MergedDictionaries.Add(themeDictionary);
        }
        catch (Exception ex)
        { 
            //communicate theme doesn’t exist
            throw; 
        } 
    }

    this.RootVisual = new MainPage();

}

Many thanks to Tony Tromp and Michaud Venant for helping me out with the code.

The error “Error HRESULT E_FAIL has been returned from a call to a COM component” occurs when you forgot to change the build properties of the ResourceDictionaries to CONTENT. You can do this in Visual Studio in de Solution Explorer with the properties of the specific XAML files. This error also occurs when you maken a mistake in the name of the Theme in the initParam by messing up the quotes for example.

When you make a mistake in the Styles or the Resources used by the Styles you’ll get another error: Cannot find a Resource with the Name/Key AppBg [Line: y Position: x]. Actually if the style is OK in the Default theme it wil show that. Happily this error is easier to track and to fix, but a small error in your RD’s may have unpredictable results, so make sure they are sound.

I’ve been working with Themes from initParams for weeks. You can use Blend when you set the build action in VS to RESOURCE and restart Blend. Blend should show all the RD’s as Resources in the Resources Panel and you can edit them in the Blend artboard. You can even build in Blend and change the Theme using the initParam in the startup file. Make sure the startupfiles are the same in VS and Blend :). Before you deliver your project make sure you set the build action back to CONTENT in VS to make the theme system from initParams kick in.

I’ve placed working code on my SkyDrive.

Njoy!

10 Silverlight loading animations using percentages (HBSL3 Addendum 1)

Following Mike Taulty’s rant avoiding the “Blue Balls” when loading a Silverlight application, I’ve been thinking about what ways you’d have to show a loading animation (a.k.a. Splash Screen 🙂 using the progress percentage in a meaningful way.

The idea was to come up with 10 way to do this and it proved to be harder than I thought. I’ve made a little sketch that is a little further down this post, but first let’s have a look at how to show this. Actually is it XAML only, because the application is not loaded yet, so it can only use Javascript code behind. Creating a XAML-file and a JS-file in your Web project is enough.

Create a new XAML file called SplashScreen.xaml without code behind and a Grid or Canvas as the outer container. Place a Textbox to show a percentage and some Rectangles to show the progress.

<Canvas
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>
    Width="640" Height="480" Background="White">
  <Canvas Canvas.Top="100" Canvas.Left="100" Width="440" Height="280">
    <Rectangle x:Name="rctProgressBarTrack" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Silver" />
    <Rectangle x:Name="rctProgressBar" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Red">
      <Rectangle.RenderTransform>
          <ScaleTransform x:Name="rctProgress" ScaleX="0" ScaleY="1"/>
      </Rectangle.RenderTransform>
    </Rectangle>
    <TextBlock x:Name="txtStatus" Height="20" Canvas.Top="55" Canvas.Left="125" Text="Loading: " TextWrapping="Wrap"/>
  </Canvas>
</Canvas>

In your startup file in the Web project add two lines to the Silverlight plug-in:

<param name="splashScreenSource" value="SplashScreen.xaml"/>
<param
    name="onSourceDownloadProgressChanged" 
    value="onSourceDownloadProgressChanged" />

Create a small SplashScreen.js file in your Web project containing only this:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("txtStatus").Text =
        "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("rctProgress").ScaleY = eventArgs.progress;
}

Now copy the SplashScreen.xaml file to your Web project. If you change it later, don’t forget to copy it into your XAML project again . You may want to create something in your MainPage.xaml so there’s something to show after loading…

progress

LoadingAnimations Here are  a 10 ideas for creating interesting loading animations. Most a using the progress percentage in some way. A few are “indeterminate” so, they could run forever. Note that the last 2 are dynamic, so should update every second or so. You can use the bars to fill other paths too, like coffee cups. You may need to scale a Clipping Mask for that.

Don’t make a Splash Screen that needs it’s own loading animation 🙂

Njoy!

Change FontSize with ElementBinding

Jakob Nielsen says: “Let users control font size”. Unfortunately in Silverlight the nice features of the WPF FlowDocument control are not available (yet). You cannot use the automatic font size feature of that control in a Silverlight app. But in Silverlight 3 ElementBinding enables you to bind a value to the FontSize attribute of a TextBlock. Using a Converter with a ConverterParameter, dynamic font size becomes available:

Click for working version...

The trick is to use TextBlock controls for your text and set it’s properties in a Style, like you would normally do. This time, leave the FontSize attribute out.

<Style x:Key=”Body” TargetType=”TextBlock”>
    <Setter Property=”FontFamily” Value=”Trebuchet MS” />
    <Setter Property=”TextWrapping” Value=”Wrap” />
</Style>
<Style x:Key=”Header” TargetType=”TextBlock” BasedOn=”{StaticResource Body}”>
    <Setter Property=”FontWeight” Value=”Bold” />
</Style>
<Style x:Key=”Caption” TargetType=”TextBlock” BasedOn=”{StaticResource Body}”>
    <Setter Property=”FontStyle” Value=”Italic” />
    <Setter Property=”Foreground” Value=”Gray” />
</Style>

Create TextBlocks with these Styles and Text, but set the FontSize attribute to an ElementBinding with the Value of a small Slider.

<TextBlock x:Name=”txtHeader1″ Style=”{StaticResource Header}”  FontSize=”{Binding Value, ElementName=Slider, Converter={StaticResource FontSizeConverter}, ConverterParameter=H1}” Text=”Header 1″/>

<Slider x:Name=”Slider” Value=”10″ SmallChange=”1″ LargeChange=”12″ Minimum=”6″ Maximum=”72″ Width=”100″ />

The converter will set the FontSize for you. The ConverterParameter has string values from “H1” to “H7”, like you would use in HTML. You can set this to any string you like, but these seem to make sense…

The converter looks like this:

using System;
using System.Windows.Data;

namespace Converters
{
    public class FontSizeConverter : IValueConverter  
    {
        public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)  
        {
            double v = (double)value;

            if (parameter != null)
            {
                string fontSizeString = parameter.ToString();
                if (!string.IsNullOrEmpty(fontSizeString))
                {
                    switch(fontSizeString)
                    {
                        case “H1” :
                            value = 2.4 * v;
                        break;
                        case “H2” :
                            value = 1.8 * v;
                        break;
                        case “H3” :
                            value = 1.4 * v;
                        break;
                        case “H4” :
                            value = 1.2 * v;
                        break;
                        case “H5” :
                            value = 1 * v;
                        break;
                        case “H6” :
                            value = .8 * v;
                        break;
                        case “H7″ :
                            value = .6 * v;
                        break;
                    }
                }
            }
            value = System.Convert.ToInt32(value); // we need an integer, not double…
            return value.ToString(); // …but as a string
        }
    }
}

As you can see the value is updated with different multipliers, depending on the header parameter you pass in. H5 is the basic text size, used by the Body Text, so its multiplier is 1. You can play with these multipliers if you want a different effect.

Add the namespace to your XAML file and put the converter as a resource at the top of the file…

<UserControl x:Class=”ControlFontSize.MainPage”
    xmlns:cvs=”clr-namespace:Converters”>
    <UserControl.Resources>
        <cvs:FontSizeConverter x:Key=”FontSizeConverter” />
    </UserControl.Resources>

… and you’re good to go. Let users control text size!

Working code is on my SkyDrive… Njoy!

SketchFlow Behavior CheatSheets

Personally, I think that not enough Behaviors for Blend and SketchFlow are available, but luckily Christian Schormann recently presented some SketchFlow Behaviors that make Conditional Navigation and Global States possible in SketchFlow prototypes. For my workshop on SketchFlow for PICNIC09, I created two CheatSheets in SketchFlow, because working with Behaviors is too complex to explain quickly in a workshop. Since the workshops are done, I’d like to share these CheatSheets with you so you can learn quickly how to use the behaviors Christian created.

ConditionalNavigationCheatSheet GlobalStateCheatSheet

The Conditional Navigation behaviors enables you to navigate to a different screen based on a TargetScreen variable that is set using events in the interface.

The Global State behavior is similar but makes it possible to navigate to a screen that shows a particular state, depending on a GlobalState variable, setting the state.

If you can’t reach a result using these cheatsheet, please read the explanation from Christian on his blog. Check out the CheatSheets and enjoy using SketchFlow!

Mix Essentials Europe is Serious: Serious Games in Silverlight

It took a while, but finally the session on Serious Games is added to the reserved slot at the end of the first day of Mix Essentials Europe on the 28th of May.

Together with TNO, André van der Plas and myself will present our experience and some cases, where we successfully used serious games to educate employees and citizens.

It is going to be very interesting! See you there!

Simple rules for an enjoyable experience

“Having clear goals and expectations for whatever we do, paying attention to the consequences of our actions, adjusting skills to the opportunities for action in the environment, concentrating on the task at hand without distractions – these are the simple rules that can make the difference between an unpleasant and an enjoyable experience” Mihaly Csikszentmihalyi in Creativity.

Dit citaat kwam ik tegen terwijl ik research deed voor het handboek Silverlight. Het lijkt perfect te passen als definitie en voorwaarden voor wat we User Experience (UX) noemen. Dit geeft je handvaten bij het vraag: wat moet ik doen om een goede UX te bereiken?

  • Zorgen dat de doelen van de eindgebruikers duidelijk gedefinieerd zijn en dat je een ontwerp gemaakt heb waarmee ze dat kunnen bereiken.
  • Goede en onmiddellijke feedback, zodat duidelijk is wat er gebeurd en wat de gevolgen zijn van acties. Gebruik van Direct Manipulation om het gevoel van controle te vergroten.
  • Ervoor zorgen dat gebruikers met verschillende vaardigheden de site of applicatie goed kunnen gebruiken. Scaffolding: leren in kleine stappen en het geleerde weer toepassen in nieuwe taken. Progressive disclosure maakt het mogelijk om met een eenvoudige interface te beginnen, maar toch geleidelijk steeds meer functionaliteit zichtbaar en bruikbaar te maken.
  • Direct Manipulation in een venster maakt het mogelijk om op een taak te concentreren.Voorkomen dat dialoogvensters en messageboxen de flow van de applicatie onderbreken.

Dit citaat komt uit de vorige eeuw en is niet geschreven met ontwerpen voor software in gedachten. Toch lijkt het uitstekend te passen bij wat we deze dagen als uitdaging voor interactie ontwerp zien: een “enjoyable experience”.

How to place a vector illustration in Silverlight 2 Application Resources

Recently, I did a presentation on how to structure a Silverlight Application using Styles and Resources. This covered several topics about structuring XAML using only the Blend User Interface as a tool.

When you create a Style, Blend goes in Style Recording mode (even though there is no visual indication of that) and all properties you set in this mode are collected in your styles automatically. Just remember to begin creating a Style, you can’t convert inline properties to styles momentarily.

You can create a Resource from almost everything (although you cannot always use them as such) using the small square to the right of the input box for the property in the Property Panel. Using the Resource Panel in Blend reorganizing Resources is straightforward. You can even move User Control Resources to the application level by dragging the layer to the Application Resource Dictionary in the Resource panel.

Placing animations in App. xaml is certainly possible with the technique I mentioned earlier. You’ll have to start the animation using code.

All this helps to set up a more structured version of your Silverlight Application. But… One thing missing from this list is how to remove large vector illustrations in XAML from you pages and place them as a resource in the application level. That way large chunks of XAML are out of the way and they can be reused using only one line of code: efficient and good for your application’s performance. With the following technique, you can put ANY large, coherent piece of XAML away as a resource. Anything that you can stash in a Grid panel, for example.

The trick is the use of a Content Control and to set it’s Template property to a ControlTemplate that is used as a Resource:


<ContentControl Template="{StaticResource ctpBullet}" />

 

      <ControlTemplate x:Name="ctpBullet" TargetType="ContentControl">
            <Grid Width="12" Height="12" VerticalAlignment="Top" HorizontalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Ellipse x:Name="Bullet" Grid.RowSpan="2" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF870000">
                    <Ellipse.Fill>
                        <RadialGradientBrush RadiusX="0.67158" RadiusY="0.671574" Center="0.34738,0.263298" GradientOrigin="0.34738,0.263298">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#FFFF0000" Offset="0.512712"/>
                                <GradientStop Color="#FFCF0000" Offset="0.817797"/>
                                <GradientStop Color="#FFFF0000" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="0.34738" CenterY="0.263298" Angle="57.8044"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Path x:Name="BulletGlow" Margin="2" Stretch="Fill" Data="F1 M 23.0627,100.787C 26.3052,100.787 28.9338,103.416 28.9338,106.659C 28.9338,109.901 26.3052,106.595 23.0627,106.595C 19.8202,106.595 17.1916,109.901 17.1916,106.659C 17.1916,103.416 19.8202,100.787 23.0627,100.787 Z ">
                    <Path.Fill>
                        <RadialGradientBrush RadiusX="1.19041" RadiusY="0.858456" Center="0.332587,0.223982" GradientOrigin="0.332587,0.223982">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFED4D0" Offset="0"/>
                                <GradientStop Color="#FFF27037" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <SkewTransform CenterX="0.332587" CenterY="0.223982" AngleX="22.4347" AngleY="0"/>
                                    <RotateTransform CenterX="0.332587" CenterY="0.223982" Angle="71.469"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
            </Grid>
        </ControlTemplate>

So, clean up your XAML markup. With this trick you can remove those large vector illustrations from you screen layout and place them out of the way in app.xaml.

Njoy!

WPF 3D presentation at Software Development Conference(2): Deeper

Last time I mentioned the first demo of my presentation at the Software Development Conference called Deep. This dealt with product presentation, using a 2D UI for a 3D scene with only one model. In this demo, called Deeper, I will show you several effects you can use for your own UIs with WPF 3D.

The second demo (Deeper) consists of several possibilities to use a series of primitive models (plane, cube, cylinder, sphere) in User Interfaces. It show the spinning, flipping and stacking of planes, cover flow, harmonicas and carousels. Cubes are rotated en cylinders viewed from the inside. It was hard to think of good usage for a sphere and at first I only could come up with the planet Earth. With HitTesting you can point at a specific location and show it on the Earth surface. Later I also created a menu with five revolving spheres. Beyond that, you can see an animated SpotLight, transform of textures via sliders and animation of a camera around a cube.

The Demo executable and the source code are available from the public folder on my SkyDrive at:
http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public.

De tweede demo ( Deeper) bestaat uit een aantal mogelijkheden om een serie primitive modellen (plane, cube, cylinder, sphere) te gebruiken in User Interfaces. Het toont het spinnen, flippen en stapelen van planes, cover flow, harmonica en carrousel. Verder worden kubussen gedraaid en een cylinder van binnen bekeken. Voor een bol kon ik eerst alleen een aarde bedenken, waar je via HitTesting een locatie op kon aanwijzen, maar later heb ik ook een menu van vijf om elkaar heen draaiende bollen gemaakt. Verder zie je hier een geanimeerd SpotLight en is het verschuiven van textures via sliders en het animeren van de camera rond een kubus te zien.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

Njoy!

WPF 3D presentation at Software Development Conference (1): Deep

Last week Tuesday at de Software Development Conference I finally gave the presentation called Deep, Deeper, Deepest on WPF 3D I had been preparing for weeks. Even though the attendance stuck to 18 indidividuals, evaluations showed a score of 7,6 with high scores for Use of Visual Aids. I will be posting screenshots, executables and code, along with a description of the demos. This will be spread over three consecutive posts. Today is about Deep:

Deep Demo Screenshot
Deep Demo Screenshot

Some people may have seen this first demo. It is called Deep and shows a Xbox box in the middle of the window. The demo is now filled with all features of 3D Graphics: model, geometry, camera, lights and textures. I created animations for it and several elements are controlled by sliders. The intention was to show off the capability for product presentations in WPF. This demo uses a Viewport3D, a control that participates in 2D screen layout like any other, but can only contain 3D information itself. The box is rotated using the buttons and the sliders. Using the textboxes to the left, the Width, Height and Depth are changed to update the size of the box. The Sphere to the left makes rotating the box possible, with the help of Hittesting on the Sphere. Rotating the camera is achieved, using the sliders at the top right hand side of the screen. Buttons below that will animate the camera to different views. The slider at the bottom right of the screen kan dim the lights to demonstrate the difference between AmbientLight, DirectionalLight and SpotLight. URLs of textures in the textboxes at the bottom of the screen allow the textures to be changed using Data Binding.

The Demo executable and the source code are available from the public folder on my SkyDrive at:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

This makes a wonderful toy, playing around with all the possibilities a single model has using a 2D interface with buttons, sliders and textboxes. It works primarily through Element Binding to Sliders and Textboxes and uses Buttons to start the animations. You can also download and use the Code from the link above.

Njoy! 

Sommige mensen hebben willicht de eerste demo al gezien. Het heet Deep en heeft een Xbox doos in het midden. Die demo is nu verder ingevuld, zodat alle onderdelen van 3D Graphics aan bod komen: model, geometry, camera, lights, textures. Daarvoor heb ik animaties gemaakt en bovendien zijn de onderdelen via sliders te besturen. De bedoeling is om de mogelijkheden voor een productpresentatie in WPF zichtbaar te maken. Deze demo maakt gebruik van een Viewport3D, een control dat gewoon in de 2D layout van een scherm meedoet, maar zelf uitsluitend 3D informatie kan bevatten. De doos is met de buttons en sliders om te draaien en met de tekstboxen links kan de Width, Height en Depth aangepast worden om een ander formaat doos te tonen. De bol links maakt het mogelijk om via HitTesting op de bol de rotatie van de box aan te sturen. De camera wordt gedraaid met de sliders rechtsboven. De knoppen eronder animeren de camera naar een bepaalde view. De sliders rechtsonder kunnen de lichten doven en zo het verschil tussen AmbientLight, DirectionalLight en SpotLight inzichtelijk maken. URLs van textures maken het mogelijk om deze snel te veranderen.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

Dit levert erg leuk speelgoed op, waarmee je kan spelen met alle mogelijkheden die een enkel model heeft via een 2D User Interface met buttons, sliders en tekstboxen. Het werkt voornamelijk met Element Binding aan sliders en tekstboxen. Het gebruikt Buttons om de animaties te starten. De code kan je ook downloaden via de link hierboven…

Silverlight Animations as Application Resources in app.xaml

I like to have my animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. It’s better to edit them separately.

The animations in Silverlight have to be started using Event Handlers in a Code Behind file in Silverlight instead of the Triggers used in WPF. The Triggers were able to connect to the target object for an animation. The Event Handlers won’t do that for you.

You’ll have to find the Animation Resource, assign it to a Storyboard object in the Code Behind file of your page and set the Target element for that Storyboard before starting the animation.

Michel Heijman helped me out with this. This is his solution:

Create a helper class that can find Resources for you (like in WPF). Save this in the root of your project and name it ResourceLocator.cs.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace AnimationsAsApplicationResources
{
    public static class ResourceLocator
    {
        ///

        /// Helper method for finding resources located in app.xaml
        ///

        ///         ///
        public static object FindResource(string name)
        {
            if (App.Current.Resources.Contains(name))
            {
                return App.Current.Resources[name];
            }
            else
            {
                FrameworkElement root = App.Current.RootVisual as FrameworkElement;
                return root.FindName(name);
            }
        }
    }
}

In the Code Behind of your page, add the following to access the Animation Resource, set the TargetName for it and to run the Animation:

        private void startStoryboard1(object sender, RoutedEventArgs e)
        {
            // find the storyboard with helper class:
            Storyboard Storyboard1Resource = ResourceLocator.FindResource(“Storyboard1” ) as Storyboard;
            if (Storyboard1Resource != null)
            {
                // Set target for storyboard:
                Storyboard.SetTarget(Storyboard1Resource, Rectangle1);
                // Begin storyboard:
                Storyboard1Resource.Begin();
            }
        }

Don’t forget to place your animation in app.xaml now 🙂 No need to change the app.xaml.cs file for this…

Njoy!

Silverlight 2 beta 2 dropshadows using Blends

Lacking the DropShadow BitmapEffect that is present in Windows Presentation Foundation, we cannot use BitmapEffects to create shadows for containers. This doesn’t mean no shadows are possible in Silverlight 2. In the old days of CorelDraw 5 we used so-called Blends to create shadows in vector drawings. Blends are a feature that morphs one shape to another using several steps. In these steps new shapes are created that are in-between the starting and the resulting shape. Actually I think Expression Design does Blending. Just make sure the program can guess which vertices it can map to vertices on the resulting shape. If you don´t your shapes go haywire :).

Using XAML you can emulate Blends in vector drawing programs. Below is a piece of code that mimicks Blends. Note that the Margin used is always 1 to ensure a smooth gradient. Note too, that the used color is almost transparant Black. These transparent colors add up to a nice shade of gray. If you want to have a darker shadow, just make this color darker. I have not used Resources just to keep the XAML concise, but I would make editing the Shadow color easier. Actually, you can make a UserControl like a ShadowBorder that not only allows for changing the shadow color, but also the shadow direction. Anyone who makes a user friendly control like that, please let me know…

<Grid x:Name="LayoutRoot" Background="LightYellow" >
 <Grid  Width="300" Height="200">
  <Border CornerRadius="25" Margin="1" Background="#03000000">
  <Border CornerRadius="24" Margin="1" Background="#03000000">
  <Border CornerRadius="23" Margin="1" Background="#03000000">
  <Border CornerRadius="22" Margin="1" Background="#03000000">
  <Border CornerRadius="21" Margin="1" Background="#03000000">
  <Border CornerRadius="20" Margin="1" Background="#03000000">
  <Border CornerRadius="19" Margin="1" Background="#03000000">
  <Border CornerRadius="18" Margin="1" Background="#03000000">
  <Border CornerRadius="17" Margin="1" Background="#03000000">
  <Border CornerRadius="16" Margin="1" Background="#03000000">
  <Border CornerRadius="15" Margin="1" Background="#FFFFFFFF" />
  </Border></Border></Border></Border></Border>
  </Border></Border></Border></Border></Border>
  <Grid Margin="12" VerticalAlignment="Center" HorizontalAlignment="Center" >
   <TextBlock Foreground="Silver" Text="Your content here..." />
  </Grid>
 </Grid>
</Grid>

Njoy!

Color Palettes using Color Resources in Silverlight

I’ve been asked by a client if it was possible to make color versions of a design. I told him that that was actually very easy. And it is. It is just that you have to treat your colors a little different: you’ll have to create color palettes using Color Resources. Because that worked a little different in Silverlight 2 Beta 1 than in WPF I was on the wrong foot for a long time. Finally I worked it out and here it is:

There’s only one way to specify a Color in Silverlight:

<Color x:Key="colAccent">#FF800000</Color>

and this gets underlined in Visual Studio indicating that Color cannot have direct content (meaning the color code between the <Color> and </Color> tags). You’ll have to ignore that 🙂

All other ways to specify color won’t work in Silverlight:

  <!-- Colors in Silverlight 2 beta 2:-->
        <!-- all these don't work -->
        <!--<Color x:Key="colBrightAccent" A="FF" R="00" G="00" B="00" />-->
        <!--<Color x:Key="colBrightAccent" A="#FF" R="#00" G="#00" B="#00" />-->
        <!-- <Color x:Key="colBrightAccent" A="255" R="255" G="0" B="0" />-->
        <!--<Color x:Key="colBrightAccent" scA="1" scR="0" scG="0" scB="0" />-->

Note that at least the second and the fourth are valid in WPF. The third seems to go well in Blend, but gives an error in the browser and won’t show anything: the screen remains white.

Still, this allows you to create palettes of color. Here’s one with two colors:

<Color x:Key="colAccent">#FF800000</Color>
<Color x:Key="colBrightAccent">#FFFF0000</Color>

  

You can use these in SolidColorBrushes and LinearGradienBrushes like these:

        <!-- Brushes that can apply those colors using color resources -->
        <SolidColorBrush x:Key="brAccent" Color="{StaticResource colAccent}" />
        <SolidColorBrush x:Key="brBrightAccent" Color="{StaticResource colBrightAccent}" />

        <!--Gradient Brushes can use those colors too! -->
        <LinearGradientBrush x:Key="lgbrAccent" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="{StaticResource colBrightAccent}" Offset="0" />
            <GradientStop Color="{StaticResource colAccent}" Offset="1" />
        </LinearGradientBrush>

Place all this in app.xaml between de <Application.Resources> tags and you’ll be ready to apply them in some normal XAML:

 <Grid x:Name="LayoutRoot" Width="200" Height="150">
  <Grid.RowDefinitions>
   <RowDefinition /><RowDefinition /><RowDefinition />
  </Grid.RowDefinitions>
  <Rectangle Grid.Row="0" Fill="{StaticResource brAccent}" Stroke="{StaticResource brBrightAccent}" RadiusY="25" RadiusX="25" StrokeThickness="5"/>
  <Rectangle Grid.Row="1" Fill="{StaticResource brBrightAccent}" Stroke="{StaticResource brAccent}" RadiusY="25" RadiusX="25" StrokeThickness="5"/>
  <Rectangle Grid.Row="2" Fill="{StaticResource lgbrAccent}" Stroke="{StaticResource brAccent}" RadiusX="25" RadiusY="25" StrokeThickness="5" /> 
 </Grid>

What makes it easy to make color versions of a design is the fact that you can easily replace the two color codes in the Palette to change the look of the entire application! This would do the trick:

  <Color x:Key="colAccent">#FF008000</Color>
  <Color x:Key="colBrightAccent">#FF00FF00</Color>

Be aware of the use of a Color Resource (colBright) in a LinearGradientBrush, but a Brush Resource (brBright) when you use it for a Fill or a Stroke.

So with about 10 colors as resource in app.xaml, you can actually create a basis for skinning your application. It’s just that now I still have to replace all the separated colors in my project with StaticResources and that will take some time… So now it is easy, but it will take a while 🙂 If you remember to work like this from scratch, you’ll be fine when a client ask you if color versions are possible…

Njoy!

Using the Blend Visual State Manager (VSM) on the MediaPlayer-style VideoButton

 Last weekend I played around with the new version of Blend 2.5 to see how the Visual State Manager (VSM) was working. I was pleasantly surprised by the simplicity of it all. Actually it works just like an animation. You just don’t need a timeline for states. So if you know how to animate in Blend, it is fairly easy to add states to buttons. To show you, I’ve adde states to the MediaPlayer-style videobutton I made in the previous post.

First doubleclick the button in the Objects and Timeline category in the Interaction Panel. A yellow line indicates it is selected. Then from the Button in the breadcrumbsbar below the titel of the document, click the little arrow and select Edit ControlParts (Template) and Edit Template. Since we’re using a button with a self-made template we already have a template. If you start with a new button, you’ll have to create a template using the menu first.

In the button Template, the States Category in the Interaction Panel will show several default states for the button. Below,  I’ve selected the pressed state. The “State Recording is on” message appears in red and just like in animating, you can now change Opacity, Color for that state. You can even use transformation, as you may notice that the glow and the TextBlock are moved down a few pixels.

The Name of the elements of the button in the Templates are preceded by a red circle with a white arrow to indicate it is particitpating in the current state. I have not discovered how to delete this using the UI, but you can easily find it in the XAML is you have to.

You can add transitions for the several states of this button using the + icons and – icons on the State bars. Change the transistion time with the (as buttons disguised) TextBoxes. You can drag to change the value like in other TextBoxes in Blend.

These are the states I created: a lighter yellow for the MouseOver, a darker yellow and transitions on the glow and text for the Pressed and a colorless version for the Disabled state. Note the the Focus state kicks in when the button is Pressen and remains Focused when released…

 

 

 

 

 

 

 

 

 

 

 

 

The XAML that the VSM generates is rather lengthy. Just as an example here’s the state which has least code (except for the Normal state that has an empty Storyboard)…


       <vsm:VisualStateManager.VisualStateGroups>
        <vsm:VisualStateGroup x:Name="CommonStates">
         <vsm:VisualStateGroup.Transitions>
          <vsm:VisualTransition Duration="0:0:0.2" To="MouseOver"/>
          <vsm:VisualTransition Duration="0:0:0.1" To="Pressed"/>
         </vsm:VisualStateGroup.Transitions>

         <vsm:VisualState x:Name="Normal">
          <Storyboard/>
         </vsm:VisualState>

         <vsm:VisualState x:Name="MouseOver">
          <Storyboard>
           <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)&#91;2&#93;.(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="0" Value="#FFFFFB93"/>
           </ColorAnimationUsingKeyFrames>
           <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)&#91;0&#93;.(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFEFF77"/>
           </ColorAnimationUsingKeyFrames>
           <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)&#91;1&#93;.(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFDB005"/>
           </ColorAnimationUsingKeyFrames>
          </Storyboard>
         </vsm:VisualState>

        </vsm:VisualStateGroup>
       </vsm:VisualStateManager.VisualStateGroups>

Njoy!

Create a MediaPlayer11-style Playbutton with glow

Just to show how easy it is to make a button in MediaPlayer11-style. Here’s a short HowTo on how to do this in Expression Blend:

In Blend, open a New Project…

Select Ellipse in Toolbox

Drag Ellipse 150px, Hold Shift to constrain to circle

 

 

 

Click Stroke, Add 3px brown stroke to the circle

Create RadialGadient Yellow, Dark Yellow, Yellow

Click Brush Transform in Toolbox (G):

 

 

 

 

<Ellipse Stroke="#FF722400" StrokeThickness="3">
	<Ellipse.Fill>
		<RadialGradientBrush GradientOrigin="0.35,0.35">
			<RadialGradientBrush.RelativeTransform>
				<TransformGroup>
					<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
					<TranslateTransform X="-0.09" Y="-0.12"/>
				</TransformGroup>
			</RadialGradientBrush.RelativeTransform>
			<GradientStop Color="#FFFDFF00" Offset="0"/>
			<GradientStop Color="#FFC48700" Offset="0.75"/>
			<GradientStop Color="#FFFFDE00" Offset="1"/>
		</RadialGradientBrush>
	</Ellipse.Fill>
</Ellipse>

Copy And Paste Ellipse in front of existing Ellipse

Hold ALT and Shift dragging lowerleft handle to the middle of the ellipse.

 

 

 

Fill LinearGradient White on Top, White op bottom, with Alpha set to Zero.
Set Stroke to none

 

 

 

Select Object/Path/Convert to Path

Select Direct Selection Tool in ToolBox (A)

 

 

 

Drag bottom Controlpoint up above the middel of the lower ellipse

 

 

 

 

Finish up with characters from WingDings font and a circle with Black to White diagonal LinearGradient behind the button.

 

 

 

Njoy!


 <Grid x:Name="VideoButton" Width="200" Height="200" Background="Black">
  <Ellipse Stretch="Fill"  Width="175" Height="175">
   <Ellipse.Fill>
    <LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
     <GradientStop Color="#FFFFFFFF" Offset="1"/>
     <GradientStop Color="#FF000000" Offset="0"/>
    </LinearGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <Ellipse Stretch="Fill" Stroke="#FF000000"  Width="150" Height="150">
   <Ellipse.Fill>
    <RadialGradientBrush GradientOrigin="0.33,0.33">
     <RadialGradientBrush.RelativeTransform>
      <TransformGroup>
       <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.3" ScaleY="1.3"/>
       <TranslateTransform X="-0.015" Y="-0.075"/>
      </TransformGroup>
     </RadialGradientBrush.RelativeTransform>
     <GradientStop Color="#FFFDFF00" Offset="0"/>
     <GradientStop Color="#FFC48700" Offset="0.775"/>
     <GradientStop Color="#FFFFDE00" Offset="1"/>
    </RadialGradientBrush>
   </Ellipse.Fill>
  </Ellipse>
  <TextBlock VerticalAlignment="Center" TextAlignment="Center"><Run FontFamily="Webdings" FontSize="96" Text=":"/></TextBlock>
  <Path Margin="0,-55,0,0" Width="125" Height="75" Stretch="Fill" Data="M181.5,88.5 C181.5,137.10106 139.84441,74.306452 89.862639,74.306452 39.880869,74.306452 0.5,137.10106 0.5,88.5 0.5,39.898942 41.01823,0.5 91,0.5 140.98177,0.5 181.5,39.898942 181.5,88.5 z">
   <Path.Fill>
    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
     <GradientStop Color="#FFFFFFFF" Offset="0"/>
     <GradientStop Color="#00FFFFFF" Offset="1"/>
    </LinearGradientBrush>
   </Path.Fill>
  </Path>
 </Grid>