Sunday, 18 November 2012

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:

image

image

<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()));
}
}
}

11 comments:

  1. Hi Steven

    1) I would like to ask how you can open a link in the web browser, which is stored in the collection?
    2) How to do something like that when you hover your mouse on the image display to the description (tooltip)?

    ReplyDelete
  2. Hi, just replace the MessageBox.Show code within the Execute method in AdornerCommand class.

    Download this project to see some options: https://github.com/stevenh77/PivotViewerDemo-adorner

    As an example online try this:
    http://stevenhollidge.com/blog-source-code/pivotvieweradorner/

    Filter on ebay (type ebay in the search filter on the left hand side), then click the book price adorner in one of the items.

    Let me know how you get on, good luck!

    Steve

    ReplyDelete
    Replies
    1. Here's what it looks like:

      http://stevenhollidge.com/blog-source-code/pivotvieweradorner/ebayquote.PNG

      Delete
  3. Hi
    Thank you for your previous help. I am not able to do what you want.
    In opis.cxml file:

    Miejscowosc Gostchorz










    Helenów









    In Mainpage.xml




    How to get website address saved in the cxml file ?

    ReplyDelete
  4. Since I can not paste the xml intercede:

    [...]
    Item Id="5" Img="#5" Name="Gostchorz"
    [...]
    Item Id="6" Img="#6" Name="Helenów" Href="http://www.siedlce.pl/"

    ReplyDelete
  5. Looks like you're using the pivotviewer v.1 which I havent looked at. My code uses pivotviewer v2.

    You'd be better off checking some older posts:
    http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2010/08/19/pivotviewer-collections-and-the-silverlight-control.aspx

    ReplyDelete
    Replies
    1. http://www.codeproject.com/Articles/91552/Working-With-Silverlight-PivotViewer

      Delete
  6. Thanks for the links, but both knew before. Collection of images done using Excel Tool and it creates a cXML, where the links are stored in the form of: Item ID = "6" Img = "# 6" Name = "Helenów" Href = "http://www.siedlce.pl ".
    In very easily supports Internet links in pivotviewer v.1 but I had to give up his acting detected by the fact I have not found a way to localization pivotviewer controls. In pivotviewer v2 no problem with the location (into Polish) but the support is big problem with web links listed in the file cXML. Is there a way to handle these web links?

    ReplyDelete
  7. In version 1 I have no problems with support for web links but I would like my collection to display in pivotviewer v2 and could cause links assigned to the item but I have a problem with calling stored in the file links cXML, or is it possible?

    Thanks Paul

    ReplyDelete
  8. I suggest loading the cXML file into POCO (plain old CLR objects) then bind the PivotViewer to your list of objects. I havent had to use the cXML files but if they are XML you should be able to deserialise into a list of C# objects.

    ReplyDelete