Reader Level:
ARTICLE

How to Create a Custom Menu Control in Silverlight

Posted by Priya Linge Articles | Silverlight with C# August 09, 2011
This article demonstrates how we can create the Custom Menu Control in Silverlight.
  • 1
  • 0
  • 8493
Download Files:
 


We can create a custom menu control in Silverlight using the following steps.

Step 1: Create a Custom Menu control in Silverlight.

With the help of ToggleButton and Popup controls in Silverlight, we can create a custom menu control as follows.

<ToggleButton x:Name="toggleButton"  Style="{StaticResource ColorToggleButtonStyle}" BorderBrush="{x:Null}" Height="20" Width="90" Click="toggleButton_Click">
       <Grid>
           <Grid.ColumnDefinitions>
               <ColumnDefinition Width="20" />
               <ColumnDefinition Width="58" />
           </Grid.ColumnDefinitions>
           <TextBlock  Height="14" Name="txtview" Text="First View" Width="58" Foreground="#FF3B62A0" FontSize="10" VerticalAlignment="Center" Grid.Column="1" />
               <Image Height="18" Width="20"  HorizontalAlignment="Left" x:Name="Stackimage" Source="images/icon1.jpg" Margin="2,0,0,2" Grid.Column="0"/>
       </Grid> 
   </ToggleButton>
<
Popup x:Name="MyPopup" Closed="MyPopup_Closed"  Opened="Popup_Opened" IsOpen="{Binding IsChecked, ElementName=toggleButton, Mode=TwoWay}"
         Style="{StaticResource popup}">
        <Border x:Name="PopupChild" LostFocus="PopupChild_LostFocus"  MaxHeight="300"  Effect="{StaticResource effect1}" MouseLeave="PopupChild_MouseLeave">
        <Grid>
            <Border BorderBrush="#84aded" BorderThickness="1" Margin="0" >
            <StackPanel>
                   <!--first stackpanel-->
                    <StackPanel x:Name="FirstRowColors" Style="{StaticResource panel}" Background="#f8fbff">
                        <HyperlinkButton  Style="{StaticResource HyperlinkButtonStyle1}"  Tag="First View" Click="HyperlinkButton_Click">
                            <StackPanel Style="{StaticResource insidepanel}">
                                <Image Source="images/icon1.jpg" Style="{StaticResource image}"/>
                                <TextBlock Text="First View" Style="{StaticResource text}"/>
                            </StackPanel>
                         </HyperlinkButton>
                        <HyperlinkButton Style="{StaticResource HyperlinkButtonStyle1}"  Tag="Second View" Click="HyperlinkButton_Click" >
                            <StackPanel Style="{StaticResource insidepanel}" >
                                <Image Source="images/icon2.jpg" Style="{StaticResource image}"/>
                                 <TextBlock Text="Second View"  Style="{StaticResource text}"/>
                            </StackPanel>
                        </HyperlinkButton>
                        <HyperlinkButton Style="{StaticResource HyperlinkButtonStyle1}"  Tag="Third View" Click="HyperlinkButton_Click" >
                            <StackPanel Style="{StaticResource insidepanel}" >
                                <Image Source="images/icon3.jpg" Style="{StaticResource image}"/>
                                <TextBlock Text="Third View"  Style="{StaticResource text}"/>
                            </StackPanel>
                        </HyperlinkButton>
                    </StackPanel>
           </StackPanel>
           </Border>
       </Grid>
       </Border>
</
Popup>

This XAML design looks like as follows:

Xaml Design of Custom Menu Control in Silverlight

We can also display the images on menus as below.

switch (btn.Tag.ToString())
{
       case "First View":
           Stackimage.Source = new BitmapImage(new Uri("images/icon1.jpg", UriKind.Relative));
           txtview.Text = btn.Tag.ToString();
           break;
        case "Second View":
           Stackimage.Source = new BitmapImage(new Uri("images/icon2.jpg", UriKind.Relative));
           txtview.Text = btn.Tag.ToString();
           break;
        case "Third View":
           Stackimage.Source = new BitmapImage(new Uri("images/icon3.jpg", UriKind.Relative));
           txtview.Text = btn.Tag.ToString();
        break;
}

Output looks like as following.

Custom Menu control in Silverlight

We can also add more menus one by one, which looks like as following.

More Custom Menu Control in Silverlight

Summary: We can Create Custom Menu control in Silverlight with the help of other controls in Silverlight.

COMMENT USING

Trending up