Start with a new application in Blend, adding two ColumnDefinitions to the LayoutRoot element to split it down the middle.

Open the Asset Library and select a ComboBox element from the Simple Styles collection, placing it on the left side of the artboard, about halfway up.

Find the ComboBox element in the Objects and Timeline category of the Interaction panel, right-click to raise the context menu, and select Edit Control Parts (Template), followed by Edit Template.

You are now “in” the template editing view and your artboard should have changed to show you a really big ComboBox only. The Objects and Timeline category has also changed, showing you the inner makeup of the ComboBox element as shown in Figure 12.1.

Figure 12.1. The Objects and Timeline category of the ComboBox Control template.

Double-click the ToggleButton element to activate it. You are now going to edit the ToggleButton element control template, so again go through the process of right-clicking the element, but this time opt to edit a copy instead of the template.

The Create ControlTemplate Resource dialog should now be showing. Enter MyGreenToggleButton into the Resource Name (Key) edit box, and ensure that the Define radio button for Application is selected.

You will now see the Objects and Timeline category shows the individual elements that make up the combo box. Hide some of the elements and you should see that the part that acts as the drop-down button is a Rectangle element that fills the entire space.

Select the Rectangle element and change the Fill property to show a nice light green SolidColorBrush.

If you look in the Triggers category, you should see three Triggers defined that change both the functionality and the style of the element depending on which triggers are raised. (This is the implicit style-editing ability of Blend and will be covered in the next section.) You are looking for the Trigger that is raised when IsChecked=True. Select it in the list and you should take note of the Properties When Active area of the Triggers category.

Figure 12.2 also shows the style template change that is made when this Trigger is activated and it is this property that we want to change. You will see the style change is also visible in the Rectangle element that you have selected, as you will now see that it has reverted to the silver type PressedBrush resource. Making sure that Trigger Recording is on by verifying the red border around the artboard, you can change the Fill property once more to a SolidColorBrush, this time choosing a darker green.

Figure 12.2. The Triggers category, specifically the actions applied when the Trigger is activated.

You have now finished with the ToggleButton template, so you can click on the ScopeUp button to return to the ComboBox template, click on the ScopeUp button again to return to your application scene, or you can use the Template Breadcrumb capability of Blend as described in Figure 12.3. This breadcrumb workflow allows you to move quickly between the layers of templates and the subsequent child controls of parent control templates. After you have specifically opted to edit a ControlTemplate or style template, you no longer need to go through the right-click menu scenarios because you can select the template to edit at anytime on the breadcrumb bar.

Figure 12.3. The Template Breadcrumb workflow facility in Blend attempts to show you the layer makeup of the editable template of the control(s).

Press F5 to run the application and click on the drop-down arrow to note the changes that occur with the Trigger activating: The IsChecked property is set to true and your Trigger fires to modify the part color to green.

What you should have noticed is that the MouseOver Trigger is also activated, which again sets the style of the Rectangle. You can go back in and change the style if you really want to!

Add a SimpleStyles Expander to your application, setting it to show on the right side of the LayoutRoot grid.

When you have finished with your placement of the Expander, double-click on the Expander to activate it, and then continue through to Edit Control Parts (Template) either by right-clicking in the Objects and Timeline category or by using the Template Breadcrumb toolbar. You probably don’t see any Style or Template buttons next to the [Expander] button, but you should see a little arrow indicating drop-down features. Click on this button and you will see a shortcut menu appear, giving you same the features as the right-click context functionality. You should be editing the template here, not a copy of the template.

As Figure 12.4 shows, the Object and Timeline element tree can be drilled down to show the ToggleButton control—this is the target control you wanted to find.

Figure 12.4. The drill-down indicators in the Objects and Timeline category.

Double-click the ToggleButton element to activate it. Right-click to produce the context menu, again selecting the Edit Control Parts (Template) menu item, and this time moving down to Apply Resource. You should see a new context menu appear, and it should contain the item MyGreenToggleButton. Select the item to apply it. You can also do this from the Template Breadcrumb toolbar.

ScopeUp back to your application scene and press F5 to run your application.

Either add the XAML from Listing 12.2 or start a new empty project and then open the Asset Viewer and type Progress into the search box, which should return a single control SimpleProgressBar.

Add this control to the center of the LayoutRoot panel and set its height to 15, set the HorizontalAlignment to Stretch, and set the Left and Right Margin to 150.

Open the Objects and Timelines panel and navigate through the visual tree to find and select the ProgressBar control.

On the top menu, Object, find the option for Edit Style and select Edit Style from the child menu.

<Grid x:Name="LayoutRoot">


    <ProgressBar Margin="150,94,150,0" Style="{DynamicResource SimpleProgressBar}"
VerticalAlignment="Top" Height="15"/>

</Grid>

Open the Interaction panel if it is not already visible and you should note a default trigger exists called Default. This represents the default property values of the control. By default the Simple ProgressBar contains a property recorded value, setting the Background property of the control.

Try changing a visual property such as the Brush applied to the Background property. You will see nothing has changed on the control. Why is this? It’s because the SimpleProgressBar is made up of two parts and a Container object, as shown in Table 12.2. The Background property you see in the style template refers to the background of the control as a group and not the individual part shown in the control. The part called Part_Track is a control of type Border and represents what you see as the background panel on the control.

You will also note at this point that you are modifying the SimpleStyles.xaml resource dictionary directly (you should see this file at the top of the artboard in the list of open files).

Start a new application in Blend.

Add a Border element to the artboard, leaving it at its default position and size in the top left of the artboard.

Style the Border element anyway you choose, using the Properties panel to set the Background and Stroke properties. In the example, I have created a red LinearGradientBrush with a bright red SolidColorBrush for the Stroke.

Set the BorderThickness property to 2.

Figure 12.7. The Border element prepared.

Switch to the XAML view and add the listing shown in Listing 12.3 above the LayoutRoot Grid element, which creates the Style and ControlTemplate element you are going to assign to your control.

<Window.Resources>
    <Style x:Key="NewFocusVisualStyle">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>

          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
</Window.Resources>

You should also be able to see your Border element in the XAML. Select the entire markup for the element and put it between the <ControlTemplate> markup tags in the style you just created in Window.Resources.

Your entire markup should look similar to that of Listing 12.4.

<Window.Resources>
    <Style x:Key="NewFocusVisualStyle">
      <Setter Property="Control.Template">
        <Setter.Value>
          <ControlTemplate>
                <Border HorizontalAlignment="Left" VerticalAlignment="Top"
Width="100" Height="100" BorderBrush="#FFFF0000" BorderThickness="2,2,2,2">
                        <Border.Background>
                                <LinearGradientBrush EndPoint="0.502,1"
StartPoint="0.498,0">
                                        <GradientStop Color="#FFFF0000"
Offset="0"/>
                                        <GradientStop Color="#FFFFFFFF"
Offset="1"/>
                                </LinearGradientBrush>
                        </Border.Background>
                </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
</Window.Resources>
        <Grid x:Name="LayoutRoot">
         </Grid>

You need to make some final modifications to your Border element that pertain to the size, layout, and positioning of the Border. The Border will take its position from its target element, so you can remove the following markup from your Border element:

  HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"

Finally, add a new Margin property to the element because you want the Border to appear just outside the bounds of the target control when the focus is on it, just so the user will instantly notice the change in focus. Add the following markup to the Border element:

  Margin="-3"

Return to the Design artboard and you should have a clean space to work with. Open the Asset panel and select a Button element from the Simple Styles collection.

Place the Button on the artboard at any position and size you choose.

With the Button element selected, type the word foc into the property search box and you should find the property FocusVisualStyle in the Miscellaneous category.

You will note that you can’t edit the property directly in the property edit box. But don’t worry, all is not lost. To the right of the property edit box, you will see a small box that allows you to open the advanced properties options.

Click on the small box, and select the Custom Expression menu option, which opens a small pop-up as shown in Figure 12.8.

Figure 12.8. The small pop-up box used to edit the FocusVisualStyle property directly.

Enter the following into the box:

   {DynamicResource NewFocusVisualStyle}

and press Enter to close.

Now run your application and press the Tab button to send the focus to your button. It should turn red. Perhaps a little too red?

Okay, I was just making a point, albeit a very ugly one. Change the GradientStop color values to something similar to the following and try again:

<GradientStop Color="#3FFF0000" Offset="0"/>
   <GradientStop Color="#3FFFFFFF" Offset="1"/>

You will note that the Objects and Timeline category looks pretty bare and this is because the data template is referenced by the ListBox and not part of its items collection. Right-click on the ListBox and look for the menu item Edit Other Templates, or use the Template Breadcrumb toolbar at the top of the artboard. You can choose Edit Generated Items (Item Template) and then select Edit Template.

The DataTemplate is now visible in the Objects and Timeline category of the Interaction panel, as shown in Figure 12.11. Technically it is actually the ContentPresenter template, but it represents the DataTemplate and the controls that defined within it. Walk through the visual tree, double clicking to activate the individual control elements, and you will see on the artboard where those controls are located.

Figure 12.11. The DataTemplate definitions.

Activate the top most StackPanel element and you will see that this control stretches way to the right of the bounds of the ListBox. Pan the artboard to the direction of the outer bounds of the control. Resize the control so that it fits neatly inside the ListBox and you should see an image come into view as shown in Figure 12.12.

Figure 12.12. The StackPanel resized to fit the ListBox.

Working down the Objects and Timeline tree, you can resize the elements and change fonts and colors to start to give your data some distinctive styling. You should realize by now that all these control elements are inside the parent StackPanel control, so you could change the Panel type if the stacking of the elements does not suit your layout ambitions.

With the second element activated (the TextBlock with “2.0”), open the Common Properties category of the Properties panel and you should see the Text property has an orange border around its value input box (see Figure 12.13) and the advanced property options square is also orange. This indicates that the value present is the result of a data binding.

Figure 12.13. The databound indicator of the Text property.

Click on the advanced property options button (little orange square) and you will be presented with a context menu that has an option at the bottom for data binding, as shown in Figure 12.14.

Figure 12.14. The Data Binding option of the advanced property options context menu.

The Create Data Binding dialog is presented, which should automatically show you the Explicit Data Context tab with the field list that the control is currently bound to, as shown in Figure 12.15.

Figure 12.15. The dialog control and the fields available for binding.

You could change the field here that the element is bound to using either the Fields selector or you could add a custom XPath expression.

Click Cancel to close the dialog or Finish if you selected a new Field.

Begin moving, resizing, and changing the properties of the control elements as you see fit. When you get to the TextBlock element that contains the starting text “SI.com is the league leader in...”, you will notice that the text extended out past the bounds of the ListBox. In the property search box, enter the word Wrap and you should then change the property to Wrap, which will resize the control for you.

Set the Top Margin property value to 10 to give a little space between this element and the previous element (see Figure 12.16).

Figure 12.16. The element formatting in progress.

You should now be looking at the distorted image, which is clearly incorrectly sized. The Image element also sits inside a StackPanel for no obvious reason. Drag the element in the Object and Timeline visual tree so that it becomes a child of the StackPanel parent element and not inside its own StackPanel. This should move the image to the very bottom of the screen.

Remove the empty StackPanel element now—it is no longer needed. Right-click on the Image element and select Order and then Send to Back from the subsequent context menus. Hopefully you should now have something similar to Figure 12.17 and your Objects and Timeline category should look like Figure 12.18.

Figure 12.17. The element positioning.

Figure 12.18. The DataTemplate elements.

Now the image placement is where you want it (or where I want it), you now need to do something about the size of the image. Because this image is from an RSS feed, there is no guarantee that the image will be the same every time or indeed the same dimensions, so you should really bind the Width and Height properties of the Image element to the field properties (if present) inside the data source.

With the Image element selected, find the Width and Height properties in the Layout category of the Properties panel. Starting with the Width property, select the advanced property option button and then select Data Binding.

Select the Explicit Data Context tab, drill down through the list of fields until you find the image, and then select the width: (Int32) field. Click Finish to apply this binding.

Do the same for the Height property. If all is well, you should end up with the correctly formatted image in your template, as shown in Figure 12.19.

Figure 12.19. The correct Image formatted dimensions are shown.

You will notice that the last element at the bottom of the visual tree is called ItemsControl. When you activate it, it appears that the ItemsControl element contains the rest of the fields being shown. The ItemsControl is showing a collection of items from the data source (the feed, in this case), so it could dynamically change both the number and the content of each item and the data template would handle it without error.

Double-click the ItemsControl element to activate it if you have not already done so and right-click the element in the Object and Timeline visual tree. Again you need to select Edit Other Templates, Edit Generated Items (Item Template), and then Edit Template.

You can now see the template in the Objects and Timeline category, which contains a single StackPanel and child TextBlock element. This confirms that the ItemsControl is a template for each item shown, so any change you make to this template is propagated to each item in the collection.

You should select and delete the TextBlock element. All the items will disappear but you are going to put it all back in a short while.

Double-click to activate the StackPanel element.

Find the Button control in the toolbox and add a single button as the child element of the StackPanel. You will now see quite a few buttons back on the artboard as shown in Figure 12.20.

Figure 12.20. All the buttons that represent items in this collection.

Looking at Figure 12.20, you can see that there are many more buttons than space. Obviously a scrollbar needs to be implemented somewhere so that the user can see all the items, but you can’t do it in this template because the template represents just one item. You will change this shortly.

With the Button element activated, find the Content property, again selecting the advanced property options button and selecting Data Binding.

Inside the Explicit Data Context tab, you need to remember that you are looking for the Item Array (because this is the Item collection you are working with). Find the appropriate field, which in this case is title: (String). Select it and click Finish.

You should now have some more meaningful content inside each of the Button element items. You can go ahead now and style the button to your requirements. My efforts are shown in Figure 12.21.

Figure 12.21. The Button elements with the bound title field as content.

You changed the DataTemplate to have buttons instead of TextBlock elements, and there was a reason for that. You want users to be able to click on a headline shown in the button and launch a browser taking them to the selected story. So, how do you achieve this? You can add a click handler for each button because the data template only defines one button. In addition, the content is dynamic, so you need to somehow parse the correct information though the button so that the application can act on it.

With the Button element activated, enter the word Tag into the property search box. You should see only one property, which is (funnily enough) called Tag.

Using the advanced property options, Data Binding menu, navigate inside the Explicit Data Context, to the Item Array, and find the field Link: (String), and then click the Finish button.

You will note that the Tag property now shows the orange border, confirming that the value is databound, but you need to take note of the value type that is contained in the property. Even though you bound directly to the string type field Link, you are actually binding to an XmlElement object. You will deal with this in the code when the object is used.

Each Button item now has the link for its corresponding headline embedded so that now all you have to do is extract that link and call the appropriate code using that information, as you will now do.

With the Button element still activated, open the Event Viewer list in the Properties panel, looking for the Click event. Add the click handler by double-clicking the Handler field box to open Visual Studio.

private void Button_Click(object sender, RoutedEventArgs e)
{
   }

The parameters available through this event handler are very handy. You can see the first one (object sender) is of type Object and it represents the object that made the call to this event. In this case, it is the Button element that represents the item. Using this information, you can first of all test that the Tag property does contain something and then you can begin to use the information as you please.

Complete the method by adding the code shown in Listing 12.7. You will notice that there is a call from an object called Process. You will need to add a using statement at the top of the code page to enable this:

  using System.Diagnostics;

You will also need to add the following using statement for the XmlElement type used:

  using System.Xml;

private void Button_Click(object sender, RoutedEventArgs e)
{
    if ((sender as Button).Tag != null)
    {
        XmlElement Target = (XmlElement)(sender as Button).Tag;
        Process.Start(Target.InnerText);
    }
}

Ridiculously simple? You can see in the code in Listing 12.7 that you are casting the object parameter sender to its original type, a Button element, which then allows you to retrieve the Tag property. First you check to make sure that the property object does not equal null, and then you convert the Tag property (which was of type Object, remember) to an XmlElement type. Process.Start() does all the rest, firing up the user’s default browser and loading the page given the URL link contained in the InnerText property of the XmlElement object.

Save the solution in Visual Studio and select OK to save the .sln file where Visual Studio suggests.

Back to Blend and the editing of the ItemsControl template is complete, so scope up to return to the first DataTemplate.

With the ItemsControl activated, you should see that the border of the control extends well beyond the visible area of the ListBox, as shown in Figure 12.22, and as you will remember, previously you noted the amount of Button elements generated by the ItemsControl.

Figure 12.22. The issues with the ItemsControl.

Right-click on the ItemsControl in the Object and Timeline category and select to cut the element.

Find the parent StackPanel (which contains most of the fields) and double-click it to activate it.

In the Panel Based Control collection in the toolbox, or the Asset Library, find the ScrollViewer element and add it as a child of the StackPanel.

It should be placed at the bottom of the StackPanel automatically as new items are stacked from the bottom. Stretch the ScrollViewer element so that it now reaches the bottom of the ListBox control.

Double-click the ScrollViewer element to activate it, and then right-click and select Paste to put the ItemsControl element inside it.

Ensure that the Width of the ItemsControl is set to Auto and the HorizontalAlignment is set to Stretch. (Make sure the Property search box is cleared to find the properties.) The ItemsControl should now extend the ScrollViewer to show a scrollbar vertically, as shown in Figure 12.23.

Figure 12.23. The completed application with the ItemsControl now scrollable.