Pivot Viewer Simple Custom Adorners

When the user hovers over an item they see “Book price” appear in the top right hand corner.

When they click this area it fires a command, which shows Boom! … along with the price properties:

<UserControl x:Class="PivotViewerDemo.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:pivot="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
             xmlns:local="clr-namespace:PivotViewerDemo"
             mc:Ignorable="d">
    <Grid>
        <pivot:PivotViewer x:Name="pivotViewer">

            <pivot:PivotViewer.PivotProperties>
                <pivot:PivotViewerNumericProperty Id="CouponToday"
                                                  DisplayName="Coupon Today"
                                                  Options="CanFilter"
                                                  Binding="{Binding CouponToday, Mode=OneWay}" />
                <pivot:PivotViewerNumericProperty Id="Barrier"
                                                  Options="CanFilter"
                                                  Binding="{Binding Barrier, Mode=OneWay}" />
                <pivot:PivotViewerStringProperty Id="Underlying"
                                                 Options="CanFilter,CanSearchText"
                                                 Binding="{Binding Underlying, Mode=OneWay}" />
                <pivot:PivotViewerStringProperty Id="Maturity"
                                                 Options="CanFilter"
                                                 Binding="{Binding Maturity, Mode=OneWay}" />
                <pivot:PivotViewerStringProperty Id="Sector"
                                                 Options="CanFilter,CanSearchText"
                                                 Binding="{Binding Sector, Mode=OneWay}" />
                <pivot:PivotViewerStringProperty Id="Currency"
                                                 Options="CanFilter"
                                                 Binding="{Binding Currency, Mode=OneWay}" />
            </pivot:PivotViewer.PivotProperties>

            <pivot:PivotViewer.ItemTemplates>

                <pivot:PivotViewerItemTemplate MaxWidth="150">
                    <Grid Height="150"
                          Width="150"
                          Background="{Binding MaturityColour, Mode=OneTime}" />
                </pivot:PivotViewerItemTemplate>

                <pivot:PivotViewerItemTemplate>
                    <Border Width="300"
                            Height="300"
                            Background="{Binding MaturityColour, Mode=OneTime}">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1*" />
                                <RowDefinition Height="1*" />
                                <RowDefinition Height="4*" />
                                <RowDefinition Height="2.5*" />
                                <RowDefinition Height="2*" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="Maturity"
                                       FontSize="12"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center" />

                            <TextBlock Text="{Binding Maturity, Mode=OneTime}"
                                       FontSize="22"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Grid.Row="1" />

                            <TextBlock Text="Barrier"
                                       FontSize="12"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Grid.Column="2" />

                            <TextBlock Text="{Binding Barrier, Mode=OneTime}"
                                       FontSize="22"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Grid.Row="1"
                                       Grid.Column="2" />

                            <TextBlock Text="{Binding CouponToday, Mode=OneTime}"
                                       FontSize="100"
                                       FontFamily="Segoe UI Light"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Bottom"
                                       Grid.Row="2"
                                       Grid.ColumnSpan="3" />

                            <TextBlock Text="{Binding Underlying, Mode=OneTime}"
                                       FontSize="32"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       Grid.Row="3"
                                       Grid.ColumnSpan="3"
                                       TextWrapping="Wrap" />

                            <TextBlock Text="{Binding Sector, Mode=OneTime}"
                                       FontSize="22"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Center"
                                       Grid.Row="4"
                                       Grid.ColumnSpan="2"
                                       Margin="10,0,0,5" />

                            <TextBlock Text="{Binding Currency, Mode=OneTime}"
                                       FontSize="22"
                                       FontFamily="Segoe UI"
                                       HorizontalAlignment="Right"
                                       VerticalAlignment="Center"
                                       Grid.Row="4"
                                       Grid.Column="1"
                                       Grid.ColumnSpan="2"
                                       Margin="0,0,10,5" />

                        </Grid>
                    </Border>
                </pivot:PivotViewerItemTemplate>
            </pivot:PivotViewer.ItemTemplates>

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

        </pivot:PivotViewer>
    </Grid>
</UserControl>

using System.Windows.Controls.Pivot;

namespace PivotViewerDemo
{
    public partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();

            this.pivotViewer.ItemsSource = Factory.GetData();
        }

        private void GetCommands(object sender, PivotViewerCommandsRequestedEventArgs e)
        {
            e.Commands.Add(new AdornerCommand(e.Item as Price));
        }
    }
}

using System;
using System.Windows;
using System.Windows.Controls.Pivot;

namespace PivotViewerDemo
{
    public class AdornerCommand : IPivotViewerUICommand
    {
        private readonly Price price;

        public AdornerCommand(Price price)
        {
            this.price = price;
        }

        #region IPivotViewerUICommand

        public string DisplayName
        {
            get { return "Book price"; }
        }

        public Uri Icon
        {
            get { return null; }
        }

        public object ToolTip
        {
            get { return "Click this to book the price"; }
        }

        #endregion

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

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            MessageBox.Show(string.Format("Boom!{0}{0}{1}", Environment.NewLine, price.ToString()));
        }
    }
}