Telerik blogs

With the introduction of RadialMenu, we are getting various questions about how to make it look something like the navigation menu on mobile devices. Since it became official, this is really easy to do.

This blog post will show how you can customize Telerik RadialMenu if you are not familiar with how to do that. By following these easy steps, you can achieve a completely different appearance.

Let’s clear up what we want to achieve. We are all familiar with how the menu looks now:



This is the standard RadialMenu with four items, where each item has the IconContent property set. We want to remove everything except items, and make them look like circular buttons, similar to the ones on Touch devices:


Basic Styling

The simplest way to remove the menu background is to update the fill and thickness of NavigationMenuBackgroundStyle and ContentMenuBackgroundStyle properties of RadialMenu. Below is an example of code for this customization:

<Style TargetType="Rectangle" x:Key="NavigationMenuStyle">
    <Setter Property="Fill" Value="Transparent" />
    <Setter Property="StrokeThickness" Value="0" />
</Style>

<Style TargetType="Rectangle" x:Key="ContentMenuStyle">
    <Setter Property="Fill" Value="Transparent" />
    <Setter Property="StrokeThickness" Value="0" />
</Style>

<Style TargetType="telerik:RadRadialMenu" BasedOn="{StaticResource RadRadialMenuStyle}">
    <Setter Property="NavigationMenuBackgroundStyle" Value="{StaticResource NavigationMenuStyle}" />
    <Setter Property="ContentMenuBackgroundStyle" Value="{StaticResource ContentMenuStyle}" />
</Style>

The XAML above will make your menu looks like this:

Now the background is removed, but the MouseOver indicator still persists. We need to to modify the Visibility property of VisualStatesItemPresenter element:


<Style TargetType="telerik:VisualStatesItemPresenter">
    <Setter Property="Visibility" Value="Collapsed" />
</Style>


This way, the MouseOver indicator also disappears.

Styling RadialMenuItems

The next step is to make the menu items look like circular buttons. We need to set their size and add an Ellipse inside the ControlTemplate of RadialMenuItems. RadRadialMenuItem style is where you can override how the items look and add additional animations. 

Below is some boring xaml, to give you an idea of what you can do and how to modify the template:

<Style TargetType="telerik:RadRadialMenuItem">

    <Setter Property="BorderBrush" Value="White" />
    <Setter Property="Background" Value="#FF4B3022" />
    <Setter Property="Width" Value="32" />
    <Setter Property="Height" Value="32" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate  TargetType="telerik:RadRadialMenuItem">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            ...
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Ellipse x:Name="BackgroundGlyph"
                                  Fill="{TemplateBinding Background}"
                                  RenderTransformOrigin=".5,.5"
                                  Stroke="{TemplateBinding BorderBrush}"
                                  StrokeThickness="2"
                                  Width="{TemplateBinding Width}                                                                Height="{TemplateBinding Height}"/>

                    <ContentControl x:Name="IconPresenter"
                                  VerticalAlignment="Center"
                                  Foreground="{TemplateBinding Foreground}"
                                  UseLayoutRounding="True"
                                  RenderTransformOrigin="0.5,0.5"
                                  HorizontalAlignment="Center"
                                  Content="{TemplateBinding IconContent}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Inside the demo project, you can find a simple and attractive pop-out animation.

Styling RadialMenuButton

For the main menu button, we need to apply the same style customizations as the RadialMenuItems. It is much easier, because the button is already circular. So we need to apply only the desired size and some animations:

<Style TargetType="telerik:RadialMenuButton">
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Width" Value="30" />
            <Setter Property="Height" Value="30" />
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Path Fill="White" Width="15" Height="15" Data="M8.4,2C6.5,2 4.9,3.5 4.9,5.5C4.9,7.4 6.5,9 8.4,9C10.4,9 11.9,7.4 11.9,5.5C11.9,3.5 10.4,2 8.4,2zM8.4,0C11.5,-8.7e-008 13.9,2.4 13.9,5.5C13.9,8.5 11.5,11 8.4,11C7.3,11 6.2,10.6 5.4,10.0L5.3,10.0L1.4,13.9L0,12.5L3.9,8.6L3.9,8.5C3.3,7.6 2.9,6.6 2.9,5.5C2.9,2.4 5.4,-8.7e-008 8.4,0z" Stretch="Fill" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:RadialMenuButton">
                        <Grid x:Name="RootGrid">
                            <Grid>
                                <Ellipse x:Name="BackgroundGlyph" Fill="#4B3022" StrokeThickness="2" Stroke="White" RenderTransformOrigin=".5,.5" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                    <Ellipse.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="1" />
                                            <RotateTransform Angle="0" />
                                        </TransformGroup>
                                    </Ellipse.RenderTransform>
                                </Ellipse>
                                <ContentPresenter x:Name="NormalGlyph" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="0 -1 0 0">
                                    <ContentPresenter.RenderTransform>
                                        <TransformGroup>
                                            <ScaleTransform ScaleX="1" ScaleY="1" />
                                            <RotateTransform Angle="0" />
                                        </TransformGroup>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Grid>
                            <VisualStateManager.VisualStateGroups>
                                ...
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Here is how our Menu looks at the moment:

To complete the example, we can integrate RadialMenu with Transition control, and add some shadows and borders for charm. Here is the final result:

As you can see, there are many possible ways you can style the RadialMenu control. Sometimes, the best way is to play around with different shapes and colors until you get the desired look. You can find the source of this example in the attached project.

If you have anything to add or want to see some other examples missing in our QSF or SDK, please use the comments  section below.

Download sample project


Related Posts

Comments

Comments are disabled in preview mode.