Right Click in Silverlight 4

Let’s discuss yet another feature of Silverlight 4 – right click! This was most wanted feature and Microsoft has really blessed the Silverlight world by giving this feature!

Our solution will display a red colored box. User can right click within the area of the red box to customize it.  On right click, a pop up will be displayed which will allow the user to change the width & height of the red box. This is the simplest example to demonstrate right click in Silverlight 4

The design part (XAML):-

<UserControl x:Class="SilverlightRightClick.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="302" d:DesignWidth="345">

<Grid x:Name="LayoutRoot" Background="White">
<TextBlock Text="Right-click to customize" FontWeight="Bold" Margin="12,0,0,0"/>

<Rectangle Height="254" HorizontalAlignment="Left" Margin="12,24,0,0" Name="frame"
Stroke="Black" StrokeThickness="4" VerticalAlignment="Top" Width="320" RadiusX="15" RadiusY="15" Fill="Red"
MouseRightButtonDown="frame_MouseRightButtonDown"
MouseRightButtonUp="frame_MouseRightButtonUp" />

<Popup x:Name="pop">
<Border Background="LightBlue" Margin="10" BorderBrush="Blue" CornerRadius="5" BorderThickness="3">
<Grid Width="235" Height="138">
<TextBlock Text="Customize:" FontWeight="Bold" HorizontalAlignment="Center" Margin="83,0,83,116" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="19,30,0,0" Name="textBlock1" Text="Width:" VerticalAlignment="Top" Width="60" />
<Slider Height="23" Name="slWidth" Margin="114,31,31,84" Value="320" Minimum="10" Maximum="320" ValueChanged="slWidth_ValueChanged" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="19,72,0,0" Name="Height" Text="Height:" VerticalAlignment="Top" Width="60" />
<Slider Height="23" Margin="114,72,31,43" Name="slheight" Minimum="10" Value="254" Maximum="254" ValueChanged="slheight_ValueChanged" />
<Button Content="Done" Height="23" HorizontalAlignment="Left" Margin="129,109,0,0" Name="btnDone" Click="btnDone_Click" VerticalAlignment="Top" Width="75" />
</Grid>
</Border>
</Popup>
</Grid>
</UserControl>

The C# code for this XAML is:

namespace SilverlightRightClick
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}

private void frame_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}

private void frame_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
{
pop.HorizontalOffset = e.GetPosition(null).X + 2;
pop.VerticalOffset = e.GetPosition(null).Y + 2;
pop.IsOpen = true;
}

private void slheight_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (frame == null) return;
frame.Height = slheight.Value;
}

private void slWidth_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (frame == null) return;
frame.Width = slWidth.Value;
}

private void btnDone_Click(object sender, RoutedEventArgs e)
{
pop.IsOpen = false;
}
}
}

Just execute this code and right click on the red colored box!

Related Posts:

• Silverlight Best Practices (Part 4 of 4)
• Silverlight Best Practices (Part 2 of 4)
• Silverlight Best Practices (Part 3 of 4)
• Silverlight Best Practices (Part 1 of 4)
• Creating Page Transitions in Windows Phone