Nooks and Crannies of Expression Blend: Artboard Objects List

I can’t even find this one in the Keyboard Shortcut list provided in the User Guide of Expression Blend, so I made up a name for it: The Artboard Objects List:

ArtboardObject List

Known from several drawing programs, this list shows the objects under the mouse cursor when you hold Ctrl and Click the Right Mouse Button. It highlights the currently selected object and lists all other objects overlapping each other from the topmost at the top of the list to the one at the bottom on the bottom of the list. Notice that the order of this list is opposite to the default order in de Objects and Timeline Panel (when you have not changed the order of the panel using the Sort by Z-order option at the bottom left of that panel). Actually, this order is logical for what it shows: the stack of objects in the Artboard under your mouse cursor.

Notice also the option to Pin or UnPin the Active Container. This makes is easier to insert newly created objects in a container like the RegularPolygon Shape in the Grid here inside the RadioButton…

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!

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

Nieuw leven voor Silverlight: Silverlight 5 beta in april

De beta van Silverlight 5 wordt in de lente verwacht, waarschijnlijk tijdens de MIX 2011 conferentie op 12 tot en met 14 april in Las Vegas. De definitieve versie van Silverlight 5 wordt daarop in de loop van 2011 uitgebracht.

Ook bij de komende versie van Silverlight is gekeken naar de features die het meest gevraagd zijn op silverlight.mswish.net. Daar staan Full Databinding support en 3D bovenaan in de lijst. Verschillende aangekondigde features vindt je terug in de bovenste regionen, maar ook andere handige features worden onderdeel van Silverlight 5. Nadruk ligt op verbetering en uitbreiding van de bestaande functionaliteit, maar er zijn een paar uitzonderingen: ondersteuning voor 3D bijvoorbeeld.

3D en graphics

De grootste verassing in de Keynote van Scott Guthrie op de Silverlight Firestarter Web Cast was voor mij de aankondiging van 3D voor Silverlight. In de keynote video is vanaf 50:50 tot 55:50 een indrukwekkende demo te zien van wat er mogelijk wordt met 3D in Silverlight. Of 3D op dezelfde manier gaat werken als in Windows Presentation Foundation, valt nog te bezien. Er zijn in ieder geval modellen, animated cameras, textures en bumpmapping in de Silverlight implementatie aanwezig. De performance van de demo is in indrukwekkend. Grafische verbeteringen als een 3D immediate Mode Graphics API, GPU accelerated 3D zullen daaraan bijgedragen hebben. Daarnaast zijn Fluid Layout Transitions in Silverlight 5 beschikbaar, die het animeren van onderdelen van de UI nog eenvoudiger maken.

Tekst en printen

Daarnaast krijgt Silverlight 5 serieuze typografische verbeteringen. De scherpte van de tekst wordt verbeterd, het wordt mogelijk om tekst over meerdere kolommen te laten lopen. Er wordt volledige OpenType support beloofd, waaronder de toepassing van Leading en Kerning van characters in lettertypes. Het printen van tekst in Postscript vector format maakt niet alleen haarscherpe prints mogelijk, maar zal ook meer controle bieden over wat er precies geprint wordt en niet alleen wat er in de visual tree aanwezig is.

Data en binding

Een ander opmerkelijke en nuttige feature in Silverlight 5 wordt het zetten van breakpoints in de XAML. Dit werkt hetzelfde als breakpoints in code, maar zal daadwerkelijk een XAML-bestand openen en stoppen op de regel met het breakpoint. Van daaruit is het debuggen van data binding voorhanden. In de Locals Window worden fouten in de binding en in de final source de properties met de huidige waarden daarvan zichtbaar. Dat maakt het oplossen van problemen met bindings een stuk eenvoudiger. Bindings on Style setters maken het veranderen van application resources beschikbaar, zodat het onmiddelijk veranderen van Themes eindelijk wel  kan. Voor RIA services kan data opgeslagen worden in de cloud. Custom markup extentions helpen om een MVVM patroon beter te implementeren. Implicit Data Templates zorgt voor een default uiterlijk van een bepaald datatype over de hele applicatie heen. Relative Source binding maakt WPF features voor databinding eindelijk beschikbaar in Silverlight.

Media

Hardware media decodering geeft betere video-ervaring, terwijl CPU en batterij worden ontzien. Power Management zal bij dat laatste zelfs nog meer helpen. Pitch correction voor audio en video heet in Silverlight 5 TrickPlay. Silverlight krijgt ook de functionaliteit om afstandbedieningen aan te sturen, zodat een zogenoemde “Ten feet experience” beter ondersteund kan worden vanuit een Silverlight applicatie. Ik hoop nog altijd dat MediaCenter Markup Language (MCML) wordt vervangen door XAML, maar dat is wellicht een brug te ver.  IIS Media Services 4.0 maakt smooth streaming naar WP7, maar ook de iPhone en de iPad mogelijk met betere performance en meer mogelijkheden. Het wordt bijvoorbeeld mogelijk om Azure te gebruiken voor IIS Media Services.

Silverlight 5 zal weer talloze verbeteringen hebben ten opzichte van de huidige versie. Zo komt er een 64-bit Silverlight Runtime die sneller start, beter presteert en meer mogelijkheden biedt. Een Coded UI recorder brengt testen van de userinterface binnen bereik. Out-of-Browser Silverlight applicaties kunnen meerdere subwindows hebben, die zelfs snappen naar de kanten van het scherm in Windows 7. Entreprise Policy support laat trusted applications binnen die vertrouwde omgeving uit de sandbox komen. P/invoke laat je unmanaged DLLs en Win32 APIs aanspreken voor betere integratie met het OS en met apparaten.

Als wilt kan je alles nog eens nalezen op de Future of Microsoft Silverlight site.

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!