Expression blend control template tutorial

Now you need to apply the style that you added in the resources to the slider. Expand the style that targets RadSlider and add a key to it as shown in the screen shot bellow. Apply the style to the slider, again can be done in two ways. With all the steps completed so far, you can easily edit the template of the slider.

Source code for this tutorial: StylingSlider. Articles on Visual State Manager. Using ControlTemplates. Valio now works as a Product Manager and strives to make every customer a successful customer. Subscribe to be the first to get our expert-written articles and tutorials for developers! Progress collects the Personal Information set out in our Privacy Policy and Privacy Policy for California Residents and uses it for the purposes stated in that policy. You have the right to request deletion of your Personal Information at any time.

I acknowledge my data will be used in accordance with Progress' Privacy Policy and understand I may withdraw my consent at any time. We see that you have already chosen to receive marketing materials from us.

If you wish to change this at any time you may do so by clicking here. Click on the button corresponding to Parameters Collection in the top-right side of the window. The ParameterItem Collection Editor window will open. Here we need to add a new parameter item. Click on Add another item bottom-left side of the window.

This will create a parameter that will use the name of the WFNavigation control which is a navigation button and pass it through the WFNavigationParameters control to the controls inside the GenericControls page.

If the button is renamed, the new name will be passed as a signal prefix to the controls inside the navigation source page. Knowing the signals we are using are Oil. Temp, we will rename the WFNavigation control to "Oil".

This SymbolicText will be displayed on the button. In our case, the SymbolicText is "Oil Page". As expected, the name of the button is passed to the navigation source page controls as a signal prefix, thus composing the signal name. Change the SymbolicText to "Water Page" too, and run the visualization again. When clicking on the Water Page button, the parameter passed to the same navigation source page changed from "Oil" to "Water".

This method can be used for creating large scale visualization without having to create a control for each signal. The easiest technique of animating any irregular shape in Expression Blend is using an existing animated shape and change its appearance. The appearance alteration will be made by replacing the layout data of the animated control's objects with the layout data of the irregular shape.

For this example, we will use the WFAnimatedRectangle1 control as our animated control. The irregular shape can be drawn using the pen tool. Select the irregular shape and head on to the Properties panel. Expand the Appearance category if collapsed. Under the Appearance category, the Data field should exist. Copy the information from the Data field to clipboard.

In the Properties panel, expand the Appearance category and find the Data field. Paste the copied information in the PrimitiveElement's Data field. Now the WFAnimatedTrapeze1 has the shape of the irregular shape. The fill animation works just like in the original shape. Check out this article and learn how to create animations based on WEBfactory signals in Expression Blend.

The first method implies working with the WFTimeline1 control and trades control for simplicity. The second method is working with the WFIndicator1 control.

Though this second method is somehow complex, it allows a high level of customization. In a new Expression Blend project, right-click the References item from the Projects panel and click on Add Reference Select all the content of the Standard folder and click Open to add as references.

It doesn't need to be visible in order to work. Place the object that will be animated on the MainPage In this example, a rectangle will be used. Any other control that can be animated on a Soryboard can be used. Create a new Storyboard for animating the Rectangle.

Name the new Storyboard "DemoStoryBoard". Animate the rotation of the rectangle on the new Storyboard. While the border of the MainPage is red the Storyboard is recording the control's alterations on the timeline , move the Timeline cursor at the time marker 1. While still having the Rectangle selected, go into the Transform property panel, select Rotate and rotate the Rectangle at degrees.

Notice that on the Timeline, an animation has been defined between time marker 0 and time marker 1. Stop the Storyboard recording by pressing the red recording button from the top left side of the MainPage.

Select the WFTimeline1 control and head into the Properties panel. Expand the WEBfactory properties tab. From the Assets panel, place the WFIndicator1 control on the main page. From the States panel, select the state that needs to be used in the animation. In this example, the animation will be between the State1 and State2. Alter both states according to the expected result. As the animation will be a transition between State1 and State2, the State1 should represent the initial state of the control before the animation, and State2 the final state of the control after the animation is complete.

In our example, for the State2, the graphic content found in State1 has been rotated degrees. After the initial and final states have been designed, click on the Add transition button on the right side of the State1 bar. Make sure to add length to the transition 2 seconds in our example. The transition will animate the rotation State1 - 0 degrees to State2 - degrees. Once the transition between states has been added, notice the new Storyboard timeline from the Objects and Timeline panel.

This timeline represents the transition between State1 and State2, and can be adjusted easily. While having the re-skinned WFIndicator1 control selected, expand the WEBfactory property category from the Properties panel and click on the States tab. In different situations, a project may require a control that is able to display an image and change it based on the value of a signal.

There are several methods to accomplish this task without a dedicated control, but in this article we will focus on one recommended method: defining an image as an ImageBrush resource and applying it on a WFRectangle1 control.

In our Expression Blend sample project, we have defined a folder named Image. This folder will contain the images to be defined as ImageBrushes and further used in the WFRectangle1 control. The Images folder is not required but it is recommended in order to keep the project organized. Now it's time to add the pictures we need to use in the project in this new Images folder. Right-click on the Images folder and select Add Existing Item In the Add Existing Item dialog, browse the computer for the desired images, select them multiple selection is available using Shift or Control and click Open to add them to the project.

Expression Blend will ask if you want to embed images larger than KB. Confirm the dialog by clicking Yes. Next we need to define the images as ImageBrush resources. Place the first image on the MainPage canvas. In the Create ImageBrush Resource dialog, name the new brush and select where to define the brush. In this example, we will use a Resource dictionary, as it provides the opportunity to reuse the same resources in multiple projects.

Click OK to confirm. If the Resource dictionary option is not available, it means that no resource dictionary is defined. Click on the New Repeat the last two steps 6 and 7 for all the images that need to be defined as ImageBrush resources. We will use the WFRectangle1 control in order to be able to set up different states, each one showing one ImageBrush for a signal value.

Wile the control is selected, go to the WF Silverlight Controls properties category in the Properties panel. Click on the States button to add the required states. For the first state, let's set up the trigger condition: open the ConditionParameter Editor using the corresponding button.

Add a parameter name and select the desired signal to trigger the state. Confirm the dialog by pressing OK. Next, set the ConditionType to Equation and add the required condition to trigger the state. Now that the triggering condition is set up for the first state, we need to display the first ImageBrush when this state is on. Click on the Background color box.

In the pop-up window, select the Brush Resources tab and select the first ImageBrush. Now that the first state is set up, repeat the steps 3, 4, 5 and 6 to configure the other state, using the appropriate condition and ImageBrush. When running the project, the WFRectangle1 control will display the two images using the ImageBrush resources configured in the control's states properties.

Align the controls in the desired position and select both of them. Right-click on the selected controls and go to the Group Into option form the contextual menu. Select the Grid for grouping. Select the Grid element that contains the two controls and go to the States panel in the top-left part of Expression Blend's visual interface.

Click on the Add State Group button to create a new state group. Name the states group States. The state group will contain the two states that will be created in the next step.

The two states will represent the normal Small size and the scaled Big size of the Grid. To create the two states, click on the Add States button from the States group. Create two states using this method, and name the first state Big and the second state Small. In the current scenario, the transition time is set to 0. Select the Big state and scale the grid containing the two controls to the desired size.

This will be the zoomed state. Leave the Small state as it is. The Small state will be the normal zoom state. After setting the sizes for the two states, the MainPage will display the size changes if a state is selected. To assign the Big state, make the following changes:. Run the project by pressing F5. When hovering over the controls, the grid will expand to the desired size and shrink back when the mouse is moved out.

This tutorial will guide you through the process of creating a Silverlight visualization containing a button for opening a. For guiding purposes, we will name the files Test. Add as references the following. To open the files, we will use the WFlinkButton1 control. Each one will be programmed to open one file. This properties allow the user to configure the method of opening the link, the address of the link and the security authorizations for the control.

In order to make the. The rest of the settings should be left as default. Check out this article and learn how to open windows on screen keyboard or any other local exe file from code. Opening the on screen keyboard from code is very important when preparing visualizations for touch screen devices. In code, this is done by listening for an event and reacting to that event. In order to make possible the interaction between the Silverlight visualization and the Windows system, some security settings need to be adjusted.

In the Internet Options window, go to the second tab named Security. Select Internet for the zone, and click on the Custom level In the Settings list , navigate to the ActiveX controls and plug-ins section, and enable all the options under this section. There is one more tweak to do in order to bypass the Windows security: copy the.

This is necessary because the System32 folder is protected. In out example, we will copy the osk. Name the project StartExe. If any error encountered, a popup message will appear. This method works for all. The drawbacks of this method is the low security level necessary to access the system.

The following tutorial will guide you through the process of setting up an Expression Blend project in which parameters are passed from a control from the MainPage to the controls from the popup window opened by the main control. In order to pass parameters from a control to a popup window, we will make use of the Name placeholder 46643 and Parameter Control placeholder [PC:ParameterName].

Click on the following link to find out more about placeholders:. StringPlaceholdersResolver Examples and Tutorials. The following tutorials is split in X sections. You can jump directly to the desired section by clicking the links below:. Setting up the project. Setting up the popup window.

Setting up the parameters. Applying the parameters in the popup page. Testing the popup window. Add the DLL files from the Create a new page in our project. In the New Item dialog, select Page form the items list and name it Status.

Click OK to add the page to the project. The WFNavigationParameter control can be placed outside the page borders so it won't be displayed at run time.

Click on the button corresponding to the PopupParameters property from the WF Silverlight Controls property category. The second parameter will represent the name of the control that will be displayed in the in the header of the Status popup page by the WFLabel1 control.

Next we need to apply them to the controls. Select the WFLabel1 control. This makes the property trigger activate when the IsMouseOver property is true when the user points to the button with the mouse. This means that any changes you make to the property values of glassCube while recording is on will become an action that takes place when IsMouseOver is true.

You have now created your first property trigger. Press F5 to run the application, and move the mouse pointer over and off the button. You should see the glass layer appear when you mouse-over the button and disappear when the pointer leaves.

While recording continues, switch your selection from glassCube to outerRectangle. This sets the Stroke to the typical highlight color used by buttons.

Press F5 to see the effect when you mouse over the button. Make the content of the button appear a little blurry when the glass appears over it. To return the Properties panel back to what it was before you did the search for BitmapEffect , clear the text from the Search box.

At this point, we have used a property trigger with several associated actions to create highlighting behavior for when the mouse pointer enters and leaves the button area. Another typical behavior for a button is to highlight when it has focus as after it is clicked. We can add such behavior by adding another property trigger for the IsFocused property. Create property trigger for IsFocused: Using the same procedure as for IsMouseOver see the first step of this section , create another property trigger for the IsFocused property.

While Trigger recording is on , add the following actions to the trigger:. As the final step in this walkthrough, we will add animations to the button. These animations will be triggered by events—specifically, the MouseEnter and Click events. Create an animation timeline: Next, associate an animation timeline to the MouseEnter event.

After you press OK to create a new timeline, a Timeline Panel appears and "Timeline recording is on" is visible in the design panel. This means we can start recording property changes in the timeline animate property changes.

Create a keyframe: To create an animation, select the object you want to animate, create two or more keyframes on the timeline, and for those keyframes, set the property values you want the animation to interpolate between.

The following figure guides you through the creation of a keyframe. Press F5 to run the application. Move the mouse pointer over the button. Notice that the glass layer shrinks on top of the button. Create another Event Trigger and associate a different animation with it: Let's add one more animation. Use a similar procedure to what you used to create the previous event trigger animation:.

Create a new event trigger using the Click event. Associate a new timeline with the Click event. With the keyframe at 0. You have completed a customized button. You did this using a button template that was applied to all buttons in the application. If you leave the template editing mode see the following figure and create more buttons, you will see that they look and behave like your custom button rather than like the default button.

Because of this, when you set the background color of the individual buttons, the background you set will be used for those respective properties. Try changing the backgrounds now. In the following figure, different gradients are used.