Silverlight 4 ContextMenu using ContextMenuService

17 04 2010

Silverlight 4 now support right click.

Now you can view your own ContextMenu.

Silverlight 4 toolkit have ContextMenu control. You can easily create your own ContextMenu which contains-

-MenuItem with Icon

-Menu Separator

Silverlight 4 Toolkit ContextMenu

You can use Silverlight toolkit ContextMenuService which will handle the event and positioning of the ContextMenu

All you need the reference of the namespace like below:
xmlns:controlsInputToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

Now you can define the ContextMenuService and the ContextMenu like below:

    <controlsInputToolkit:ContextMenuService.ContextMenu>
        <controlsInputToolkit:ContextMenu
            Height="100"
            Name="contextMenu1"
            Width="200">
            <controlsInputToolkit:MenuItem
                x:Name="MenuItem1"
                Header="MenuItem-1"
                Click="MenuItem1_Click"
                IsEnabled="True">
                <controlsInputToolkit:MenuItem.Icon>
                    <Image
                        Height="25"
                        Width="25"
                        Source="Images/Silverlight.png"></Image>
                </controlsInputToolkit:MenuItem.Icon>
            </controlsInputToolkit:MenuItem>
            <controlsInputToolkit:MenuItem
                x:Name="MenuItem2"
                Header="MenuItem-2"
                Click="MenuItem2_Click"
                IsEnabled="True">
                <controlsInputToolkit:MenuItem.Icon>
                    <Image
                        Height="25"
                        Width="25"
                        Source="Images/Bird.png"></Image>
                </controlsInputToolkit:MenuItem.Icon>
            </controlsInputToolkit:MenuItem>
            <controlsInputToolkit:Separator />
            <controlsInputToolkit:MenuItem
                x:Name="MenuItem3"
                Header="MenuItem-3"
                Click="MenuItem3_Click"
                IsEnabled="True">
                <controlsInputToolkit:MenuItem.Icon>
                    <Image
                        Height="25"
                        Width="25"
                        Source="Images/logo.png"></Image>
                </controlsInputToolkit:MenuItem.Icon>
            </controlsInputToolkit:MenuItem>
        </controlsInputToolkit:ContextMenu>
    </controlsInputToolkit:ContextMenuService.ContextMenu>

In this sample MainPage is considered for right click.
Now in the code behind you need handled the right click down event for the MainPage (Hide the default one)  like below:

    public MainPage()
    {
        InitializeComponent();
        this.MouseRightButtonDown += new MouseButtonEventHandler(MainPage_MouseRightButtonDown);
    }
    void MainPage_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
    {
        e.Handled = true;
    }

View Demo Here
Download Source Here

Advertisements




Tips – Find control in custom DataGrid header style

5 04 2010

Suppose, you have DataGrid column header style like below:

    <Style
        TargetType="dataprimitives:DataGridColumnHeader">
        <Setter
            Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel>
                        <ComboBox
                            x:Name="myComboBox"
                            Width="70"></ComboBox>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Now you want to access myComboBox control.

You can use MyVisualTreeHelper class (described here).

You can access the control like below:

    var myCbo = MyVisualTreeHelper
                .SearchFrameworkElement(myDataGrid, "myComboBox");





TIPS: Get actual width and height of an Image

4 04 2010

You can use ImageOpened event to get actual width and height of an Image like below:

        MyImage.ImageOpened += new EventHandler<RoutedEventArgs>(Image_ImageOpened);
    }
    void Image_ImageOpened(object sender, RoutedEventArgs e)
    {
        Image img = (Image)sender;
        BitmapImage bi = (BitmapImage)img.Source;
        double width = bi.PixelWidth;
        double height = bi.PixelHeight;
    }




TIPS: Get an element from specific row and column of a Grid

1 04 2010

You can get an element from specific row and column of a Grid like below:

    public UIElement GetElement(int row, int column, Grid gridToSearch)
    {
        return gridToSearch.Children
            .Where(w => w.GetValue(Grid.RowProperty).Equals(row)
                     && w.GetValue(Grid.ColumnProperty).Equals(column))
            .FirstOrDefault();
    }