One of the added API features of the new Silverlight 5 PivotViewer is the ability to define a custom detail pane. It is rather simple to replace the style with your own, however, then you are left with the task of implementing several features that you most likely want to keep (like when to show and hide your detail pane). There are also a few other states and navigation features that would also be nice to keep. We will look at how you can replace the default implementation with the smallest amount of code and keep the functionality that you will want to keep.

In order to keep from reinventing the wheel when implementing our new detail pane, we are going to start off with the
PivotViewerDetailPane control. This is the control that is being used in the default implementation. By using our own instance of the control, we are able to take advantage of all of that hard work the PivotViewer team has done for us.

The first thing we need to do is see how to implement our own copy of the control. You can override the default implementation by setting the DetailPaneStyle property on the PivotViewer. Here is what an example would look like :


<pivot:PivotViewer x:Name="pViewer">
    <pivot:PivotViewer.DetailPaneStyle>
        <Style TargetType="pivot:PivotViewerDetailPane">
        </Style>
    </pivot:PivotViewer.DetailPaneStyle>
</pivot:PivotViewer>


This simply sets the
DetailPaneStyle to a basic implementation of the PivotViewerDetailPane. However, if we run our example, we soon see that it is close, but not quite the default we are looking for. Now the good news is that we have proved to we have overridden the default.



With a bit more research, you will see that you need to set some default colors. Here are the colors that are originally set:


<
pivot:PivotViewer.DetailPaneStyle>
    <Style TargetType="pivot:PivotViewerDetailPane">
        <Setter Property="Foreground"
                Value="{Binding Foreground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="Background"
                Value="{Binding Background,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="BorderBrush"
                Value="{Binding BorderBrush,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="AccentColor"
                Value="{Binding AccentColor,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="Background"
                Value="{Binding SecondaryBackground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="ControlBackground"
                Value="{Binding ControlBackground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="SecondaryForeground"
                Value="{Binding SecondaryForeground,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="PrimaryItemValueBackgroundColor"
                Value="{Binding PrimaryItemValueBackgroundColor,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
        <Setter Property="SecondaryItemValueBackgroundColor"
                Value="{Binding SecondaryItemValueBackgroundColor,
                RelativeSource={RelativeSource Mode=FindAncestor,
                AncestorType=pivot:PivotViewer}}"
/>
    </Style>
</pivot:PivotViewer.DetailPaneStyle>


As you can see, the detail pane is using the new Silverlight 5 Feature RelativeSource binding to carry the theme colors of the PivotViewer to the detail pane. Obviously, this gives you an opportunity to create your own custom colors if you so choose. If not, it gets us back to the starting point.




Now that we are at a good starting point, let’s figure out what we want to modify. Most of the people I have talked to are only interested in modifying the contents of the detail pane itself and not the entire shell. So we will focus this discussion on the modifying the
ContentTemlate of the PivotViewerDetailPane.



When you replace the
ContentTemplate there are a couple of things you need to remember. The first is the default width of the original template is 190px. The detail pane will grow to accommodate any size that you need, but that is what the default is. The other thing to remember is a bit tricky, and that is the visibility of the contents. If you do not collapse your container by default, then it will be visible while the PivotViewer is loading. It causes a weird user experience and should be handled. We can handle that with a multi-part binding. First we bind the Visibility to the IsShowing property of the PivotViewerDetailPane. We have to write a value converter to change the bool IsShowing to a Visibility. If you haven’t had to do that before, it’s a handy little converter to keep in your toolkit.

public class BoolToVisibilityConverter : IValueConverter
{

    public object Convert(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        if(value is bool)
        {
            return (bool) value ?
                    Visibility.Visible :
                    Visibility.Collapsed;
        }

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}


Now you are able to set up your custom detail pane. Here is very simple example using a dummy data set that has a
Color property in it. We are replacing the default content with an Ellipse that is filled with the Color property of our object.

<Setter Property="ContentTemplate">
    <Setter.Value>
        <DataTemplate>
            <Grid Width="190"
                Visibility="{Binding IsShowing,
                RelativeSource={RelativeSource
                AncestorType=pivot:PivotViewerDetailPane},
                Converter={StaticResource boolConv},
                FallbackValue=Collapsed}">
                <Ellipse Width="100" Height="100"
                         Fill="{Binding Color}"
                         VerticalAlignment="Top"
                         Margin="0,30,0,0"/>
            </Grid>
        </DataTemplate>
    </Setter.Value>

</Setter>




Obviously this is a rather simplistic detail pane, so feel free to make yours a bit more complex and interesting.


Get Silverlight 5 Hosting with only $2.00/month at ASPHostPortal.com.