Drupal

This custom control is created from a ProgressBar. The parts of the ProgressBar are hidden and the needle and circle with the numbers are added into the template. Then the rotation of the needle is data bound to the width of the PART_Indicator. The complete instructions for creating this custom control are found in Chapter 16 of the Blend Bible. Download the project file. Download the exe file. View the XAML.

In this tutorial I created a button that contains the picture of a certain user and has the name of the user below.  You can compare it with the login screen of Windows Vista. The purpose of the tutorial is to break the template of a control and rebuild it just the way you want. The only tool I use in this tutorial is Expression Blend.  You can download a PDF document that describes the different steps or you can also download the video that shows how the button is created.

A couple of days ago, I was working on program that can process the results of students.  I wanted to create a listboxitem for every student that contains a textblock for the name and a textbox to insert or update the result. After asking advise on different forums and a lot of trying and failing, I finally found a way to get this done. I use a ObservableCollection for data binding to my listbox.  Use a datatemplate to put different controls in the itemtemplate, and a value converter to indicate if the student is passed or not.

I've wrote a simple class with one function called Sum.  The function demands two numbers and returns the sum of the two numbers.  On my form I have two textboxes to insert the numbers, and one textbox that shows the result.  Nothing really special, isn't it? Well, I use databinding in XAML to call and execute the function Sum.  So, I don't need any code behind ( except the code for the function ).  This is a simple example, but the same technique can be used to fill a combobox or listbox with an array, collection, hashtable,... You can download the tutorial and the entire source code:

• the PDF tutorial ( 478 KB )
• the source code ( 48 KB )

P514 on creating a BulletDecorator

in the example you create the bullet as the text, would it not be more common to have the image as the bullet?

I guess it does not matter a huge amount but I was a little confused on this

thanks

Here we show how to replace the thumb of the slider with an image, but you can modify the thumb or the track to any look you want.
1. Choose SimpleSlider from the Asset Library and click and drag in the artboard.
2. While the slider is selected, choose Object -> Edit Control Parts (Template) -> Edit Template.
3. Open the expander beside PART_TracK and then open the expander beside Thumb and click [Thumb] to select it.
4. Choose Object -> Edit Control Parts (Template) -> Edit Template again. This shows you the thumb only. You may need to zoom in to see it clearly.
5. Now you can delete the ellipse and add in anything you want. We inserted an image. Click the ScopeUp button, (then you may need to click your window tab to view your window.)
6. If you want to increase the size of your slider, like we did, you can group it into a Viewbox and expand the Viewbox.
7. The border around our slider is simply a rectangle.
Download the .exe file. Download the project file. View the XAML.

Page 330
Replace the tutorial with Corrected steps for the tutorial on data binding a 3D object with a slider.

Page 424
This should replace the text with the same heading on page 424.
Naming your controls

The following are the steps for creating images that act like the check boxes in the figure above. The images do not look like check boxes, but they act like them, since they have different appearances for when they are checked or not. Download the .exe file. Download the project file. View the XAML.
For those who have the Blend Bible, these steps should replace the steps on page 463 of the Microsoft Blend Bible. (The steps on page 463 are a duplicate of what’s on page 465.)
1) Click the CheckBox button in the Toolbox, and click and drag in the artboard to position a check box there.
2) Choose Object -> Edit Control Parts (Template) -> Create Empty.
3) Choose Project -> Add Existing Item or Project -> Link To Existing Item to add or link three images to your project.
4) Right-click on an image in the Project panel and choose Insert.
5) Because the image stretches to fill the CheckBox control, use the Layout palette to shrink its Width. (Don’t worry about changing the Width property from Auto.) As you can see in the Figure below, the control parts consist of just an image and nothing else. Click the up arrow next to CheckBoxControlTemplate.

The check box control has an image in it and nothing else.
6) To assign your property trigger and animation timelines, you want to edit the Style of your checkbox rather than your template, because the animation affects the entire control and not just a part of the control. Select your checkbox (image) and choose Object -> Edit Style -> Edit Style. (Because you already created a control template, a custom style already exists for your control and you don’t need to create a new one.)
7) Click the Create New Timeline button in the Objects and Timeline palette. Accept the default Timeline1 name and click OK. Drag the playhead to half a second. In the Scale tab of the RenderTransform pane of the Transform palette, change X to 2 and Y to 2.
8) Click the Create New Timeline button in the Objects and Timeline palette. Accept the default Timeline2 name and click OK. Drag the playhead to half a second. In the Scale tab of the RenderTransform pane of the Transform palette, change X to 1.00001 and Y to 1.00001 to add the property and keyframe.
9) In the Triggers palette, click the +Property button and in the Activated When pane, click the down arrow beside the default property and choose IsChecked.
10) In the Actions When Activating pane, choose the defaults, which are Timeline1 and Begin.
11) In the Actions When Deactivating pane, choose Timeline2 and Begin.
12) Click the up arrow beside the name of the style, and test your check box by pressing F5.

This tutorial is included in our book, Blend Bible, but corrections that we made to it at the last minute did not make it into the final version of the book, so we are including the corrected version here. To see the XBAP, click here. To download the project, click here.
1) Choose Project->Add Existing Item to add a 3D model with a .obj extension to your project, and add the .mtl file as well. (To create the model in the first place, we used Blender and chose Add -> Mesh -> Monkey.)
2) Add the model into the artboard by right-clicking on the .obj file and choosing Insert.
3) Open the Asset Library in the Toolbox, click Slider, draw three sliders in the artboard, and name them, Slider1, Slider2 and Slider3. Select them individually and change their Maximum value to 360 in the Common Properties palette.
4) Select the 3D object, so that its transformation handles appear. (Open the expander beside the Viewport3D in the Objects list and keep opening expanders until you select the grouped object.)
5) Click the Rotation tab in the Transform palette, and change the value in the Y input box to any number other than 0. We changed it to 3. (The reason you do this is to generate some code in the XAML which you will change below.)
6) Click the XAML tab to view the XAML code. Find the following code or similar code:
<RotateTransform3D d:EulerAngles="0,3,0">
   <RotateTransform3D.Rotation>
      <AxisAngleRotation3D Angle="3" Axis="0,1,0"/>
   </RotateTransform3D.Rotation>
</RotateTransform3D>
7) Change the code to the following:
<RotateTransform3D d:EulerAngles="0,3,0">
   <RotateTransform3D.Rotation>
      <AxisAngleRotation3D Angle="{Binding Path=Value,
ElementName=Slider1}" Axis="0,1,0"/>
   </RotateTransform3D.Rotation>
</RotateTransform3D>
8) Test your slider by choosing Project -> Test Project or pressing F5 to be sure one slider works.
9) View the XAML again and add a few more lines of code, similar to what's above, but to reflect the new axis of rotation and different slider to databind to. See the expanded code.
"