Develop Reference

Creating a Subclass of Page in UWP

What I'm attempting to do:
Create a custom page control that consumers can use just like the UWP page, but, that also displays it's own custom content along side the consumers content.
What have I tried:
Creating a new Control, inheriting from Page
Creating a templated control that inherits from page
Creating a control that contains a page
Setting the ContentProperty attribute and binding to it in my custom page
What is the problem?
When I attempt to create a control that has both a xaml and xaml.cs file, that inherits from Page I get InvalidCastExceptions on random controls inside the subclassed control.
Example:
TestPage.xaml
<Page
x:Class="ControlSandbox.TestPage"
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:uwp_toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Content>
<ContentPresenter Content="{Binding}" />
</Page.Content>
<Page.BottomAppBar>
<AppBar Background="Transparent" x:Name="appbar" IsOpen="True">
<uwp_toolkit:InAppNotification x:Name="note">
<StackPanel>
<TextBlock>HEADER!</TextBlock>
<TextBlock>Message</TextBlock>
<StackPanel Orientation="Horizontal">
<Button>OK</Button>
<Button>Cancel?</Button>
</StackPanel>
</StackPanel>
</uwp_toolkit:InAppNotification>
</AppBar>
</Page.BottomAppBar>
</Page>
TestPage.xaml.cs
public partial class TestPage : Page
{
public TestPage()
{
this.InitializeComponent();
}
public void ShowNotification()
{
appbar.IsOpen = true;
note.Show();
}
}
MainPage.xaml
<controlsandbox:TestPage
xmlns:controlsandbox="using:ControlSandbox" x:Class="ControlSandbox.MainPage"
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"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<Button Click="Button_Click">SHOW NOTIFICATION</Button>
</Grid>
</controlsandbox:TestPage>
MainPage.xaml.cs
public partial class MainPage : TestPage
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
this.ShowNotification();
}
}
The above code results in an InvalidCastException and for the life of me I can't find the problem.
System.InvalidCastException: 'Unable to cast object of type
'Windows.UI.Xaml.Controls.AppBar' to type
'Windows.UI.Xaml.Controls.Button'.'
Now if I do the same exact code, but all in the MainPage.xaml instead of in the TestPage.xaml everything works as expected
Update
So I believe this is a bug in the platform. Here is a demo I did of the issue. Please prove me wrong because this would be a real limitation https://github.com/DotNetRussell/UWP_Page_Inheritance_Bug
Update
I added the changes for the answer below. It seems that when I create a normal templated control and put it on a vanilla uwp page, it works fine. However, when I create a templated Page, it ignores my template.
Update
I think this is a bug in the platform. I opened an issue up on github https://github.com/microsoft/microsoft-ui-xaml/issues/1075

The problem is that if create custom base page with Xaml, it will be mandatory converted to the subpage's content, if the sub-page contained controls different with Base page will throw exception. And the better way is create base class without xaml and add the base page content in the code behind. For more code please refer the following .
public class BasePage : Page
{
protected override void OnNavigatedTo(NavigationEventArgs e)
{
this.BottomAppBar = new AppBar()
{
Background = new SolidColorBrush(Colors.Transparent),
IsOpen = false,
Content = new InAppNotification
{
Content = new StackPanel
{
Children =
{
new TextBlock{ Text = "HEADER!"},
new TextBlock{Text = "Message"},
new StackPanel
{
Orientation = Orientation.Horizontal,
Children=
{
new Button{Content = "ok"},
new Button {Content = "cancel"}
}
}
}
}
}
};
base.OnNavigatedTo(e);
}
public void ShowNotification()
{
this.BottomAppBar.IsOpen = true;
InAppNotification note = this.BottomAppBar.Content as InAppNotification;
if (note != null)
note.Show();
}
}
Usage
public sealed partial class MainPage : BasePage
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
ShowNotification();
}
}
Xaml
<local:BasePage
x:Class="CustomPage.MainPage"
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:local="using:CustomPage"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid>
<Button Click="Button_Click" Content="ClikMe" />
</Grid>
</local:BasePage>

Create a Templated Control (Project->Add New Item->Templated Control in Visual Studio):
public sealed class CustomPage : Page
{
private AppBar appbar;
private InAppNotification note;
public CustomPage()
{
this.DefaultStyleKey = typeof(CustomPage);
}
protected override void OnApplyTemplate()
{
appbar = GetTemplateChild("appbar") as AppBar;
note = GetTemplateChild("note") as InAppNotification;
}
public void ShowNotification()
{
if (appbar != null)
appbar.IsOpen = true;
note?.Show();
}
}
...and define a custom Style in Themes/Generic.xaml:
<Style TargetType="local:CustomPage">
<Setter Property="BottomAppBar">
<Setter.Value>
<AppBar Background="Transparent" x:Name="appbar" IsOpen="True">
<uwp_toolkit:InAppNotification x:Name="note">
<StackPanel>
<TextBlock>HEADER!</TextBlock>
<TextBlock>Message</TextBlock>
<StackPanel Orientation="Horizontal">
<Button>OK</Button>
<Button>Cancel?</Button>
</StackPanel>
</StackPanel>
</uwp_toolkit:InAppNotification>
</AppBar>
</Setter.Value>
</Setter>
</Style>
There is .xaml.cs file for the CustomPage base class.
Edit: Since the BottomAppBar is not part of the template, you need to wait to access the elements in it until they have actually been created. Just do this in the method:
public sealed class CustomPage : Page
{
public CustomPage()
{
this.DefaultStyleKey = typeof(CustomPage);
}
public void ShowNotification()
{
AppBar appBar = this.BottomAppBar;
appBar.IsOpen = true;
InAppNotification note = appBar.Content as InAppNotification;
if(note != null)
note.Show();
}
}

How to navigate to previous page in WPF but keep the data?

How do I navigate to the previous page in WPF but keep the data?
Suppose I have 2 pages in my app Page1 and Page2. and let's say that in page 1 the user writes some inputs for example his name, email etc...
After the user filled in his details on page 1 he navigated to page 2.
Now he wants to go back to the same page 1, how can he go back to the same page 1 with all his data?
Until now I navigated between pages by creating a new page like this:
private void PreviousButton(object sender , RoutedEventArgs e)
{
Page1 p1 = new Page1();
NavigationService.Navigate(p1);
}

You can keep a reference of Page1 in Page2:
Page1: Xaml
<Grid>
<StackPanel>
<TextBox x:Name="TxbName" Margin="10"/>
<TextBox x:Name="TxbEmail" Margin="10"/>
<Button x:Name="BtnNext" Content="Next Page" Click="BtnNext_Click"/>
</StackPanel>
</Grid>
Page1 C#
public partial class Page1
{
public Page1()
{
InitializeComponent();
}
private void BtnNext_Click(object sender, RoutedEventArgs e)
{
var page2 = new Page2(this);
NavigationService.Navigate(page2);
}
}
Page2 Xaml:
<Grid>
<StackPanel>
<Label x:Name="LblName" Margin="10"/>
<Label x:Name="LblEmail" Margin="10"/>
<Button x:Name="BtnPrevious" Content="Previous Page" Click="BtnPrevious_Click"/>
</StackPanel>
</Grid>
Page2 C#:
public partial class Page2
{
private Page1 _page1;
public Page2(Page1 page1)
{
InitializeComponent();
_page1 = page1;
}
private void BtnPrevious_Click(object sender, RoutedEventArgs e)
{
NavigationService.Navigate(_page1);
}
}

Try to set KeepLive = true in page attribute. Check whether it works for you.

How to reuse WPF custome window

I have created custome window (titlebar, min/max/ext buttons, own border for window manipulation and lots of styles and triggers).
There are 5 methods defined (which i would like to override):
From window markup:
SourceInitialized="Window_SourceInitialized"
Closing="Window_Closing"
From Titlebar buttons:
Exit_Click()
Max_Click()
Min_Click()
And at last I have DockPanel
<DockPanel Name="ClientArea"/>
In which I want to put my content
I have tried to add content from code:
BaseWindow editInterfaceWindow = new BaseWindow() { Owner = this };
editInterfaceWindow.DataContext = new EditInterface();
editInterfaceWindow.ShowDialog();
But this way some bindings stoped working and inside editInterfaceWindow I cant create another window this way because of Owner = this. There are also some problems with InitializeComponent() in constructor.
And ListView inside EditInterface UserControl <ListView Name="LBAvaliable" ItemsSource="{Binding AvaliableFaces, UpdateSourceTrigger=PropertyChanged}"> is not visible in code as LBAvaliable.
I have used that window few times, filling ClientArea with content by hand.
How should I create other windows, so that I can just inherit it or just define binding? So my XAML for every single window does not take ~1000 lines of code.

In the past I've used MVVMCross Framework and we never had to worry about this ourselves. Though this is not the best, here's an idea on what you can do.
Create a view model that can be overridden for your user control.
Set data templates.
Programmatically change the view model for your user control's main content and let data templates do the work for the UI.
View Model: Pre-defined 3 button actions ready for you to set/override.
public class MainUCViewModel : ViewModelBase
{
private Action<object> btnACommand;
private Action<object> btnBCommand;
private Action<object> btnCCommand;
private object ccVM;
public ViewModelBase CCVM
{
get { return this.ccVM; }
set
{
this.ccVM = value;
OnPropertyChanged(); // Notify View
}
}
public MainUCViewModel()
{
}
public RelayCommand BtnACommand
{
get { return new RelayCommand(btnACommand); }
}
public RelayCommand BtnBCommand
{
get { return new RelayCommand(btnBCommand); }
}
public RelayCommand BtnCCommand
{
get { return new RelayCommand(btnCCommand); }
}
public void SetBtnACommand(Action<object> action)
{
this.btnACommand = action;
}
public void SetBtnBCommand(Action<object> action)
{
this.btnBCommand = action;
}
public void SetBtnCCommand(Action<object> action)
{
this.btnCCommand = action;
}
}
View:
<UserControl x:Class="WpfApplication1.Views.UserControls.MainUC"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="750">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="45" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<StackPanel Orientation="Horizontal">
<Button Command="{Binding BtnACommand}" Width="100">
<TextBlock>A</TextBlock>
</Button>
<Rectangle Width="15" />
<Button Command="{Binding BtnBCommand}" Width="100">
<TextBlock>B</TextBlock>
</Button>
<Rectangle Width="15" />
<Button Command="{Binding BtnCCommand}" Width="100">
<TextBlock>C</TextBlock>
</Button>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<ContentControl x:Name="CCMain" Content="{Binding CCVM}"/>
</Grid>
</Grid>
</UserControl>
Look at Thinking with MVVM: Data Templates + ContentControl. Simply define the data template for your view model.
<Window.Resources>
<DataTemplate DataType="{x:Type ViewModel:GeneralSettingsViewModel}">
<View:GeneralSettingsView/>
</DataTemplate
<DataTemplate DataType="{x:Type ViewModel:AdvancedSettingsViewModel}">
<View:AdvancedSettingsView/>
</DataTemplate>
</Window.Resources>
What I’m saying here is that GeneralSettingsViewModel should be
rendered using a GeneralSettingsView. That’s exactly what we need !
Because the Views are created using a DataTemplate, we do not need to
setup the DataContext, it will be automatically registered to the
templated object, the ViewModel.

There are two main approaches to your problem:
Inherited windows
Configurable windows
For approach 1, design your window and make the methods overrideable:
In base window xaml, assign the handlers and everything you want:
<Window x:Class="WpfTests.MainWindow"
...
SourceInitialized="Window_SourceInitialized">
In base window, define the handlers as protected virtual (or abstract, if you like to enforce their implementation)
public partial class MainWindow : Window
{
// ...
protected virtual void Window_SourceInitialized(object sender, EventArgs e)
{
}
// ...
}
Create derived windows
public class ExWindow : MainWindow
{
protected override void Window_SourceInitialized(object sender, EventArgs e)
{
// specialized code here
}
}
Change App.xaml to use Startup instead of StartupUri
<Application x:Class="WpfTests.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Startup="Application_Startup">
And manually create your first window, chosing one of the inherited window classes
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
var window = new ExWindow();
window.Show();
}
}
The second approach - configurable windows - follows the same principle as a good user control design: The window/control properties are controlled by the creator instead of being controlled by the window/control itself.
So, instead of defining some event handler within the window code, just leave this exercise to the user, who hopefully knows what the window should do:
public partial class MainWindow : Window
{
// I don't care for SourceInitialized (also remove it from XAML)
}
In App.xaml or wherever a window is created:
public partial class App : Application
{
private void Application_Startup(object sender, StartupEventArgs e)
{
var window = new MainWindow();
window.SourceInitialized += window_SourceInitialized;
window.Show();
}
void window_SourceInitialized(object sender, EventArgs e)
{
var window = sender as MainWindow;
// I know how to handle this event for this window instance
}
}

Dynamic pages using Pivot control

Being new to the Windows 7/8 phone development arena... I am enjoying working with the windows phone tremendously... however there has been a learning curve and so much to get to know.
With that said, what I am trying to do is create a page that that is dynamically bound to a data structure that will display n number of pivot pages, and each pivot page will have different XAML to display the content.
I looked over this code project article (http://www.codeproject.com/Articles/113152/Applying-Data-Templates-Dynamically-by-Type-in-WP7) and it uses a list box to control the display... but what I am interested in is doing the same thing, but with a pivot page.
I learn best by example... here are the classes for binding the data to the controls, that I would LIKE TO USE ...
public class ParkingLot : List<Car>
{
public ParkingLot() { }
// this will be the pivot page title
public string Lot { get; set; }
// the list of cars will be displayed on the page
}
public class Car
{
public Car() { }
// this will be the data that is displayed in the pivot page for each car
public string Width { get; set; }
public string Length { get; set; }
}
public class Library : List<Book>
{
public Library() { }
// this will be the pivot page title
public string Location { get; set; }
// the list of books will be displayed on the page
}
public class Book
{
public Book() { }
// this is the data that will be displayed for each book
public string ISBN { get; set; }
public string Title { get; set; }
}
I don't know if it would be better to post all the code here... or just to have you all look at the article on Code project, I will post up the code that I modified from the article... in hopes that somebody can help me figure this out:
xaml :
<phone:PhoneApplicationPage x:Class="dynDataTemplateTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:loc="clr-namespace:dynDataTemplateTest.View"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait"
Orientation="Portrait"
mc:Ignorable="d"
d:DesignWidth="480"
d:DesignHeight="768"
shell:SystemTray.IsVisible="True"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<!--LayoutRoot contains the root grid where all other page content is placed-->
<Grid x:Name="LayoutRoot"
Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel"
Grid.Row="0"
Margin="24,24,0,12">
<TextBlock x:Name="ApplicationTitle"
Text="{Binding ApplicationTitle}"
Style="{StaticResource PhoneTextNormalStyle}" />
<TextBlock x:Name="PageTitle"
Text="{Binding PageName}"
Margin="-3,-8,0,0"
Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentGrid"
Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<loc:DynamicContentControl Content="{Binding SelectedItem}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
<controls:Pivot ItemsSource="{Binding Path=Items}" SelectedItem="{Binding Path=SelectedItem}" >
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=DisplayName}" FontSize="30" FontWeight="Bold" Margin="5"/>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center"></StackPanel>
</ItemsPanelTemplate>
</controls:Pivot.ItemsPanel>
</controls:Pivot>
</Grid>
</Grid>
Here is the DataTemplateSelector class
public static class DataTemplateSelector
{
public static DataTemplate GetTemplate(ViewModelBase param)
{
Type t = param.GetType();
return App.Current.Resources[t.Name] as DataTemplate;
}
}
Here is the dynamic Content control:
public class DynamicContentControl:ContentControl
{
protected override void OnContentChanged(object oldContent, object newContent)
{
base.OnContentChanged(oldContent, newContent);
this.ContentTemplate = mSator.Model.DataTemplateSelector.GetTemplate(newContent as ViewModelBase);
}
}
Here is the first view xaml:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<TextBlock Margin="20" Foreground="Green" FontSize="32"
FontWeight="Bold" Text="{Binding Path=FirstProperty}"
></TextBlock>
</Grid>
( the second view xaml can be the first view, just change the color )
Here is the FirstViewModel class (from the article)
public class FirstViewModel : SelectableViewModel
{
public FirstViewModel()
{
DisplayName = "First";
FirstProperty = "this is the first property";
}
private string firstProp;
public string FirstProperty
{
get { return firstProp; }
set
{
if (firstProp != value)
{
firstProp = value;
RaisePropertyChanged("FirstProperty");
}
}
}
}
Here is the SelectableView Model class
public class SelectableViewModel : ViewModelBase
{
public SelectableViewModel()
{
}
string dispName;
public string DisplayName
{
get { return dispName; }
set
{
if (dispName != value)
{
dispName = value;
RaisePropertyChanged("DisplayName");
}
}
}
}
Here is the main view model class:
public class MainViewModel : ViewModelBase
{
public string ApplicationTitle
{
get
{
return "Dynamic Data Templates";
}
}
public string PageName
{
get
{
return "Main page";
}
}
private List<SelectableViewModel> viewModels;
public MainViewModel()
{
viewModels = new List<SelectableViewModel>();
viewModels.Add(new FirstViewModel());
viewModels.Add(new SecondViewModel());
SelectedItem = viewModels[0];
}
public List<SelectableViewModel> Items
{
get
{
return viewModels;
}
}
SelectableViewModel selItem;
public SelectableViewModel SelectedItem
{
get { return selItem; }
set
{
if (selItem != value)
{
selItem = value;
RaisePropertyChanged("SelectedItem");
}
}
}
}
Thanks again for helping !

As you say you're still learning, let me explain why having n number of Pivot items is a bad idea:
You will likely run into performance issues due to the amount of content on a single page. With a list the items can be virtualized. The Pivot control does not support virtualization of dynamically added PivotItems.
It's hard for people to navigate to a desired item when there are lots of PivotItems as there isn't a way to quickly get to the one that is wanted. Say you had 30 items in the pivot but wanted to get to the 15th one. That would require a lot of swiping and if doing it quickly it would be easy to go past the one that was wanted.
The Pivot Control is intended to be used for one of two purposes:
To show different views of a set of data. i.e. The email app shows different views of a mailbox in each PivotItem, filtered for "all", "unread", "flagged" and "urgent".
To show different pieces of related data. i.e. When viewing an individual contact/person you see different related actions and information grouped into the different PivotItems: "profiles", "what's new", "photos" and "history".
It is not the intention that the Pivot control should be used as a container for vast quantities of content, such as n collections of template lists.
It is suggested that the maximum number of items in a pivot should be 7 to avoid issues with performance and usability.
All in all, not using the Pivot control in one of the ways it was intended can cause performance issues for you as a developer and usability issues for the people using the app.
Both of which are scenarios to be avoided.
Sorry this isn't a direct answer to your question but hopefully it will help you develop a better app (or apps). ;)

Control created in Custom Layout Control returns Null

I am trying to create my own custom layout control, so I created a UserControl like the following:
public partial class KTopContentBottomLayout : UserControl
{
Orientation _Orientation = Orientation.Vertical;
public Orientation Orientation { get { return this._Orientation; } set { this._Orientation = value; } }
public UIElementCollection Children
{
get
{
return this.LayoutRoot.Children;
}
}
public KTopContentBottomLayout()
{
InitializeComponent();
CreateProperLayout();
}
//Some other code that creates the layouts
}
Then in my MainPage.xaml that uses this control:
<Grid x:Name="LayoutRoot" Background="White">
<local:KTopContentBottomLayout Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<local:KTopContentBottomLayout.Children>
<StackPanel>
<c1:C1RichTextBoxToolbar RichTextBox="{Binding ElementName=MyRichTextBox}"/>
</StackPanel>
<c1:C1RichTextBox x:Name="MyRichTextBox" ReturnMode="HardLineBreak" />
</local:KTopContentBottomLayout.Children>
</local:KTopContentBottomLayout>
</Grid>
So far everything compile fine and display properly.
But when I try to use the control in Loaded event:
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
this.MyRichTextBox.GotFocus += MyRichTextBox_GotFocus;
this.MyRichTextBox.LostFocus += MyRichTextBox_LostFocus;
}
The MyRichTextBox object is returns null...
I tried to place the control out of my custom layout control and is working fine. So what did I done wrong?
EDIT:
I notice if I access the MyRichTextBox through the KTopContentBottomLayout, I could access the MyRichTextBox properly.
i.e Create a property/Access by using Children.First() etc.
But I don't understand why if I access in MainPage.xaml directly to the MyRichTextBox will give me null.
If I replace KTopContentBottomLayout as Grid/StackPanel, they can access MyRichTextBox directly, but what is the reason?

Try putting MyRichTextBox inside some sort of Panel (StackPanel, Grid, etc).
Edit: Actually, why isn't it in the StackPanel to begin with? If you want some hierarchy, do an outer StackPanel with a nested StackPanel for the toolbar.
Another Edit: I can't copy it into a project right now to try it, but is the line: this.LayoutRoot.Children returning what you think it does?