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

It took a while, but my personal porftolio in Silverlight called ScreenMachine, has appeared in The Silverlight showcase. You can also reach it through the ADdendum blog, too. When you select The Netherlands as Geography in the left menu of the Showcase you can find it as fourth on the first row (for now). Njoy!

Sinds Silverlight 1.1 in beta uitkwam, is mijn doel geweest om mooie en krachtige internetapplicaties te maken met de Expression tools en Silverlight. Gelukkig sluit dat aan op mijn werkzaamheden als senior designer bij Macaw, waar we de afgelopen jaren veel mooie WPF- en Silverlight-projecten hebben mogen uitvoeren voor verschillende opdrachtgevers. Ik ben er van overtuigd dat Silverlight ongekende mogelijkheden biedt om indrukwekkende userinterfaces te creëren. Juist dat ongekende houdt me bezig. Daardoor schrijft in artikelen, waarin in webdesigners van Nederland probeer te vertellen wat je allemaal kan creëeren en bereiken met XAML als taal, Silverlight als techniek en Expression Studio als tools. Daarom is het ook logisch dat ik bestuurslid ben van de Silverlight en Expression Insiders. Ik verwacht dat er meer ontwerpers zijn als ik. Ik heb groot respect voor de software die Adobe in de markt zet. De Creative Suite is onmisbaar als het gaat om de creatie van bitmap- en vectorillustraties. Zelf gebruik in geen Mac, maar heb er in het verleden wel mee gewerkt en vind het mooie apparaten. Vanuit mijn werk en de relatie van mijn werkgever met Microsoft is het gebruiken van een Mac op z’n zachts gezegd onhandig. Als ontwerper bedien ik ...