locked
how to open multiple pages at a time in Silverlight navigation application ? RRS feed

  • Question

  • Hello,

    How can i open multiple silverlight pages in my silverlight navigation application like multiple tabs in my application itself .

    I do not want to use browser's tab. It is possible to open multiple pages in tabs in silverlight navigation application ?

    Saturday, July 7, 2012 10:22 PM

Answers

  • Hi,

    Here the code:

    Closeable TabItem XAML and Codebehind:

    <UserControl x:Class="IntCoRe.ChildWindows.CloseableHeader"
        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"
        mc:Ignorable="d"
        d:DesignHeight="20" d:DesignWidth="81" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" IsTabStop="True">
        
        <Grid x:Name="LayoutRoot" Background="{x:Null}">
            <sdk:Label Content="TabItem"  Height="23" HorizontalAlignment="Left" 
                           Margin="4,-1,2,0" Name="label_TabTitle" VerticalAlignment="Top" 
                           FontSize="12" Padding="0,0,5,0" FontFamily="/IntCoRe;component/Fonts/Fonts.zip#Segoe UI Light" />
            <Button Height="20" HorizontalAlignment="Right" Margin="0" 
                    Name="button_close" VerticalAlignment="Center" Width="20" FontFamily="Courier" 
                    FontStretch="Normal" Visibility="Visible" Padding="0" Foreground="#FFBA1111" BorderThickness="0" 
                    HorizontalContentAlignment="Right"
                    VerticalContentAlignment="Center" 
                    Style="{StaticResource DeleteTabButtonStyle}"
                    Cursor="Hand"
                    ToolTipService.ToolTip="Close Tab ini">
            </Button>
        </Grid>
    </UserControl>
    
    
    using System.Windows.Controls;
    
    namespace IntCoRe.ChildWindows
    {
        public partial class CloseableHeader : UserControl
        {
            public CloseableHeader()
            {
                InitializeComponent();
            }
        }
    }

    CloasableTab code:

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using IntCoRe.ChildWindows;
    
    namespace IntCoRe.Controls
    {
        public class CloseableTab : TabItem
        {
            public CloseableTab()
            {
                CloseableHeader closableTabHeader = new CloseableHeader();
                this.Header = closableTabHeader;
                closableTabHeader.button_close.MouseEnter += new MouseEventHandler(button_close_MouseEnter);
                closableTabHeader.button_close.MouseLeave += new MouseEventHandler(button_close_MouseLeave);
                closableTabHeader.button_close.Click += new RoutedEventHandler(button_close_Click);
                closableTabHeader.label_TabTitle.SizeChanged += new SizeChangedEventHandler(label_TabTitle_SizeChanged);
            }
    
            public string Title
            {
                set
                {
                    ((CloseableHeader)this.Header).label_TabTitle.Content = value;
                }
            }
    
            //public int Padding
            //{
            //    set
            //    {
            //        (CloseableHeader)this.Padding = new System.Drawing.Point(22, 22); 
            //    }
            //}
    
            #region OVERRIDE
            // Override OnSelected - Show the Close Button
            protected override void OnSelected(RoutedEventArgs e)
            {
                base.OnSelected(e);
                ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
            }
    
            // Override OnUnSelected - Hide the Close Button
            protected override void OnUnselected(RoutedEventArgs e)
            {
                base.OnUnselected(e);
                ((CloseableHeader)this.Header).button_close.Visibility = System.Windows.Visibility.Collapsed; ;
            }
    
            // Override OnMouseEnter - Show the Close Button
            protected override void OnMouseEnter(MouseEventArgs e)
            {
                base.OnMouseEnter(e);
                ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
            }
    
            // Override OnMouseLeave - Hide the Close Button (If it is NOT selected)
            protected override void OnMouseLeave(MouseEventArgs e)
            {
                base.OnMouseLeave(e);
                if (!this.IsSelected)
                {
                    ((CloseableHeader)this.Header).button_close.Visibility = System.Windows.Visibility.Collapsed;
                }
            }
            #endregion
            
            #region EventHandler
            // Button MouseEnter - When the mouse is over the button - change color to Red
            void button_close_MouseEnter(object sender, MouseEventArgs e)
            {
                //((CloseableHeader)this.Header).button_close.Foreground = Brushes.Red;
            }
    
            // Button MouseLeave - When mouse is no longer over button - change color back to black
            void button_close_MouseLeave(object sender, MouseEventArgs e)
            {
                //((CloseableHeader)this.Header).button_close.Foreground = Brushes.Black;
            }
    
    
            // Button Close Click - Remove the Tab - (or raise an event indicating a "CloseTab" event has occurred)
            void button_close_Click(object sender, RoutedEventArgs e)
            {
                int count = ((TabControl)this.Parent).Items.Count;
                if (count > 1)
                    ((TabControl)this.Parent).Items.Remove(this);
            }
    
    
            // Label SizeChanged - When the Size of the Label changes (due to setting the Title) set position of button properly
            void label_TabTitle_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                ((CloseableHeader)this.Header).button_close.Margin = new Thickness(((CloseableHeader)this.Header).label_TabTitle.ActualWidth + 3, 1, -3, 0);
            }
            #endregion
        }
    }

    Silverlight Page as a navigation page (Silverlight UserControl is not include, you can make it your own):

    <navigation:Page 
        x:Class="IntCoRe.Views.ContactsPage" 
        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:i="http://schemas.microsoft.com/expression/2010/interactivity" 
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
        xmlns:viewModel="clr-namespace:IntCoRe.Views.Contacts.ViewModels"
        mc:Ignorable="d"
        xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
        d:DesignWidth="640" d:DesignHeight="480"
        Title="ContactsPage Page" FontFamily="/IntCoRe;component/Fonts/Fonts.zip#Segoe UI" FontSize="10.667">
        <navigation:Page.Resources>
            <viewModel:ContactsViewModel x:Key="contactViewModel"/>
        </navigation:Page.Resources>
        <Grid 
            DataContext="{Binding Source={StaticResource contactViewModel}}"
            x:Name="LayoutRoot">
        	<VisualStateManager.VisualStateGroups>
        		<VisualStateGroup x:Name="VisualStateGroup"/>
        	</VisualStateManager.VisualStateGroups>
            <Border x:Name="ContactBorder" BorderBrush="Black" BorderThickness="0" Child="{Binding CoReTabControl, Mode=TwoWay}"/>
            <StackPanel HorizontalAlignment="Right" Height="25" VerticalAlignment="Top" Orientation="Horizontal" Margin="0,0,15,0">
            	<Button Width="22" Margin="0" BorderThickness="0" Padding="0,0,-2,0" Height="20" RenderTransformOrigin="1,0.5" BorderBrush="{x:Null}"
            		x:Name="backWardTabButton" Style="{StaticResource BackButtonStyle}" ToolTipService.ToolTip="Menggeser TAB ke kiri" Command="{Binding BackwardTabItemCommand, Mode=TwoWay}">
            		<ed:BlockArrow Orientation="Left" Stroke="Black" UseLayoutRounding="False" Width="12" Height="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            			<ed:BlockArrow.Fill>
            				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            					<GradientStop Color="#FF7D98ED" Offset="0"/>
            					<GradientStop Color="#FF031E74" Offset="1"/>
            				</LinearGradientBrush>
            			</ed:BlockArrow.Fill>
            		</ed:BlockArrow>
            	</Button>
            	<Button  Width="22" Margin="0,0,3,0" BorderThickness="0" Padding="0" Height="20"
            		x:Name="forwardTabButton" Style="{StaticResource ForwardButtonStyle}" ToolTipService.ToolTip="Menggeser TAB ke kanan" Command="{Binding ForwardTabItemCommand, Mode=TwoWay}">
            		<ed:BlockArrow Height="12" Orientation="Right" Stroke="Black" UseLayoutRounding="False" Width="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            			<ed:BlockArrow.Fill>
            				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            					<GradientStop Color="#FF7D98ED" Offset="0"/>
            					<GradientStop Color="#FF031E74" Offset="1"/>
            				</LinearGradientBrush>
            			</ed:BlockArrow.Fill>
            		</ed:BlockArrow>
            	</Button>
            	<ToggleButton x:Name="toggleButton" Content="Menu" Margin="0" Style="{StaticResource MenuToggleButtonStyle}" BorderThickness="0" Width="50" ClickMode="Hover" IsChecked="{Binding IsToggleChecked, Mode=TwoWay}" VerticalAlignment="Center" Height="20" Foreground="#FF606060" FontWeight="Bold"/>
            </StackPanel>
            <ListBox x:Name="menuListBox" VerticalAlignment="Top" Width="200" Foreground="#FF454545" BorderThickness="0.3" SelectedIndex="{Binding MenuSelected, Mode=TwoWay}" 
                     HorizontalAlignment="Right" Margin="0,30,10,0" Height="350" Visibility="{Binding IsMenuVisible, Mode=TwoWay}" 
                     >
            	<i:Interaction.Triggers>
            		<i:EventTrigger EventName="MouseLeave">
            			<i:InvokeCommandAction x:Name="ActionMouseLeave" Command="{Binding MenuCollapsedCommand, Mode=TwoWay}"/>
            		</i:EventTrigger>
            		<i:EventTrigger EventName="SelectionChanged">
            			<i:InvokeCommandAction x:Name="ActionItemSelected" Command="{Binding MenuCollapsedCommand, Mode=TwoWay}"/>
            		</i:EventTrigger>
            	</i:Interaction.Triggers>
            	<!--SelectionChanged="menuListBox_SelectionChanged" 
                     MouseLeave="menuListBox_MouseLeave"-->
            	<ListBox.Background>
            		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            			<GradientStop Color="#FF011D4B" Offset="1"/>
            			<GradientStop Color="#FF055FF1"/>
            		</LinearGradientBrush>
            	</ListBox.Background>
            	<ListBoxItem x:Name="personCategory" MinHeight="25" VerticalContentAlignment="Center" VerticalAlignment="Center" Foreground="White" HorizontalContentAlignment="Left">
            		<TextBlock TextWrapping="Wrap" Text="Kategori " VerticalAlignment="Center"/>
            	</ListBoxItem>
            	<ListBoxItem x:Name="personDetail" MinHeight="25" VerticalContentAlignment="Center" Foreground="White" HorizontalContentAlignment="Left" VerticalAlignment="Center">
            		<TextBlock TextWrapping="Wrap" Text="Detail Personel" VerticalAlignment="Center"/>
            	</ListBoxItem>
            	<ListBoxItem x:Name="personTables" MinHeight="25" VerticalContentAlignment="Center" Foreground="White" HorizontalContentAlignment="Left" VerticalAlignment="Center">
            		<TextBlock TextWrapping="Wrap" Text="Tabel Tabel Kontak" VerticalAlignment="Center"/>
            	</ListBoxItem>
            	<ListBoxItem x:Name="searchPerson" MinHeight="25" VerticalContentAlignment="Center" Foreground="White" HorizontalContentAlignment="Left" VerticalAlignment="Center">
            		<TextBlock TextWrapping="Wrap" Text="Search Person" VerticalAlignment="Center"/>
            	</ListBoxItem>
            </ListBox>
        </Grid>
    </navigation:Page>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Navigation;
    
    namespace IntCoRe.Views
    {
        public partial class ContactsPage : Page
        {
            public ContactsPage()
            {
                InitializeComponent();
            }
    
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
        }
    }

     ViewModel

    using System.Windows.Controls;
    using IntCoRe.Common;
    using GalaSoft.MvvmLight.Command;
    using IntCoRe.Controls;
    using System.Windows;
    
    namespace IntCoRe.Views.Contacts.ViewModels
    {
        public class ContactsViewModel : ViewModel
        {
            public ContactsViewModel()
            {
                RegisterCommands();
                InitialTabItem();
            }
    
            #region COMMAND
            protected override void RegisterCommands()
            {
                MenuCollapsedCommand = new RelayCommand(onMenuCollapsed);
                ForwardTabItemCommand = new RelayCommand(OnForwardTabItem);
                BackwardTabItemCommand = new RelayCommand(OnBackwardTabItem);
            }
    
            public RelayCommand MenuCollapsedCommand { get; set; }
            public RelayCommand ForwardTabItemCommand { get; set; }
            public RelayCommand BackwardTabItemCommand { get; set; }
    
            private void onMenuCollapsed()
            {
                IsToggleChecked = false;
            }
            #endregion
    
            #region initial TabControl
            private void InitialTabItem()
            {
                CoReTabControl = new TabControl();
                UserControl userControl = new ContactInfoSilverlightControl();
                string title = "Info";
                AddNewTableInBrowser(userControl, title);
                CoReTabControl.SelectedIndex = 0;
            }
            #endregion
    
            protected override void MenuListBoxSeletedChanged()
            {
                string title = string.Empty;
                string name = "Person Name";
                UserControl userControl;
    
                switch (MenuSelected)
                {
                    case 0:
                        title = "Kategori Kontak";
                        userControl = new PersonCategorySilverlightControl(Application.Current.IsRunningOutOfBrowser);
                        AddNewTabItem(userControl, title);
                        break;
    
                    case 1:
                        title = "Kontak Utama";
                        userControl = new ContactSilverlightControl();
                        AddNewTabItem(userControl, title);
                        break;
    
                    case 2:
                        title = "Table-table";
                        userControl = new PersonTablesSilverlightControl();
                        AddNewTabItem(userControl, title);
                        break;
    
                    case 3:
                        title = "Search Contact";
                        userControl = new SearchSilverlightControl();
                        AddNewTabItem(userControl, title);
                        break;
    
                    default:
                        break;
                }
    
            }
    
            private void AddNewTabItem(UserControl userControl, string title)
            {
                if (Application.Current.IsRunningOutOfBrowser)
                {
                    Window window = new Window();
                    window.Title = title;
                    window.Content = userControl;
                    window.WindowStyle = WindowStyle.SingleBorderWindow;
                    window.Content = WindowsFrameControl.Content(window, userControl, title);
                    window.WindowStyle = WindowStyle.None;
                    window.Visibility = System.Windows.Visibility.Visible;
                }
                else
                {
                    AddNewTableInBrowser(userControl, title);
                }
            }
    
            private void AddNewTableInBrowser(UserControl userControl, string title)
            {
                CloseableTab newTabItem = new CloseableTab();
                newTabItem.Title = title;
                newTabItem.Height = TabItemHeight;
                newTabItem.Content = userControl;
                CoReTabControl.Items.Add(newTabItem);
                CoReTabControl.SelectedIndex = CoReTabControl.Items.Count - 1;
            }
        }
    }

    Hope can help and good luck:

    Sunday, July 8, 2012 7:43 AM

All replies

  • Hi Shyam_oec.

    You can put a tabControl in a silverlight page, and on every tabItem, you can have a Silverlight UserControl. Navigation become on tabControl on multiple silverlight userControl, instead of multiple silverlight pages. Silverlight User Control is similar to Silverlight page.

    Have fun.

    Sunday, July 8, 2012 2:18 AM
  • I tried this , but did'nt fulfilled my requirement.
    First problem is that Tab item header does'nt have a close button to close that tab dynamically.Since i have dynamically created tab item and added to TabControl i also want to close those tabs dynamically.
    Second problem is that when switching from one tab to another tab the Page's Unloaded event is fired meand that page is distroyed. Actually i want to persist all the Page's state so that one tab selction the same page can be viewed .
    So , how can i acheive this ?

    Sunday, July 8, 2012 6:43 AM
  • Hi,

    Here the code:

    Closeable TabItem XAML and Codebehind:

    <UserControl x:Class="IntCoRe.ChildWindows.CloseableHeader"
        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"
        mc:Ignorable="d"
        d:DesignHeight="20" d:DesignWidth="81" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" IsTabStop="True">
        
        <Grid x:Name="LayoutRoot" Background="{x:Null}">
            <sdk:Label Content="TabItem"  Height="23" HorizontalAlignment="Left" 
                           Margin="4,-1,2,0" Name="label_TabTitle" VerticalAlignment="Top" 
                           FontSize="12" Padding="0,0,5,0" FontFamily="/IntCoRe;component/Fonts/Fonts.zip#Segoe UI Light" />
            <Button Height="20" HorizontalAlignment="Right" Margin="0" 
                    Name="button_close" VerticalAlignment="Center" Width="20" FontFamily="Courier" 
                    FontStretch="Normal" Visibility="Visible" Padding="0" Foreground="#FFBA1111" BorderThickness="0" 
                    HorizontalContentAlignment="Right"
                    VerticalContentAlignment="Center" 
                    Style="{StaticResource DeleteTabButtonStyle}"
                    Cursor="Hand"
                    ToolTipService.ToolTip="Close Tab ini">
            </Button>
        </Grid>
    </UserControl>
    
    
    using System.Windows.Controls;
    
    namespace IntCoRe.ChildWindows
    {
        public partial class CloseableHeader : UserControl
        {
            public CloseableHeader()
            {
                InitializeComponent();
            }
        }
    }

    CloasableTab code:

    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;
    using IntCoRe.ChildWindows;
    
    namespace IntCoRe.Controls
    {
        public class CloseableTab : TabItem
        {
            public CloseableTab()
            {
                CloseableHeader closableTabHeader = new CloseableHeader();
                this.Header = closableTabHeader;
                closableTabHeader.button_close.MouseEnter += new MouseEventHandler(button_close_MouseEnter);
                closableTabHeader.button_close.MouseLeave += new MouseEventHandler(button_close_MouseLeave);
                closableTabHeader.button_close.Click += new RoutedEventHandler(button_close_Click);
                closableTabHeader.label_TabTitle.SizeChanged += new SizeChangedEventHandler(label_TabTitle_SizeChanged);
            }
    
            public string Title
            {
                set
                {
                    ((CloseableHeader)this.Header).label_TabTitle.Content = value;
                }
            }
    
            //public int Padding
            //{
            //    set
            //    {
            //        (CloseableHeader)this.Padding = new System.Drawing.Point(22, 22); 
            //    }
            //}
    
            #region OVERRIDE
            // Override OnSelected - Show the Close Button
            protected override void OnSelected(RoutedEventArgs e)
            {
                base.OnSelected(e);
                ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
            }
    
            // Override OnUnSelected - Hide the Close Button
            protected override void OnUnselected(RoutedEventArgs e)
            {
                base.OnUnselected(e);
                ((CloseableHeader)this.Header).button_close.Visibility = System.Windows.Visibility.Collapsed; ;
            }
    
            // Override OnMouseEnter - Show the Close Button
            protected override void OnMouseEnter(MouseEventArgs e)
            {
                base.OnMouseEnter(e);
                ((CloseableHeader)this.Header).button_close.Visibility = Visibility.Visible;
            }
    
            // Override OnMouseLeave - Hide the Close Button (If it is NOT selected)
            protected override void OnMouseLeave(MouseEventArgs e)
            {
                base.OnMouseLeave(e);
                if (!this.IsSelected)
                {
                    ((CloseableHeader)this.Header).button_close.Visibility = System.Windows.Visibility.Collapsed;
                }
            }
            #endregion
            
            #region EventHandler
            // Button MouseEnter - When the mouse is over the button - change color to Red
            void button_close_MouseEnter(object sender, MouseEventArgs e)
            {
                //((CloseableHeader)this.Header).button_close.Foreground = Brushes.Red;
            }
    
            // Button MouseLeave - When mouse is no longer over button - change color back to black
            void button_close_MouseLeave(object sender, MouseEventArgs e)
            {
                //((CloseableHeader)this.Header).button_close.Foreground = Brushes.Black;
            }
    
    
            // Button Close Click - Remove the Tab - (or raise an event indicating a "CloseTab" event has occurred)
            void button_close_Click(object sender, RoutedEventArgs e)
            {
                int count = ((TabControl)this.Parent).Items.Count;
                if (count > 1)
                    ((TabControl)this.Parent).Items.Remove(this);
            }
    
    
            // Label SizeChanged - When the Size of the Label changes (due to setting the Title) set position of button properly
            void label_TabTitle_SizeChanged(object sender, SizeChangedEventArgs e)
            {
                ((CloseableHeader)this.Header).button_close.Margin = new Thickness(((CloseableHeader)this.Header).label_TabTitle.ActualWidth + 3, 1, -3, 0);
            }
            #endregion
        }
    }

    Silverlight Page as a navigation page (Silverlight UserControl is not include, you can make it your own):

    <navigation:Page 
        x:Class="IntCoRe.Views.ContactsPage" 
        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:i="http://schemas.microsoft.com/expression/2010/interactivity" 
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
        xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 
        xmlns:viewModel="clr-namespace:IntCoRe.Views.Contacts.ViewModels"
        mc:Ignorable="d"
        xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
        d:DesignWidth="640" d:DesignHeight="480"
        Title="ContactsPage Page" FontFamily="/IntCoRe;component/Fonts/Fonts.zip#Segoe UI" FontSize="10.667">
        <navigation:Page.Resources>
            <viewModel:ContactsViewModel x:Key="contactViewModel"/>
        </navigation:Page.Resources>
        <Grid 
            DataContext="{Binding Source={StaticResource contactViewModel}}"
            x:Name="LayoutRoot">
        	<VisualStateManager.VisualStateGroups>
        		<VisualStateGroup x:Name="VisualStateGroup"/>
        	</VisualStateManager.VisualStateGroups>
            <Border x:Name="ContactBorder" BorderBrush="Black" BorderThickness="0" Child="{Binding CoReTabControl, Mode=TwoWay}"/>
            <StackPanel HorizontalAlignment="Right" Height="25" VerticalAlignment="Top" Orientation="Horizontal" Margin="0,0,15,0">
            	<Button Width="22" Margin="0" BorderThickness="0" Padding="0,0,-2,0" Height="20" RenderTransformOrigin="1,0.5" BorderBrush="{x:Null}"
            		x:Name="backWardTabButton" Style="{StaticResource BackButtonStyle}" ToolTipService.ToolTip="Menggeser TAB ke kiri" Command="{Binding BackwardTabItemCommand, Mode=TwoWay}">
            		<ed:BlockArrow Orientation="Left" Stroke="Black" UseLayoutRounding="False" Width="12" Height="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            			<ed:BlockArrow.Fill>
            				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            					<GradientStop Color="#FF7D98ED" Offset="0"/>
            					<GradientStop Color="#FF031E74" Offset="1"/>
            				</LinearGradientBrush>
            			</ed:BlockArrow.Fill>
            		</ed:BlockArrow>
            	</Button>
            	<Button  Width="22" Margin="0,0,3,0" BorderThickness="0" Padding="0" Height="20"
            		x:Name="forwardTabButton" Style="{StaticResource ForwardButtonStyle}" ToolTipService.ToolTip="Menggeser TAB ke kanan" Command="{Binding ForwardTabItemCommand, Mode=TwoWay}">
            		<ed:BlockArrow Height="12" Orientation="Right" Stroke="Black" UseLayoutRounding="False" Width="12" StrokeThickness="0" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            			<ed:BlockArrow.Fill>
            				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            					<GradientStop Color="#FF7D98ED" Offset="0"/>
            					<GradientStop Color="#FF031E74" Offset="1"/>
            				</LinearGradientBrush>
            			</ed:BlockArrow.Fill>
            		</ed:BlockArrow>
            	</Button>
            	<ToggleButton x:Name="toggleButton" Content="Menu" Margin="0" Style="{StaticResource MenuToggleButtonStyle}" BorderThickness="0" Width="50" ClickMode="Hover" IsChecked="{Binding IsToggleChecked, Mode=TwoWay}" VerticalAlignment="Center" Height="20" Foreground="#FF606060" FontWeight="Bold"/>
            </StackPanel>
            <ListBox x:Name="menuListBox" VerticalAlignment="Top" Width="200" Foreground="#FF454545" BorderThickness="0.3" SelectedIndex="{Binding MenuSelected, Mode=TwoWay}" 
                     HorizontalAlignment="Right" Margin="0,30,10,0" Height="350" Visibility="{Binding IsMenuVisible, Mode=TwoWay}" 
                     >
            	<i:Interaction.Triggers>
            		<i:EventTrigger EventName="MouseLeave">
            			<i:InvokeCommandAction x:Name="ActionMouseLeave" Command="{Binding MenuCollapsedCommand, Mode=TwoWay}"/>
            		</i:EventTrigger>
            		<i:EventTrigger EventName="SelectionChanged">
            			<i:InvokeCommandAction x:Name="ActionItemSelected" Command="{Binding MenuCollapsedCommand, Mode=TwoWay}"/>
            		</i:EventTrigger>
            	</i:Interaction.Triggers>
            	<!--SelectionChanged="menuListBox_SelectionChanged" 
                     MouseLeave="menuListBox_MouseLeave"-->
            	<ListBox.Background>
            		<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            			<GradientStop Color="#FF011D4B" Offset="1"/>
            			<GradientStop Color="#FF055FF1"/>
            		</LinearGradientBrush>
            	</ListBox.Background>
            	<ListBoxItem x:Name="personCategory" MinHeight="25" VerticalContentAlignment="Center" VerticalAlignment="Center" Foreground="White" HorizontalContentAlignment="Left">
            		<TextBlock TextWrapping="Wrap" Text="Kategori " VerticalAlignment="Center"/>
            	</ListBoxItem>
            	<ListBoxItem x:Name="personDetail" MinHeight="25" VerticalContentAlignment="Center" Foreground="White" HorizontalContentAlignment="Left" VerticalAlignment="Center">
            		<TextBlock TextWrapping="Wrap" Text="Detail Personel" VerticalAlignment="Center"/>
            	</ListBoxItem>
            	<ListBoxItem x:Name="personTables" MinHeight="25" VerticalContentAlignment="Center" Foreground="White" HorizontalContentAlignment="Left" VerticalAlignment="Center">
            		<TextBlock TextWrapping="Wrap" Text="Tabel Tabel Kontak" VerticalAlignment="Center"/>
            	</ListBoxItem>
            	<ListBoxItem x:Name="searchPerson" MinHeight="25" VerticalContentAlignment="Center" Foreground="White" HorizontalContentAlignment="Left" VerticalAlignment="Center">
            		<TextBlock TextWrapping="Wrap" Text="Search Person" VerticalAlignment="Center"/>
            	</ListBoxItem>
            </ListBox>
        </Grid>
    </navigation:Page>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using System.Windows.Navigation;
    
    namespace IntCoRe.Views
    {
        public partial class ContactsPage : Page
        {
            public ContactsPage()
            {
                InitializeComponent();
            }
    
            // Executes when the user navigates to this page.
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
        }
    }

     ViewModel

    using System.Windows.Controls;
    using IntCoRe.Common;
    using GalaSoft.MvvmLight.Command;
    using IntCoRe.Controls;
    using System.Windows;
    
    namespace IntCoRe.Views.Contacts.ViewModels
    {
        public class ContactsViewModel : ViewModel
        {
            public ContactsViewModel()
            {
                RegisterCommands();
                InitialTabItem();
            }
    
            #region COMMAND
            protected override void RegisterCommands()
            {
                MenuCollapsedCommand = new RelayCommand(onMenuCollapsed);
                ForwardTabItemCommand = new RelayCommand(OnForwardTabItem);
                BackwardTabItemCommand = new RelayCommand(OnBackwardTabItem);
            }
    
            public RelayCommand MenuCollapsedCommand { get; set; }
            public RelayCommand ForwardTabItemCommand { get; set; }
            public RelayCommand BackwardTabItemCommand { get; set; }
    
            private void onMenuCollapsed()
            {
                IsToggleChecked = false;
            }
            #endregion
    
            #region initial TabControl
            private void InitialTabItem()
            {
                CoReTabControl = new TabControl();
                UserControl userControl = new ContactInfoSilverlightControl();
                string title = "Info";
                AddNewTableInBrowser(userControl, title);
                CoReTabControl.SelectedIndex = 0;
            }
            #endregion
    
            protected override void MenuListBoxSeletedChanged()
            {
                string title = string.Empty;
                string name = "Person Name";
                UserControl userControl;
    
                switch (MenuSelected)
                {
                    case 0:
                        title = "Kategori Kontak";
                        userControl = new PersonCategorySilverlightControl(Application.Current.IsRunningOutOfBrowser);
                        AddNewTabItem(userControl, title);
                        break;
    
                    case 1:
                        title = "Kontak Utama";
                        userControl = new ContactSilverlightControl();
                        AddNewTabItem(userControl, title);
                        break;
    
                    case 2:
                        title = "Table-table";
                        userControl = new PersonTablesSilverlightControl();
                        AddNewTabItem(userControl, title);
                        break;
    
                    case 3:
                        title = "Search Contact";
                        userControl = new SearchSilverlightControl();
                        AddNewTabItem(userControl, title);
                        break;
    
                    default:
                        break;
                }
    
            }
    
            private void AddNewTabItem(UserControl userControl, string title)
            {
                if (Application.Current.IsRunningOutOfBrowser)
                {
                    Window window = new Window();
                    window.Title = title;
                    window.Content = userControl;
                    window.WindowStyle = WindowStyle.SingleBorderWindow;
                    window.Content = WindowsFrameControl.Content(window, userControl, title);
                    window.WindowStyle = WindowStyle.None;
                    window.Visibility = System.Windows.Visibility.Visible;
                }
                else
                {
                    AddNewTableInBrowser(userControl, title);
                }
            }
    
            private void AddNewTableInBrowser(UserControl userControl, string title)
            {
                CloseableTab newTabItem = new CloseableTab();
                newTabItem.Title = title;
                newTabItem.Height = TabItemHeight;
                newTabItem.Content = userControl;
                CoReTabControl.Items.Add(newTabItem);
                CoReTabControl.SelectedIndex = CoReTabControl.Items.Count - 1;
            }
        }
    }

    Hope can help and good luck:

    Sunday, July 8, 2012 7:43 AM