Silverlight2.0 导航xaml Page

     在Silverlight2.0中，实现导航功能，实际上是通过动态创建xaml实例进行的。如下图，点击左边导航，右边内容实时更新。

下面通过一个简单的范例进行说明：

MainPage.xaml

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="Auto" Height="Auto">
    <UserControl.Resources>
        <Style x:Key="ListBoxTextBlock" TargetType="TextBlock">
            <Setter Property="FontFamily" Value="Arial"></Setter>
            <Setter Property="Foreground" Value="#FF5C9AC9"></Setter>
            <Setter Property="FontSize" Value="12"></Setter>
        </Style>
    </UserControl.Resources>
    <ScrollViewer Background="Gray"  HorizontalScrollBarVisibility="Visible">
        <Grid x:Name="LayoutRoot" Height="1000" Width="1200" HorizontalAlignment="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"></RowDefinition>
                <RowDefinition Height="8"></RowDefinition>
                <RowDefinition Height="750"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="220"></ColumnDefinition>
                <ColumnDefinition Width="10"></ColumnDefinition>
                <ColumnDefinition Width="2.5*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <!--heading define-->
            <Rectangle Grid.Row="0" Grid.ColumnSpan="3" Fill="White" ></Rectangle>
                <Rectangle Grid.Row="0" Grid.ColumnSpan="3">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                        <GradientStop Color="#B2FFFFFF" Offset="0"></GradientStop>
                        <GradientStop Color="#FF5C9AC9" Offset="1"></GradientStop>
                        <GradientStop Color="#66FFFFFF" Offset="0.325"></GradientStop>
                        <GradientStop Color="#1EFFFFFF" Offset="0.325"></GradientStop>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
            <TextBlock Grid.Row="0" Grid.ColumnSpan="3" Text="TreeView 操作测试"  FontSize="18" FontWeight="Bold" 
                        HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" FontFamily="Verdana"
                       ></TextBlock>
            <!--Navigation-->
            <Border Grid.Row="2" Grid.Column="0" CornerRadius="4" BorderThickness="1" BorderBrush="Black">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Rectangle Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                <GradientStop Color="#FFFFFFFF" Offset="0.3"></GradientStop>
                                <GradientStop Color="#FF86B3D4" Offset="0.525"></GradientStop>
                                <GradientStop Color="#FF5C9AC9" Offset="1"></GradientStop>
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                    <Rectangle Grid.Row="1" Grid.RowSpan="2" Fill="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></Rectangle>
                    <TextBlock Grid.Row="0" Text="TreeView  选择" FontWeight="Bold" FontSize="15" Margin="30,10,30,10"></TextBlock>
                    <ListBox x:Name="lbMenu" Grid.Row="2" SelectionChanged="lbMenu_SelectionChanged" Margin="30,2,30,20">
                        <TextBlock Text="首页" Style="{StaticResource ListBoxTextBlock}"></TextBlock>
                        <TextBlock Text="Page.xaml" Style="{StaticResource ListBoxTextBlock}"></TextBlock>
                        <TextBlock Text="TreeView2.xaml" Style="{StaticResource ListBoxTextBlock}"></TextBlock>
                        <TextBlock Text="TreeView3.xaml" Style="{StaticResource ListBoxTextBlock}"></TextBlock>
                        <TextBlock Text="TreeView4.xaml" Style="{StaticResource ListBoxTextBlock}"></TextBlock>
                    </ListBox>
                </Grid>
            </Border>
            <!--content-->
            <Border Grid.Row="2" Grid.Column="2" BorderThickness="1" BorderBrush="Black" CornerRadius="4" Padding="5,5,5,5">
                <Grid x:Name="content"></Grid>
            </Border>
        </Grid>
    </ScrollViewer>
</UserControl>

MainPage.cs

 TreeviewDemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void lbMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            //获得选择项目名称
            string contentname = (e.AddedItems[0] as TextBlock).Text;

            LoadPage(contentname);

        }
        private void LoadPage(string pageName)
        {
            string typename = "";

            UIElement element;

            if (this.content.Children.Count > 0)
            {
                element = this.content.Children[0];
            }
            if (pageName == "首页")
            {
                pageName = "Page.xaml";
            }

            pageName = pageName.Substring(0, pageName.IndexOf("."));

            typename = string.Format(CultureInfo.InvariantCulture,"TreeviewDemo.{0}",pageName);


            Type type = typeof(Page).Assembly.GetType(typename,false);
            if (type == null)
            {
                return;
            }

            //创建实例
            UIElement newElement = Activator.CreateInstance(type) as UIElement;

            LoadExample(newElement);
        }

        private void LoadExample(UIElement element)
        {
            //加载控制项
            content.Children.Clear();
            content.Children.Add(element);
        }
    }
}