RSS

Monthly Archives: October 2011

CustomActions (ItemAdorners) in PivotViewer v2

You can download the example solution here.

PivotViewer v1 introduced the concept of CustomActions on tiles. Enabling the behaviour was a 3-stage process. Firstly, you had to implement your own PivotViewer control and override the GetCustomActionsForItem method. Secondly, you had to write some CustomAction-derived classes. Thirdly, you had to handle the ItemActionExecuted event that the PivotViewer control raised in order to evaluate which CustomAction had been executed. This was not an ideal approach.

PivotViewer v2 has a much richer framework for adding custom functionality to your tiles. I’ll cover some advanced techniques in my next post but, for now, I’ll show you how CustomActions have evolved in this version.

The new version also takes a 3-stage approach, but it’s a lot less invasive of the PivotViewer control. For one, you dont’t have to implement your own custom class any more.

Step 1: Creating the ItemAdorner Style

The new PivotViewer control allows us to define a style for the CustomActions; now called ItemAdorners. This is just a standard Silverlight style, but the trick is to include a PivotViewerDefaultItemAdorner control.

<p:PivotViewer.ItemAdornerStyle>
  <Style TargetType="p:PivotViewerItemAdorner">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="p:PivotViewerItemAdorner">
          <p:PivotViewerDefaultItemAdorner 
            IsTabStop="False"
            DataContext="{TemplateBinding Content}"
            CommandsRequested="GetCommands"
            IsItemSelected="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsItemSelected}" />
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</p:PivotViewer.ItemAdornerStyle>

Notice how we’ve bound the IsItemSelected property. This allows the control to hide itself when the tile doesn’t have focus. Later, we’ll be wiring up the GetCommands event but first we have to create some commands.

Stage 2: Creating Commands

Any command associated with the adorner must implement a new interface IPivotViewerUICommand. This extends the, now familiar, ICommand interface and retains some familiar members from CustomActions in v1…

using System;
using System.Windows.Input;

namespace System.Windows.Controls.Pivot
{
    public interface IPivotViewerUICommand : ICommand
    {
        string DisplayName { get; }
        Uri Icon { get; }
        object ToolTip { get; }
    }
}

So, let’s create a simple Hello World command. We’ll pass in a reference to the underlying item that is the data source of our tile so that the command has access to its caller…

public class HelloWorldCommand : IPivotViewerUICommand
{
  private readonly Person _person;

  public HelloWorldCommand(Person person)
  {
    _person = person;
  }

  public string DisplayName
  {
    get { return "Hello World"; }
  }

  public Uri Icon
  {
    get { return new Uri("http://dev.opera.com/articles/view/opera-extensions-hello-world/hello.png"); }
  }

  public object ToolTip
  {
    get { return "Click this to say hello"; }
  }

  public bool CanExecute(object parameter)
  {
    return true;
  }

  public event EventHandler CanExecuteChanged;

  public void Execute(object parameter)
  {
    MessageBox.Show(_person.Name + " says 'Hello'");
  }
}

Stage 3: Connecting the Commands

Lastly we’ll add a handler for the PivotViewerItemAdorner’s GetCommands event where we’ll instantiate and add the commands…

public partial class MainPage : UserControl
{
  private void GetCommands(object sender, PivotViewerCommandsRequestedEventArgs e)
  {
    e.Commands.Add(new HelloWorldCommand(e.Item as Person));
  }
}

This is the result:

In my next post I’ll show you how you can get creative with ItemAdorners in ways that weren’t possible in v1.

You can download the example solution here.

Advertisements
 
25 Comments

Posted by on October 28, 2011 in PivotViewer

 

Tags: , , , , , , ,