#Expression blend download wpf how to
#Expression blend download wpf windows

Now letвЂ™s handle our states using WPF 4.0 вЂBehaviorвЂ™.ДЇor this demonstration, we will add a behavior вЂGoToStateActionвЂ™ to our вЂEllipseвЂ™ and handle the state on вЂMouse EnterвЂ™ event of the вЂEllipseвЂ™. Read my previous article Silverlight 4: Introduction to Behaviors to learn more. For handling visual states in WPF 4.0 or Silverlight 4.0, we have a very nice feature called вЂBehaviorsвЂ™. LetвЂ™s handle this visual state using a mouse event. Now letвЂ™s get back to our вЂStateвЂ™ window and add a transition to our вЂMouseOverStateвЂ™ and change its duration to 5 seconds as shown below:

To do so, select вЂPathListBoxвЂ™ > Go to properties window > Select вЂTransformвЂ™ section > In the вЂRender TransformвЂ™ group, select вЂRotateвЂ™ group and make its вЂAngleвЂ™ property value 360 as shown below: For this вЂMouseOverStateвЂ™ visual state, we will rotate our products by 360 degree. Now click an icon highlighted in yellow called вЂAdd StateвЂ™. Rename your state group as вЂMotionPathStatesвЂ™ as shown above. Once you open a State window, letвЂ™s click on вЂAdd State GroupвЂ™ as shown below: To add the states into our WPF application, we need to open a вЂStatesвЂ™ window from вЂWindowsвЂ™ menu. Now letвЂ™s create some вЂVisual StatesвЂ™ for our demonstration and handle those states using the behaviors in WPF 4.0. Now if you observe your Ellipse, you will see all the вЂProductвЂ™ images aligned to our вЂEllipse PathвЂ™ as shown below: Now select вЂPathListBoxвЂ™ and drag and drop вЂCollectionвЂ™ on the вЂPathListBoxвЂ™ from the вЂDataвЂ™ window. You will be asked to browse the folder where all the images are located. Rename вЂProperty1вЂ™ as вЂProductsвЂ™ and change its data type to вЂImageвЂ™. Now from the вЂCollection,вЂ™ right click вЂProperty2вЂ™ and click вЂRemove Property2вЂ™. Keep the default settings вЂas-isвЂ™ and give a name to our new sample data as вЂDummyDSвЂ™ as shown below:Д¬lick the вЂOKвЂ™ button. You will see a dialog which will ask you the scope of the вЂNew Sample DataвЂ™.

We can either change the data type or can add/remove the properties. This will create a collection with two properties. LetвЂ™s click the option вЂNew Sample DataвЂ™. Now click on вЂCreate Sample DataвЂ™ as shown below:

#Expression blend download wpf windows

To add the sample data, letвЂ™s open the вЂDataвЂ™ window from the Windows menu. You can draw an object from вЂAssetвЂ™ window and align it to our path or you can add sample data and align it to our path and you can also align a вЂTextвЂ™ to our path.ДЇor the first demonstration, we will use sample data which will hold collection of images to be aligned to our layout path. Now to align the objects around the layout path which is an вЂEllipseвЂ™, we need to add objects on our WPF form. Now if you check your вЂLayout PathsвЂ™ section in the properties window, you will see your ellipse got added as a layout path, as shown below: Now drag the вЂCircleвЂ™ (Select an object to use as a LayoutPath) highlighted by a yellow color square (as shown in the above diagram) over the вЂEllipseвЂ™ and click on the вЂEllipseвЂ™. Now draw an вЂEllipseвЂ™ on the art board as shown below вЂ“ (I am using a height of 300 and width of 400 for the ellipse control).ДЄfter drawing the ellipse on the art board, go to the вЂAssetsвЂ™ window in the controls section and add a control вЂPathListBoxвЂ™ on the вЂMainWindowвЂ™ as shown below:ДЄfter selecting the вЂPathListBoxвЂ™ control, go to the Properties window and find a section вЂLayout PathsвЂ™ as shown below : Change the background color of the вЂGridвЂ™ layout to вЂBlackвЂ™. Once the WPF application is created, change its вЂHeightвЂ™ and вЂWidthвЂ™ to вЂ500вЂ™ and вЂ600вЂ™ respectively. So letвЂ™s start by creating a WPF application using Microsoft Expression Blend 4.0 and call this application as вЂWPFMotionPathExampleвЂ™: To use Visual States, you will need some basic knowledge of Behaviors.

#Expression blend download wpf how to

We will also see how to animate these objects using Visual states in WPF.

In this article, we will see how to align some objects to a given path using the вЂPathListBoxвЂ™ control in WPF 4.0 and Expression Blend 4.

The PathListBox control is a new addition to the Expression Blend 4 SDK, and allows the elements inside a ListBox to lay out along any Path control shape.