MultiPanel Control in WPF/Silverlight

Many time during designing we require different pages similar to a TabControl but without displaying Tabs. There are few article to create similar control for Windows Form and ASP.NET but not much for WPF or Silverlight. So I decide the create my own Custom MultiPanel.

MultiPanel is a simple control which inherits an ItemsControl and has SelectedIndex and SelectedPanel property to change the selected panel.

Public Class MultiPanel
    Inherits ItemsControl

    Public Sub New()
        MyBase.New()
        Me.DefaultStyleKey = GetType(MultiPanel)
    End Sub

    Public Property SelectedIndex() As Integer
        Get
            Return CInt(GetValue(SelectedIndexProperty))
        End Get

        Set(value As Integer)
            SetValue(SelectedIndexProperty, value)
        End Set
    End Property

    Public Event SelectionChanged As EventHandler(Of EventArgs)

    Public Shared ReadOnly SelectedIndexProperty As DependencyProperty = DependencyProperty.Register("SelectedIndex", GetType(Integer), GetType(MultiPanel), New PropertyMetadata(-1, New PropertyChangedCallback(AddressOf SelectedIndexChanged)))

    Public Property SelectedPanel() As Object
        Get
            Return GetValue(SelectedPanelProperty)
        End Get

        Set(value As Object)
            SetValue(SelectedPanelProperty, value)
        End Set
    End Property


    Public Shared ReadOnly SelectedPanelProperty As DependencyProperty = DependencyProperty.Register("SelectedPanel", GetType(Object), GetType(MultiPanel), New PropertyMetadata(Nothing, New PropertyChangedCallback(AddressOf SelectedPanelChanged)))

    Private Shared Sub SelectedIndexChanged(sender As DependencyObject, e As DependencyPropertyChangedEventArgs)
        Dim mp As MultiPanel = DirectCast(sender, MultiPanel)
        Dim index As Integer = Integer.Parse(e.NewValue.ToString())
        Dim oldIndex As Integer = Integer.Parse(e.OldValue.ToString())

        If index <> -1 AndAlso index <> oldIndex Then
            mp.SelectedPanel = mp.Items(index)
        ElseIf index = -1 Then
            mp.SelectedPanel = Nothing
        End If

        mp.RaiseSelectionChanged()
    End Sub

    Private Sub RaiseSelectionChanged()
        RaiseEvent SelectionChanged(Me, New EventArgs())
    End Sub

    Private Shared Sub SelectedPanelChanged(sender As DependencyObject, e As DependencyPropertyChangedEventArgs)
        Dim mp As MultiPanel = DirectCast(sender, MultiPanel)
        Dim pnl As Panel = DirectCast(e.NewValue, Panel)

        If pnl Is Nothing OrElse mp.Items.IndexOf(pnl) = -1 Then
            mp.SelectedPanel = Nothing
            mp.SelectedIndex = -1
        Else
            mp.SelectedPanel = pnl
            mp.SelectedIndex = mp.Items.IndexOf(pnl)
        End If
    End Sub

   
End Class

And below is the MultiPanel Style

    <Style TargetType="local:MultiPanel">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:MultiPanel">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" >

                        <ContentPresenter Content="{TemplateBinding SelectedPanel}"
                                                Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Below is a simple XAML Code example of using this control

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:WpfApplication2"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <my:MultiPanel x:Name="MainMultiPanel">
            <my:MultiPanel.Items>
                <Grid Name="grdCustomer">
                    <my:CustomerDetailControl />
                </Grid>
                <Grid Name="grdEmployee">
                    <my:EmployeeDetailControl />
                </Grid>
                <Grid Name="grdOrder">
                    <my:OrderDetailControl />
                </Grid>
            </my:MultiPanel.Items>
        </my:MultiPanel>
    </Grid>
</Window>

Now you can use SelectedIndex or SelectedPanel property of MultiPanel to display the required grid

MainMultiPanel.SelectedIndex = 2

Hope this control help you in your designing task. Look forward to your feedbacks.