Silverlight Game development tips: fan arrangement elements

The landlords swept the north and south, in the Spring Festival Gala to do free promotion, chess game platform almost as standard, but the card game is always the same as the same-horizontal arrangement, if the fan arrangement should be more in line with the real, recently played a Uno game on the WP7 is a fan arrangement, feeling very good, Today we are following to achieve a scalloped hand effect on Silverlight.

May see this preview some friends will laugh, this can use RenderTransform implementation, said before, just want to set the origin of the rendertransformorigin on the outside of the card on the line, and then rotate, so that can be achieved, but the calculation is really troublesome, Consider the number and location of the cards, not rehash today, but with Pathlistbox, Pathlistbox is not in the standard SDK of Silverlight, it is an extended control of blend, to achieve the effects of path animation.

Now first create a card control, this time do not create a new, first on the canvas to draw, the following figure:

Select the elements that are drawn and click the right mouse button to select the option to make the user control:

Enter a name:

This will create a custom control that eliminates the hassle of sizing, as shown in the following figure:

Now we add a user-defined control to mainpage look at the effect, you need to find the user control in asset (assets), if not, you need to compile: ctrl+alt+b

Now draw a circle and select Ellipse in the tool:

Watch the defined path, draw the position, turn the circle into a path, and then select Direct Selection in the toolbar, select the following two lines, these two lines are not needed, so just press the Del button to delete:

There is only one path that will be used as a route:

Select Path, click the right mouse button to choose to make the layout path function, this is actually a shortcut, if the normal operation needs to refer to the DLL and then add the corresponding control, I do here in a simple way:

Pathlistbox will now appear in the layout, and the path below is also added to the base of the Pathlistbox path.

Now drag the card control into the Pathlistbox, and you'll notice that the cards are at the beginning of the point:

Select Pathlistbox below and set the parameters as follows:

Now copy a few card out to see the effect of it, how, very good bar.

But this arrangement still feels awkward, adjust path can achieve your goal, but there is a better way to solve, adjust the parameters to the following parameters:

That means the starting point is at 30%, and the end point is 40%, you can adjust it dynamically, see the effect, it's great, make it more interesting to animate:

Finally, the black line is removed so that it looks more natural:

Select path to set the stroke color brush to none.

Okay now it's done, I made a little animation for card to look more interesting, on the basis of this little skill, I believe you can expand more play out, today is the end of it:

This project source code downloads the address as follows: Click to download directly