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.

 

<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>