Deborah's Developer MindScape

Posted my first curations today on Curah! Curah! is a Microsoft site for creating and managing curations (http://curah.microsoft.com).

From the Microsoft literature: "Curah! is designed to provide a simple and fun way to to share your expertise and passion by curating the best answers on the web. Our service empowers you, the community, and Microsoft’s partners to share personal knowledge, advice, and guidance to users of Microsoft products and technologies."

Here are the links to my curations:

• Visual Studio 2013 IDE
• XAML Tips and Tricks

Let me know what you think.

Enjoy!

In Visual Studio 2013, there were quite a few changes/enhancements to XAML Intellisense. Prior posts covered the most noticed new features … this post covers some of the other changes to Intellisense for XAML.

Prior posts on XAML Intellisense:

• Intellisense for Resources
• Intellisense for Binding Expressions
• Intellisense for Bindings and the Data Context 

This post covers:

• Fuzzy Matching
• Camel Case Matching
• Substring Matching

Fuzzy Matching

Fuzzy matching finds XAML element and attribute names, even if you mistype them.

In the screen shot below, typing "Stakpa" picked up StackPanel.

I tried several other common typing mistakes and was unable to get this to work consistently. It seems that it needs the first few characters to be correct.

In the screen shot below I just missed the "t" and got this:

Camel Case Matching

Camel case matching allows you to type the first letter of each "word" in a name to find it in Intellisense.

Though this is called camel case matching, it also uses Pascal case matching since the majority of the elements and attributes are Pascal cased.

In the screen shot below, I typed "SP":

Substring Matching

Substring matching finds names using a substring search.

In the screen shot below, I typed "Box":

This finds the first occurrence of Box anywhere in the string.

But this is a find and not a filter. So it does not filter the list to all elements containing "box". It just advances to the first match. And there is no way to get to the next match.

Use these features as you work with XAML to more quickly select the element or attribute you want from Intellisense.

Enjoy!

For more information on the many new Visual Studio 2013 features, check out my new Pluralsight course: Mastering Visual Studio 2013.

The new Intellisense for Binding expressions in Visual Studio 2013 (introduced in this prior post) provides a quick and effective way to add property bindings to your XAML. But it doesn’t "just work". You have to set the Data Context to enable Intellisense.

To get Intellisense to work with Binding expressions, you need to provide Intellisense with a design-time instance of the class containing the properties for the binding. This is done through the Data Context.

If your XAML-based application uses the Model, View, View-Model (or MVVM) pattern, the Data Context is set to an instance of the View-Model.

There are several options for where and how you set the Data Context to an instance of the View-Model, depending on the framework you are using (if any) and your approach.

One option is to set the Data Context directly in the page as shown below:

In this example, the Data Context is set to the View-Model directly in the XAML. The vms prefix in the code above is the abbreviation set for the View-Model namespace.

By setting the Data Context for the page directly in the XAML, an instance of the View-Model is constructed when the page is displayed in the designer. So the Intellisense has an instance of the class at design time that it can use to determine the bindable properties. You also get the added benefit of design-time data, as shown below.

Alternatively, you could set the Data Context in the code behind or use a factory pattern. But if you use any technique other than setting the Data Context within the XAML, Intellisense won’t have a design-time Data Context and therefore won’t display the list of bindable properties.

If you don’t have the Data Context defined within the XAML, but still want the benefits of Intellisense and design-time data, you can set up a design-time only Data Context instance. This is shown in the example below.

The d: prefix is for design-time only features. You may have used it to define the DesignHeight and DesignWidth of a page as shown in the Page markup tag above.

Assigning a value to the d:DataContext sets the design-time Data Context and enables basic Intellisense for Binding expressions.

In this example, the design-time Data Context is set to d:DesignInstance with a Type set to vms:CustomerListViewModel. This is the same View-Model used in the first example above.

The IsDesignTimeCreatable=true attribute ensures that an instance of the type is created at design time. By adding this attribute, the Intellisense will display all of the bindable properties. In addition, you get design-time data.

Use one of these techniques to take advantage of Intellisense for Binding expressions (and design-time data).

Enjoy!

For more information on the many new Visual Studio 2013 features, including a step by step walk through of the design-time Data Context, check out my new Pluralsight course: Mastering Visual Studio 2013.

Visual Studio 2013 provides Intellisense for your Binding expressions!

One of the great things about XAML is its binding capabilities. But how much time have you wasted trying to find the correct name and spelling of properties for your bindings?

Not any more!

The Binding mark-up extension now supports Intellisense!

• Move the cursor into the Binding markup extension anywhere after the Binding keyword.
• Press Ctrl + Space

Yes!

• Arrow down to the desired property.
• Press Enter or Tab to select it.

Notice that the drop down list contains all of the attributes for the binding (such as FallbackValue and Mode)  in addition to the properties of the current data context. That makes the list rather long.

Luckily the properties of the current data context are identified in the list with a different icon. So you can readily see which of the Intellisense list items are your bindable properties and which are attributes of the binding markup extension.

Enjoy!

For more information on the many new Visual Studio 2013 features, check out my new Pluralsight course: Mastering Visual Studio 2013.

Visual Studio 2013 now provides Intellisense for your XAML resources.

If you code your XAML directly using the Code Editor you’ve seen the XAML Intellisense. Sure, it helps by giving you the list of element tags and the valid attributes of the type.  But in prior versions of Visual Studio, Intellisense was lacking in a few key areas. For example, it did not help you find your resources.

One of the really great things about XAML-based applications is the flexibility and control in defining styles for the displayed elements. But as we add more styles, it gets harder and harder to keep track of all of the style resources.

Even in a small application it’s hard to remember which styles have been defined. The user wants the column headers to be left-justified. Did we already create a style for that?

In prior versions of Visual Studio, we would have to start searching through our style resources to see if we have a left-justified header style.

Not any more!

The Static Resource mark-up extension now provides Intellisense!

• Move the cursor into the Static Resource extension anywhere after the StaticResource keyword.
• Press Ctrl + Space

Sweet!

• Arrow down to the desired style.
• Press Enter or Tab to select it.

And the Intellisense is smart! The drop down list only contains styles appropriate for a TextBlock element.

Using Intellisense on a Border element displays this:

The drop down list does not include any of the TextBlock styles, only the styles defined for a Border element.

Intellisense also understands scope. It will combine resources appropriate for the current scope including resources defined in the page and resources defined in resource dictionaries.

The Intellisense available with the StaticResource mark-up extension helps you locate and select the styles you need when you need them.

And it works for more than styles. If you have any other resources defined in your application, such as references to your converters, those also support Intellisense.

Enjoy!

For more information on the many new Visual Studio 2013 features, check out my new Pluralsight course: Mastering Visual Studio 2013.

If you have done any coding with XAML, like me you have probably wished for some of the code editing features that all of the other languages have. Features like Intellisense and Go To Definition. With Visual Studio 2013 our wish has come true!

These new XAML code editing features are so exciting its hard to know where to start. How about with a list of the some of the key enhancements?

• Intellisense for Resources
  • Displays the list of resources appropriate for the element type.
• Intellisense for Binding Expressions
• Displays the properties of the current data context.
• See the additional post on Intellisense for Bindings and the Data Context for information on enabling Intellisense for Binding expressions.
• Go To Definition for Resources
  • Let’s you quickly navigate to the definition of the resource.
• Go To Definition for Binding Expressions
  • Takes you to the code for the property identified in the binding expression.
• Start/End Tag Refactoring
  • Changing a start tag will now automatically change the end tag and vice versa.
• Better Commenting Support
  • XAML now supposes nesting of comments.
• Code Snippets
  • Provide blocks of code you can insert into your XAML.

These improvements are for all XAML-based types of applications including Silverlight, WPF, Windows Store or Windows Phone apps.

Enjoy!

For more information on the many new Visual Studio 2013 features, check out my new Pluralsight course: Mastering Visual Studio 2013.

Gradients are a good way to make your application more visually interesting. They turn a flat solid color into something more natural and appealing to the eye by creating an illusion of light and shadow.

For example, compare this image which uses flat colors:

to this image that uses gradient colors:

For some great uses of gradient effects in user interface designs, see this link.

If you are not familiar with the terminology, a gradient is basically a blending of colors with an even graduation from one set of color values to another set of color values. Notice in the second image above, the white gradually blends into blue from the upper left corner to the lower right corner.

In Silverlight and WPF, you can set colors for just about anything, and wherever you can set a color you can often set a gradient. These examples color the background of the Canvas, but you could also paint Buttons or Rectangles or whatever.

In XAML, there are two primary types of gradients: Linear and Radial.

Linear Gradient

A linear gradient defines the graduation of colors along a line. The example below shows a linear gradient following a line from white at the top to blue at the bottom:

The XAML code required to set the linear gradient shown above is as follows:

<Canvas>
    <Canvas.Background>
        <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightSteelBlue" Offset="1"/> 
        </LinearGradientBrush>
    </Canvas.Background>
</Canvas>

This specific code sets the gradient for a Canvas background, but you could use it anywhere a gradient is allowed.

The first properties you need to consider when defining your gradient are the StartPoint and EndPoint properties. These properties define where the gradient line begins and where it ends.

Think of the canvas as a rectangle with the (0,0) point in the upper left corner and the (1,1) point in the lower right corner as shown below:

If you set the StartPoint to 0,0 and the EndPoint to 1,1, the gradient will start in the upper left and end in the lower right as shown in the Address dialog example shown at the top of this post. (This is the default value, so if you don’t set the StartPoint and EndPoint properties, this is the gradient you will get.)

By setting the StartPoint to .5,0 and EndPoint to .5,1, the gradient line begins in the middle top of the rectangle and ends in the middle bottom, creating the affect shown above.

If you want the gradient to appear from left to right, set the StartPoint to 0,.5 and the EndPoint to 1,.5. For right to left, set the StartPoint to 1,.5 and the EndPoint to 0,.5.

You can use any point in the rectangle as the StartPoint and EndPoint to create different effects. For example, you could set the StartPoint to .2,.2 and the EndPoint to .8,.8 to create this effect:

Notice the upper left corner is completely white and the lower right corner is completely blue. The gradient does not begin until .2,.2 and then ends at .8,.8.

The other important property to use when working with a linear gradient is the GradientStop. It defines the colors and where they start. The first GradientStop in this example is set to white and starts at an Offset of 0. The second GradientStop is set to LightSteelBlue at an Offset of 1.

Think of the Offset as the point on the gradient line where 0 is the origin of the line and 1 is the termination of the line. Note that if your StartPoint and EndPoint properties are not at a point of origin (such as .2,.2 and .8,.8), the Offset will still begin at the origin and end at the termination of the gradient line.

You can use any number of GradientStops (with a minimum of two) to include multiple colors in your gradient. For example, this gradient changes from White, to LightSteelBlue, to SteelBlue, back to LightSteelBlue and then White:

<Canvas>
    <Canvas.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightSteelBlue" Offset=".2"/>
            <GradientStop Color="SteelBlue" Offset=".4"/>
            <GradientStop Color="LightSteelBlue" Offset=".8"/>
            <GradientStop Color="White" Offset="1"/>
        </LinearGradientBrush>
    </Canvas.Background>
</Canvas>

And the effect is as follows:

Radial Gradient

A radial gradient defines the graduation of colors that radiate outward from an origin. The example below shows a radial gradient radiating out from the center:

The XAML code required to set a radial gradient is as follows:

<Canvas>
    <Canvas.Background>
        <RadialGradientBrush GradientOrigin=".5,.5">
            <GradientStop Color="White" Offset="0"/>         
            <GradientStop Color="LightSteelBlue" Offset="1"/> 
        </RadialGradientBrush>
    </Canvas.Background>

This specific code sets the gradient for a Canvas background, but you could use it anywhere a gradient is allowed.

The first property you need to consider when defining your radial gradient is the GradientOrigin. It defines where the gradient begins.

Think of the canvas as a rectangle with the (0,0) point in the upper left corner and the (1,1) point in the lower right corner as shown below:

In this example, the gradient radiates out from the center point, which is .5,.5. (This is the default value, so if you don’t set the GradientOrigin property, this is the gradient origin you will get.)

The other important property to use when working with a radial gradient is the GradientStop. It defines the colors and where they start. The first GradientStop in this example is set to white and starts at an Offset of 0. The second GradientStop is set to LightSteelBlue at an Offset of 1.

This GradientStop property in the radial gradient is similar to the linear gradient. The primary difference is that the gradient line begins at the GradientOrigin and radiates outward.

You can use any number of GradientStops (with a minimum of two) to include multiple colors in your gradient. For example, this gradient has an origin of .2,.2. It then changes from White, to LightSteelBlue, to SteelBlue, back to LightSteelBlue and then White:

<Canvas>
    <Canvas.Background>
        <RadialGradientBrush GradientOrigin=".2,.2">
            <GradientStop Color="White" Offset="0"/>
            <GradientStop Color="LightSteelBlue" Offset=".2"/>
            <GradientStop Color="SteelBlue" Offset=".4"/>
            <GradientStop Color="LightSteelBlue" Offset=".8"/>
            <GradientStop Color="White" Offset="1"/>
        </RadialGradientBrush>
    </Canvas.Background>
</Canvas>

And the effect is as follows:

Feel free to experiment with both types of gradients to produce interesting visual effects.

Enjoy!