Sunday, 18 November 2012

Semantic Deep Zoom with the PivotViewer

In this example, from a distance the PivotViewer displays just a coloured square per data point. 

Once zoomed in the data template is switched to a more detailed display.  This is achieved by setting the MaxWidth property on the item template.

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>
</Grid>
</UserControl>

3 comments:

  1. Hi Steven,
    I've been trying to get a pivotviewer work with 3 levels of zoom but cannot get the 2nd level to show for more than a few pixels worth of zoom.
    Have you tried 3 levels?
    See my question here:
    http://stackoverflow.com/questions/15646584/can-silverlight-pivotviewer-handle-3-levels-of-semantic-zoom
    Would love to get this working.
    Thanks for any help.

    ReplyDelete
  2. I use three templates at work which have MaxWidth: 45, 140 and over. The "over" template has a grid container of 280 width and height - good luck!

    ReplyDelete
  3. hi,

    this is exactly what i need BUT for wpf ...
    any chance to get this to work on wpf or get something similar ?

    i have searched a little on the web and got nothing :(

    ReplyDelete