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

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!

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

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

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 will pop up the Inlines Collection Editor: Njoy!

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

Since I got a new computer screen at work my old Silverlight wallpaper at a 1280 x 1024 resolution didn’t fit any more. I could not find one for a 1920 x 1080 resolution, so I had to create my own. Luckily I happen to have a hires Silverlight logo available and know a little about Photoshop filters… Like it or not, here it is:     Click image to download in 1920x1080   Njoy!

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:   <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"/>
                ...

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

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