Blog

We are going to work on simple Windows Phone game and see how SvFx can fit in this area. It would be great if you can send us ideas and suggestions and we'll try to implement them for you.

It can be something you might use in your free time. And it can be something you will use again and again.

We are going to use SvFx library for Windows Phone in game development. This way we can see how SvFx can be helpful in this area. Plus we will polish all corners of the product. It should be also very exciting. So please post your suggestions.

Note, it should not be a complex game. It will be something that we'll create in 5-6 steps, and we're going to blog about each step of development. And of course everything here will be free. You wish - and we try to implement ;)

So, lets start. Here is the first step. Empty Windows Phone application.

And the first question is: What would you like to see in the game?

We're waiting for your comments. It can be a simple reply in twitter: "I do not like games", "I like this idea", "I like arcade" and so on.

Each time when you need to use something more advanced then regular ContentControl, when you need to dynamically change any content on your page like text, images or any FrameworkElements, when you need to navigate through Pages and use animations for that - you need to use TransitionControl.

The following image shows TransitionControl inside Windows Phone application.

Download Source

Let's see steps required to create such application:

First, we need to add 3 assembly references from the installation folder: Cellbi.SvCommon.dll, Cellbi.SvEffects.dll and Cellbi.SvTransitionControl.dll as shown below.

Next we add new namespace prefix for the TransitionControl.

Place TransitionControl declaration into the ContentPanel (inside MainPage.xaml).

Now we can select animation type from the list of built-in patterns.

Now we can set TransitionControl's content. We'll use images, however it is possible to use any content.

TransitionControl can manage animation of text by symbols, words and lines using ready animation patterns.

Let's add code to change content on click.

Include new images into the project.

Use the first image as a default content of the TransitionControl.

And add some code to manage content change on click.

We are done. You can use PatternType property to change animation type. There are for about 500 animation patterns and this will not require any changes in the code behind.

It is possible to add your own animation patterns into patterns gallery or change existing animation easily. Read more on this this in the previous article.

SvFx for Windows Phone includes all SvFx controls ported to Windows Phone platform. You can use Carousel, TransitionControl, SlideShow and TextAnimation controls to build applications for Windows Phone mobile devices.
About 500 ready animation patterns included.

There are several notes about this release:

• Currently there is no toolbox items registered inside VisualStudio.
• It is not possible to use single "cellbi" XAML namespace prefix.
• This release does not include samples.
• There is no documentation included.

We would like to get your feedback.
Please help us make SvFx controls better.

TransitionControl with custom pattern gallery:

Download Source
Try SvFx
Buy Now

I will use TransitionControl as an example, however the same code can be applied to all SvFx controls supporting Pattern property: SlideShow, TextAnimation, ChildWindow Effects etc.

First of all we need to add SvCommon, SvEffects and SvTransitionControl assembly references.

Now we add TransitionControl inside our Silverlight page and set PatternType property.

Let's define new transition control pattern. To do this we need to create new Silverlight UserControl and change it's Xaml to be the following.

We also need to change code behind file as shown below.

It is now possible to use newly defined MyFirstTransitionPattern inside the TransitionControl.

Let's customize MyFirstTransitionPattern to create some interesting 3D rotation. Rotation3DTransitionPattern (our base class) has several properties we can set: ShowRotation, HideRotation, ShowTweenType, HideTweenType and so on. We are going to use ShowRotation and HideRotation properties to customize our pattern.

We can add new patterns in the same way.

However it would be great to have all our custom patterns defined inside separate resource collection. This is possible to do via TransitionPatternGalleryProvider class.

Create new ResourceDictinary file called MyCustomPatternsGallery.xaml and add transition patterns there.

Now register MyCustomPatternsGallery resource collection inside TransitionPatternGalleryProvider. Xaml code below shows how TransitionPatternGalleryProvider can be used inside App.xaml file to register new pattern gallery for the TransitionControl.

Now we can use string value to set Pattern property.

Cellbi TransitionControl allows to add advanced animations for Pages using just a few lines in Xaml code.

See it in action below:

Download Source
Try SvFx
Buy Now

To add navigations between pages we can use separate project template called Silverlight Navigation Application to create new navigation application or we can add new Frame control inside existing UserControl.

In both cases we'll get Xaml code similar to the following.

Navigation Framework allows mapping of address with the help of UriMapper property.

That's enough for many cases. But if you want to add transition animations for each page you will have to do some additional work.

TransitionControl is designed to simplify this task. We can now extend behaviour of the Frame control. TransitionControl includes for about 500 animation patterns.

Let's see how it works.

Add Cellbi.SvCommon.dll, Cellbi.SvEffects.dll and Cellbi.SvTransitionControl.dll assembly references.

Add new namespace prefix.

Use TransitionControl

At this point you can choose any animation pattern from the patterns gallery using PatternType property.

See it in action below:

Download Source
Try SvFx
Buy Now

Let's see how this works.

First of all add references to Cellbi.SvCommon and Cellbi.SvEffects assemblies.

Create new ChildWindow control and add the following XAML code (new lines are marked with green on the left margin).

Note that Visual Studio shows Intellisense with a complete list of built-in SvFx window patterns you can choose from.

Now open code behind file and add OnApplyTemplate method override with the following code (new lines are marked with green on the left margin).

We are done! Now just call Show method to display the window.

Single coupon code BF761D5E97 to get 50% discount for all our products!

1. SvFx Single Developer  $89 $179 Get Now
2. SvFx Single Developer + Source  $184 $369 Get Now
3. SvFx Team  $199 $399 Get Now
4. SvFx Team + Source  $299 $599 Get Now
5. DocFramework  $74 $149 Get Now
6. DocFramework + Source  $274 $549 Get Now

Don't miss your chance!

Best Regards,
Cellbi Software

We are happy to announce SvFx 4.0 version!

It is fully compatible with Silverlight 4.0 and VisualStudio 2010!

Read more: SvFx 4.0 What's New

If you want to upgrade to the SvFx 4.0 release, please contact us at support@cellbi.com and we'll help you with upgrading. Note that upgrade price is 50% discount.

We are waiting for your feedback!

Thanks!
Cellbi Software Team

Download: Source

I think that menu control is one of the most visible parts of any application or website. That's why it's structure should be designed really well. However I also think that menu control should be attractive as well.

One of the ways to be creative with menu controls is to use animations and styles. In this article I'll try to show how to create interesting menus using Ellipse Carousel and SlideShow's array animations from the SvFx library.

Try: SvFx

See: Online Demo

First of all lets take a look at the result:

As you can see from the example above menu consists from 2 parts: Root menu items implemented with the help of carousel and several sub-items bound to the carousel item. Selecting of any item in the carousel starts animation and shows sub-items.

We'll start from creating the root menu. I'm not going to bore you with how you can drop Carousel control on the Silverlight page and setup its style. For information on this please read my previous articles: Using Data Binding in the Carousel Control
Flexible Carousel Control
I hope you'll find my efforts useful ;) So here is how Carousel control should be declared in XAML code:

 <carousel:Carousel 
                  x:Name="uxCarousel" 
                  Width="240" 
                  Height="240" 
                  VerticalAlignment="Center" 
                  AlignCenter="True" 
                  ZDepth="100" 
                  ItemTemplate="{StaticResource CarouselItemTemplate}" 
                  ItemsSource="{Binding CarouselData}" >
     <carousel:Carousel.LocationSetup >
          <carousel:EllipseLocationSetup 
                                        CanUseOpacity="True" 
                                        RadiusX="50" 
                                        RadiusY="100" 
                                        Depth="25" 
                                        UseDirectTransition="False" 
                                        CanUseBlur="True" 
                                        BlurAmount="5" 
                                        TopmostMode="Specified" 
                                        TopmostIndex="0" />
     </carousel:Carousel.LocationSetup>
     <carousel:Carousel.Setup >
          <carousel:CycleTransitionSetup 
                                        SpeedRatio="3" 
                                        IsFixed="False" />
     </carousel:Carousel.Setup>
     <carousel:Carousel.MouseOverPattern >
          <patterns:ShakeItemPattern />
     </carousel:Carousel.MouseOverPattern>
 </carousel:Carousel>

Please take a look at the declaration above again. We specified Carousel items style with the help of ItemTemplate property and we bounds items to the source. Then we set a form of carousel as Ellipse, assigned its Radius, index of the topmost element and other properties. All these properties can be used to tweak carousel control.

Definition of the Carousel ItemTemplate can be very different. It completely depends on what you want to see on the screen. Definition of the template used in this article can be found inside source code download.

That's all we should do on this step. Now it's time to think how to add menu sub-items and how to start animation when items are selected. It is easy to do this with the help of the SlideShow control and ArrayAnimationPattern. Please read my post for more details: Fast Photo gallery with SlideShow So here I'll show declaration of the menu sub-items.

 <slide:SlideShow 
                x:Name="uxToolBar" >
     <slide:SlideShow.Pattern >
          <slide:CompositeSlideShowPattern >
               <slide:CompositeSlideShowPattern.AnimationPattern >
                    <patterns:ArrayAnimationPattern 
                                                   ColumnCount="0" 
                                                   ItemMargin="5" 
                                                   GroupMode="AllItems" 
                                                   GroupShuffle="False" >
                         <patterns:ArrayAnimationPattern.AnimationSelectors >
                              <patterns:AllAnimationGroupSelector >
                                   <patterns:AllAnimationGroupSelector.AnimationPattern >
                                        <patterns:ShiftItemPattern 
                                                                  ShowInterval="0.05" 
                                                                  ShowSpeed="8" 
                                                                  ShowMoveTween="BackTweenOut" 
                                                                  ShowScaleTween="BackTweenOut" 
                                                                  ShowShiftMode="FromStart" 
                                                                  ShowFlipDirection="Y" 
                                                                  HideInterval="0.05" 
                                                                  HideSpeed="8" 
                                                                  HideMoveTween="BackTweenIn" 
                                                                  HideScaleTween="BackTweenIn" 
                                                                  HideShiftMode="FromStart" 
                                                                  HideFlipDirection="Y" 
                                                                  StartHorizontalOffset="20" 
                                                                  StartVerticalOffset="20" >
                                             <patterns:ShiftItemPattern.ShowShader >
                                                  <shaders:FadeShaderChanger />
                                             </patterns:ShiftItemPattern.ShowShader>
                                             <patterns:ShiftItemPattern.HideShader >
                                                  <shaders:FadeShaderChanger />
                                             </patterns:ShiftItemPattern.HideShader>
                                        </patterns:ShiftItemPattern>
                                   </patterns:AllAnimationGroupSelector.AnimationPattern>
                              </patterns:AllAnimationGroupSelector>
                         </patterns:ArrayAnimationPattern.AnimationSelectors>
                    </patterns:ArrayAnimationPattern>
               </slide:CompositeSlideShowPattern.AnimationPattern>
          </slide:CompositeSlideShowPattern>
     </slide:SlideShow.Pattern>
     <slide:SlideShow.MouseOverPattern >
          <patterns:ShakeItemPattern 
                                    SpeedRatio="1" />
     </slide:SlideShow.MouseOverPattern>
     <Canvas >
          <local:ToolBarItem 
                            Caption="Menu1" />
          <local:ToolBarItem 
                            Caption="Menu2" />
          <local:ToolBarItem 
                            Caption="Menu3" />
          <local:ToolBarItem 
                            Caption="Menu4" />
          <local:ToolBarItem 
                            Caption="Menu5" />
     </Canvas>


       ........

             <Canvas >
          <local:ToolBarItem 
                            Caption="Menu26" />
          <local:ToolBarItem 
                            Caption="Menu27" />
          <local:ToolBarItem 
                            Caption="Menu28" />
          <local:ToolBarItem 
                            Caption="Menu29" />
          <local:ToolBarItem 
                            Caption="Menu30" />
     </Canvas>
 </slide:SlideShow>

Pattern property is a key property in this code. It can be used to extend functionality of slide show. In our case we use CompositeSlideShowPattern. CompositeSlideShowPattern treats all items of the SlideShow as collections of sub-items. CompositeSlideShowPattern has AnimationPattern property, which can be used to specify how sub-items should be located and animated. In the example above we use ArrayAnimationPattern. ArrayAnimationPattern usage is described here: "Fast Photo gallery with SlideShow"

Finally we need to start slide show items animation, depending on which item was clicked in the carousel. Here is how we can do this:

void SubscribeEvents()
{
  uxCarousel.ItemMouseLeftButtonUp += new MouseButtonEventHandler(uxCarousel_ItemMouseLeftButtonUp);
}

void uxCarousel_ItemMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
  ContentControl item = sender as ContentControl;
  if (item == null)
    return;
  
  uxCarousel.MoveToTopMostLocation(item);
  CarouselItem menuItem = item.Content as CarouselItem;
  if (menuItem != null)
    uxToolBar.ShowByIndex(menuItem.MenuBarIndex);
}

This was really breaf overview of how menus can be built using controls from the SvFx library. I've shown only key moments here. Waiting for your comments.

Best Regards,
Cellbi Software

Download: Source

Try: SvFx

See: Online Demo

See it in action below:

SlideShow control is designed to simplify slide show creation. Cellbi SlideShow control is very powerful. It can be configured by using slide show patterns. In this article we will focus on the CompositeSlideShowPattern and ArrayAnimationPattern. It can be used to define complex animations and specify animation for each item individually.

Lets take a look how CompositeSlideShowPattern can be used to create a simple photo gallery.

Here is XAML code

 <SlideShow 
          x:Name="uxSlideShow" >
     <SlideShow.Pattern >
          <CompositeSlideShowPattern >
               <CompositeSlideShowPattern.AnimationPattern >
                    <ArrayAnimationPattern 
                                          ItemMargin="10" 
                                          GroupShowInterval="0.7" 
                                          GroupHideInterval="0.7" >
                         <ArrayAnimationPattern.AnimationSelectors >
                              <AllAnimationGroupSelector >
                                   <AllAnimationGroupSelector.AnimationPattern >
                                        <ShiftItemPattern 
                                                         ShowInterval="0.05" 
                                                         ShowSpeed="5" 
                                                         ShowMoveTween="BackTweenOut" 
                                                         ShowShiftMode="FromStart" 
                                                         HideInterval="0.05" 
                                                         HideSpeed="5" 
                                                         HideMoveTween="BackTweenIn" 
                                                         HideScaleTween="BackTweenIn" 
                                                         HideShiftMode="FromStart" />
                                   </AllAnimationGroupSelector.AnimationPattern>
                              </AllAnimationGroupSelector>
                         </ArrayAnimationPattern.AnimationSelectors>
                    </ArrayAnimationPattern>
               </CompositeSlideShowPattern.AnimationPattern>
          </CompositeSlideShowPattern>
     </SlideShow.Pattern>
     <Canvas >
          <Image 
                Source="166002_small.jpg" />
          <Image 
                Source="166005_small.jpg" />
          <Image 
                Source="166007_small.jpg" />
     </Canvas>
 </SlideShow>

SlideShow has "Pattern" property which can be used to extend its functionality. In the example above CompositeSlideShowPattern is used, it interprets items as animated parts.

CompositeSlideShowPattern has "AnimationPattern" property, which specifies locations and animation rules for item parts. In the example above we used ArrayAnimationPattern. It can arrange all items in a grid or in a vector. The number of columns can be set via "ColumnCount" property

The most interesting thing here is that you can specify animations for each sub item in the set individually. This can be done with the help of selectors. Selector represents a function which selects a group of sub items from the whole set and defines animation for this group. Selector can select single item, all items, even or odd items or any other items. It completely depends on the function of selector. Selectors can be combined to create complex animations.

In the example above AllAnimationGroupSelector is used. It is included in the SvFx library. It selects all sub items from SlideShow item (in this case Canvas is used), and applies the same animation pattern to each sub item in the set. AnimationPattern property is used to specify animation for each item in the group. You can get more clear sense of how it works in our Demo.

Best Regards,
Cellbi Software