Nextwave Software

2008.07.14 06:13:09

admin

Here is the picture guide on how to do data binding between two elements using Microsoft Expression Blend 2. In this example, I am showing how to bind between a Slider and a Circular Marker.

Step1: Select the element you would like to bind from. Example below shows how to browse to the Circular Marker element.

Step 2: Select the property of the element you want to bind from. The example below shows that the value property of Circular Marker will be binded.

Step 3: Click on the "Advanced Property Option" from the value property

Step 5: From the Create Data Binding Menu, select "Element Property" Tab, then browse to the element you want to bind to. After that select the property of the element you want to bind to.

Expression Blend | XAML

2008.06.26 06:21:48

admin

Lately there are numbers of sending email asking how to auto resizing the gauge , So i have decided to post a solution here .

There are couple of way how this can be done , but i will post a solution which i have posted in the forum .

and i will described how it works here :

1. We create a user control call MyGauge , in the MyGauge override the OnMeasure method .

private Size _oriSize;
public MyGauge()
{
InitializeComponent();
_oriSize = new Size(this.Width, this.Height);
}

protected override Size MeasureOverride(Size constraint)
{
this.circularGauge1.LayoutTransform = new ScaleTransform(constraint.Width / _oriSize.Width, constraint.Height / _oriSize.Height);
return base.MeasureOverride(constraint);
}

What we are doing here first we save the original size , whenever the user control get resize , user control will re measure with the new size . We calculate the ratio by doing a new size / old size , then appy a scale transformation to it .

Once it is done . You have a usercontrol that will resize the gauge .

Now , we need to use this gauge in a window .

We create a new project , then embed the newly created UserControl in the XAML

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:lala="clr-namespace:Demo;assembly=Demo"
    Title="Window1" Height="200" Width="200">
    <Grid>
        <l:MyGauge></:MyGauge>
    </Grid>
</Window>

But when you run the project , as you resize the window , the control does not resize !!

The solution to this problemi is in XAML

change

 <l:MyGauge Width="Auto" Height="Auto"></l:MyGauge>
 

Now the window will resize the user control automatically .

 download the application from here 

 http://nextwavesoft.com/images/fbfiles/files/Demo-ae3449dbe05da0c8a1ca07654d969596.zip

Auto Resizing | Gauge | XAML | Control | WPF