Navigation working, but not in the frame I want it to load in

[Ridzwan]

Hello,

I managed to get the navigation working. However, it does not load the page in the frame I want it to load in. I've attached a picture of the UI in the link below:

Edit: On clicking the hyperlinkbutton, the UI for page.xaml is gone and it loads JustATestApp only.

Picture

The RedFrameContainer is right below the scroller.

Page.xaml (removed some unnecessary parts)

<telerik:RadPage
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"  x:Class="Project_Portal.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="750" Height="550" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:Liquid="clr-namespace:Liquid;assembly=Liquid">
    <Grid x:Name="LayoutRoot" Background="White" Width="Auto" Height="Auto">


        <Border Grid.ColumnSpan="3" Background="{x:Null}" Grid.RowSpan="2" BorderBrush="#FFABE0FF" BorderThickness="1,1,1,1">
            <TextBlock Height="67" Width="310.5" Foreground="#FFF0F0F0" TextWrapping="Wrap" VerticalAlignment="Top" HorizontalAlignment="Right"><Run FontFamily="./Fonts/Fonts.zip#Calibri" FontSize="55" Text="Project Portal"/></TextBlock>
        </Border>

        <Border Grid.Row="1" x:Name="Sidebar" Background="{x:Null}" BorderBrush="#FFABE0FF" BorderThickness="0,0,1,0" >
            <layoutToolkit:Accordion SelectionMode="One"
                             SelectionSequence="CollapseBeforeExpand" Height="371" Width="161" BorderBrush="#FFABE0FF">
                <layoutToolkit:AccordionItem Header="Project Category" FontWeight="Bold" FontFamily="Portable User Interface">
                    <HyperlinkButton Content="Click Me TO Test Navigation" Click="HyperlinkButton_Click"/>
                </layoutToolkit:AccordionItem>
                <layoutToolkit:AccordionItem Header="Resources" FontWeight="Bold" FontFamily="Portable User Interface">
                    <RadioButton Height="24" Width="116" Content="RadioButton"/>
                </layoutToolkit:AccordionItem>
                <layoutToolkit:AccordionItem Header="Upload" FontWeight="Bold" FontFamily="Portable User Interface">
                    <RadioButton Height="24" Width="59" Content="RadioButton"/>
                </layoutToolkit:AccordionItem>
            </layoutToolkit:Accordion>
        </Border>



        <Liquid:Scroller EnableUserControl="True" Direction="-1,0" Margin="4,18,0,0" Grid.Column="1" Grid.Row="1" Content="Please select a project category at the sidebar on the left to see what projects are available." VerticalAlignment="Top" Height="29" FontFamily="./Fonts/Fonts.zip#Arial Unicode MS" FontSize="22"/>
        <telerik:RadFrameContainer x:Name="panel" Grid.Column="1" Grid.Row="1" Margin="8,51,8,8"/>


    </Grid>
</telerik:RadPage>

Page.xaml.cs

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 Telerik.Windows.Controls;

namespace Project_Portal
{
    public partial class Page : RadPage
    {

        public Page()
        {
            InitializeComponent();
        }

        private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            NavigationService service = NavigationService.GetNavigationService();
            service.Target = Application.Current.RootVisual as Panel;
            service.Navigate(new JustATestApp());
        }

    }
}

JustATestApp.xaml

<telerik:RadPage x:Class="Project_Portal.JustATestApp"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="Hello there"/>
    </Grid>
</telerik:RadPage>

Can someone point me in the right direction please? Your help would be much appreciated.. Thank you

[Bobi]

Hello Ridzwan,
I reviewed your sample code and noticed the following :

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            NavigationService service = NavigationService.GetNavigationService();
            service.Target = Application.Current.RootVisual as Panel;            
            service.Navigate(new JustATestApp());
        }  
This means that the root panel is set as a target and all the pages are placed into it.
If you want to navigate and place the page to a particular RadFrameContainer then you have to set it as a target to the NavigationService:
service.Target = this.panel;  //The navigation target is set to the desired RadFrameContainer

So if you want to navigate between pages in "panel" container then you have to do the following:
private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            NavigationService service = NavigationService.GetNavigationService();
            service.Target = this.panel;         
            service.Navigate(new JustATestApp());
        }
I hope that this answers your question.

Greetings,
Boryana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.