English Only Archieven - io independent publisher

Photoshop CS6 – Blend 4 UI Similarity

When you make a screenshot of Expression Blend 4 and paste it in Photoshop CS6 beta, it is hard to see where the Photoshop UI stops and Expression Blend UI starts.

Check this out:

Njoy!

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.

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.

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:

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!:

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:

.. 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.

Thanks 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 ﬀ, ﬂ, ﬃ, ﬄ 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:

[sourcecode language=”XML”]

[/sourcecode]

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

Njoy!

Photoshop in METRO style 2: Filters

Recreating a Metro Style version of one of the most elaborate dialog boxes in Photoshop seemed like an interesting challenge. The comments on the post Photoshop in METRO style got met re-reading the existing documentation for METRO Style Apps…

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:

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:

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!

Nooks and Crannies of Expression Blend: Inlines Collection Editor

In the category Nooks and Crannies of Expression Blend: Have you ever seen the Inlines Collection Editor? When you select a TextBlock you can find the property in the Miscellaneous Category:

Selecting the button with the Ellipsis wil pop up the Inlines Collection Editor:

Njoy!

Photoshop in METRO style

Trying to recreate the Photoshop UI in Metro style seems like a foolproof test to find the limitations of the Metro design language.

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:

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.

The 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.

PhotoshopInMetroStyleSmall02 The 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.

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.

PhotoshopInMetroStyle04Small The 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:

So, I’ve create a new Style for the Slider, resembling the original Cover Flow slider.

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:

[sourcecode language=”XML”]<Slider Style="{StaticResource CoverFlowSliderControl}" Maximum="100" LargeChange="10" SmallChange="1" Value="50"/>[/sourcecode]

The Track has its own style, used in the ControlTemplate later on:

[sourcecode language=”XML”]<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>[/sourcecode]

The Thumb is no more than two rectangles, but both have their own Style:

[sourcecode language=”XML”]<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>[/sourcecode]

There are two Repeatbuttons to the left and to the right of the Thumb. They are invisible and use the same Style:

[sourcecode language=”XML”]<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>[/sourcecode]

Finally, here is the Style for the Slider Control with the ControlTemplate that uses all Styles above…

[sourcecode language=”XML”]<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>[/sourcecode]

The result is a Cover Flow Slider that nicely fits in with the rest of the Cover Flow Control:

Njoy!

Check out the Comments below about why this picture is up here…

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.

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:

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…
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>
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.
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.
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!