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

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:        

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

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

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:

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

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

I started working on a Silverlight Page Curl when I encountered one on the internet and realized I had not seen it done in Silverlight yet. Read the manual to learn how to customize the Silvelight Page Curl using intialization parameters. A basic function is to use a small footprint for the plug-in and enlarging that to a new plug-in size. This way most of the original page can be used for content and links close to the plug-in can be clicked, while you can still show a good part of an image beneath the curl when the mouse cursor is hovered over the plug-in. The plug-in size has to be reduced again when the mouse cursor is outside the plug-in area. The page curl is customized using initialization parameters on the plug-in: <param name="initParams" value="
    imageUrl=/images/SLPageCurl.jpg,
    imageLink=http://antonidol.nl/pagecurl,
    curlColor=#FFC4D8F8,
    isCloseable=true
"/> These are efficiently picked up and added to the Application Resources in a foreach loop in App.xaml.cs: //Place initParams in Resources
foreach (var item in e.InitParams)
{
    this.Resources.Add(item.Key, item.Value);
} When retrieved, these are Strings and need to be converted before they can be used: if (App.Current.Resources.Contains("imageUrl"))
{
    imageUrl = new Uri(App.Current.Resources["imageUrl"].ToString(),
         ...

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

Ik had het voorrecht om te gast te zijn bij de presentatie van de keynote bij Microsoft Nederland. In combinatie met de SDN had de Silverlight en Expression Insiders usergroup een aantal plaatsen te vergeven. Mensen die zich ingeschreven hebben op Sixin.nl hebben een e-mail gehad met een link naar het inschrijvingsformulier voor het evenement. Ze hebben een ochtend de tijd gehad om zich in te schrijven.   Uiteindelijk waren er zo’n dertig mensen vanuit verschillende gebruikersgroepen en invalshoeken naar het nieuwe Microsoft hoofdkwartier gekomen om de aftrap van de MIX 2010 op een groot scherm in een grote vergaderzaal mee te maken. Er waren drankjes en borrelhapjes, maar zodra de videostream op gang was gekomen was iedereen ademloos aan het luisteren en kijken. In sneltreinvaart zijn verschillende mensen en evenzoveel verschillende demo’s aan het oog voorbijgekomen. Enkele opmerkelijke feiten heb ik via Twitter kunnen verspreiden, totdat mijn telefoon het opgaf omdat hij te lang had aangestaan.   De tweets gingen over de 60% marktpenetratie van Silverlight (in Nederland 72%), de mogelijkheid om fullscreen Silverlight video te kijken op een tweede (of derde) scherm, Silverlight als techniek achter Pivot, Blend 4 als gratis update voor Blend 3, dat ...

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