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.
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