PivotViewer, Silverlight

PivotViewer – Custom Actions

PivotViewer series

  1. Building your first PivotViewer application
  2. Runtime PivotViewer collection creation
  3. PivotViewer – Working with Facets
  4. Handling PivotViewer events
  5. PivotViewer – Custom actions
  6. PivotViewer and MVVM

Intro

In this tutorial about the Silverlight PivotViewer control I would like to explain how to make use of Custom Actions. Small labels are placed on top of items in the viewer and clicking them will trigger an event. They look something like this:

image

The only downside of these actions is that they aren’t fully implemented. So you’ll have to extend the PivotViewer control yourself. If you haven’t worked with the PivotViewer before, you might want to have a look at the Building your first PivotViewer application tutorial I wrote earlier first. This tutorial continues on that.

Extending the control

Start by adding a new class to a Silverlight project and naming this PivotViewerEx. Make this class inherit from PivotViewer. Create an override of the GetCustomActionsForItem method. This method is called by the PivotViewer when it is in need of some custom actions. The id of the item the user is hovering is passed to this method. You can do some filtering of the actions based on that. In this example no filtering takes place and the whole collection of custom actions is returned.

The list of custom actions is defined as property of this class. It is instantiated by the constructor.

public class PivotViewerEx:PivotViewer
{
    public List<CustomAction> CustomActions { get; set; }
 
    public PivotViewerEx()
    {
        CustomActions=new List<CustomAction>();
    }
 
    protected override List<CustomAction> GetCustomActionsForItem(string itemId)
    {
        return CustomActions;
    }
}

 

Using the control

The extended PivotViewer control works in the same way as the original. It can be added to the XAML like below. The event that handles the clicks on the actions is added too.

<UserControl x:Class="PivotViewerCustomActions.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"
    xmlns:PivotViewerCustomActions="clr-namespace:PivotViewerCustomActions"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <PivotViewerCustomActions:PivotViewerEx x:Name="Pivot"
               ItemActionExecuted="CustomActionClicked"/>
    </Grid>
</UserControl>

 

In the code behind, in the constructor of the page, the custom actions itself are added to the PivotViewer. The constructor of the CustomAction class takes four parameters:

  • Name => is the text shown in the PivotViewer
  • Icon => a URI to an image to show next to the text. You can use NULL to omit an image
  • ToolTip => some text that is shown when the user hovers the mouse over the CustomAction
  • Id => a unique ID to identify the action
public MainPage()
{
    InitializeComponent();
 
    Pivot.CustomActions.Add(
        new CustomAction("Add to cart",
            new Uri("http://localhost:49000/112_Plus_Green_32x32_72.png"),
            "Add to cart","Add"));

    Pivot.CustomActions.Add(
        new CustomAction("Details",
                            new Uri("http://localhost:49000/Info.png"),
                            "Details","Details"));

    Pivot.LoadCollection("http://localhost:49000/ElectronicsPivot.cxml",
        string.Empty);
}

Handling the event

When the user clicks on the actions the CustomActionClicked event is fired. The event gets an instance of the ItemActionEventArgs class as event arguments. This class contains two properties. ItemId contains the the ID of the item the action was placed over. You can get the actual item by calling the GetItem method on the PivotViewer control with this ID.

The second property of the ItemActionEventArgs class is CustomActionId. This is the ID of the custom action that was clicked.

In the example below one of two a message boxes is shown depending on the action clicked. It won’t be hard to extend this further to your needs.

private void CustomActionClicked(object sender, ItemActionEventArgs e)
{
    PivotItem item = Pivot.GetItem(e.ItemId);

    if (e.CustomActionId == "Add")
    {
        MessageBox.Show(string.Format("Add {0} to Cart", item.Name));

 
    if (e.CustomActionId == "Details")
    {
        MessageBox.Show(string.Format("Show details of {0}", item.Name));
    }
}

 

Wrap-up

CustomActions provide a great way to add some extra functionality to the PivotViewer control. Too bad they aren’t fully implemented (yet?). The simple method shown in this tutorial uses code behind to add the actions. It would be great to be able to add these actions in XAML one day.

The next tutorial will be about using the Silverlight PivotViewer control in an MVVM application. If you want to be the first to know when it is available, you can subscribe to the RSS-Feed or follow me on twitter.

Technorati Tags: ,

Share

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: