15.02.2015 Views

C# 4 and .NET 4

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

Visual state Manager ❘ 1027<br />

With a data grid you can use Read, Selected, <strong>and</strong> Edit states to define different looks for a row, depending<br />

on user selection. MouseOver <strong>and</strong> IsPressed can be states as well that replace the triggers, which have been<br />

discussed earlier.<br />

The example code displays different states of a baby <strong>and</strong> defines the states Sleeping, Playing, <strong>and</strong><br />

Crying. The states are defined within the element VisualStateManager.VisualStateGroups. Here the<br />

states are defined within a Button element because they are needed only there. With the content, the Button<br />

defines a Border <strong>and</strong> an Image element that are named border1 <strong>and</strong> image1. With VisualStateManager,<br />

a single VisualStateGroup named CommonStates is defined. This state group contains VisualState<br />

elements. Within a visual state a Storyboard is defined. With all the states the storyboard contains a<br />

ColorAnimation that changes the color of the border brush, <strong>and</strong> ObjectAnimationUsingKeyFrames. This<br />

keyframe animation just makes a one-time change to the Source property of the Image. The UriSource<br />

property requires a BitmapImage that is created <strong>and</strong> a filename that is stored within the project.<br />

The VisualStateGroup also contains VisualTransition elements that define what should happen<br />

before a state changes. With VisualTransition you can specify both From <strong>and</strong> To values. With these<br />

you can create different transitions when the state changes from Sleeping to Crying as opposed to from<br />

Playing to Crying. In the example, only the To property is used, so this transition applies no matter what<br />

the previous state was. With the transitions, the Width property of the Button <strong>and</strong> the Thickness of the<br />

Border element are changed:<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

www.it-ebooks.info

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!