The property value indicator in the Blend and Visual Studio designer

One of the most essential tasks in Blend is to work with properties.

When working with properties it’s important to understand that all properties have a default value. If you don’t set the property in XAML the control will use the default value.

For instance; the group will stretch both its horizontal and vertical alignment unless you tell it to do otherwise by setting the property.

Example

Example

All properties result have a visual indicator in Blend, indicating how its value is set or obtained.

Here the white square indicates the value is set locally. The property’s value can be set in lot of different ways - it can be set as a local value, as a binding, StaticResource or as an ambient property.

All these different ways of setting the property have a separate colored indicator in Blend. We are now going to talk a bit about these different indicators.

 

The property value indicator in Blend

All the different indicators is shown using the Grid control in a Windows Store application.

The default value

The default value - when the value when a property is not set - will appear as grayed out in Blend or Visual Studio.

Here we see the margin is the default value.

The xaml looks like this:  <Grid />

In the xaml of the grid we can see the value is no where to be found. The control will therefore use it's value for the property.

 

The local value

Setting a property explicitly in xaml – for instance by changing the property to a value in Blend, we will see that the indicator will be white, indicating a local value has been set:

Having set the Margin results in a local indicator, and the xaml looks like this: <Grid Margin="10,0,10,0" />

Important note: if you set the local value to the same as the default value, it’s still set locally and the default value doesn’t apply even though it's the same.

Example with locally declared margin with the same value as default: <Grid Margin="0,0,0,0" />

The square still white since we explicitly declared the margin locally in the xaml.

 

The StaticResource value

One of the great benefits of working with xaml is that it’s very easy to obtain a high reusability of different kinds bindings and resource references. 

For instance you could have a page background color you would use across all pages inside your app. By declaring the color as a central resource and reference the very same resources on all your pages you’ll get a much cleaner and easy maintainable code.

By Referencing a resource as a staticresource the indicator will turn green.

And the xaml will look like this:

<Page.Resources>
<SolidColorBrush x:Key="RubinRedBrush" Color="#FF6A0E0E"/>
</Page.Resources>
<Grid Background="{StaticResource RubinRedBrush}" />

Pro tip: To create this kind of resource you can click the white indicator, and then click Convert to new Resource.

The Ambient value

Sometimes you can see a property’s indicator be blue and the tooltip for the property saying ambient. The reason for this is the fact that the value is obtained through a style or a template.

If the background comes from astyle on the grid the indicator would be blue like this:

The reason for the blue indicator is because we've set the style on the grid using xaml like this:

<Page.Resources>
<Style x:Key="GridStyle" TargetType="Grid">
<Setter Property="Background" Value="#FFA80D0D"/>
</Style>
</Page.Resources>
<Grid Style="{StaticResource GridStyle}" />

 

The binding value

Bindings is one of the fundamental things when working with xaml and mvvm. If you create a binding in Blend or Visual studio the indicator in the deisgner will turn yellow.

The yellow color means the binding is set and it will now use the binding to obtain it's value.

The xaml example: <Grid Background="{Binding BackgroundBrush}" />

Pro tip: The binding can be created by clicking the indicator and choosing Create data binding

Final words

The visual indicator can be a great help to see how the value you are working on is set, and where to look if you want to alter the value. If you are referencing a resource you can in most cases edit the resource directly by clicking the indicator and choosing 'Edit resource'. But remember.. You are then changing the resource that more controls or pages could be referencing.

Thanks for reading and happy coding. Please reach out to me if you have questions or need help understanding how indicators work in Blend and Visual Studio.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.