How To Change DockLayout Content Dynamically

[Daniel]

Hi,

I used the Docklayout.
On the navigation i have two buttons.
On the content I want to switch for two content views.
I used this code without success.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MAUI.MainPage"
             xmlns:telerik="clr-namespace:Telerik.Maui.Controls;assembly=Telerik.Maui.Controls"
             BackgroundColor="White">
    <telerik:RadDockLayout x:Name="dockLayout">
        <Grid HeightRequest="60"
          telerik:RadDockLayout.Dock="Top">
            <Label  Text="Header" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="Medium"/>
        </Grid>
        <Grid 
        telerik:RadDockLayout.Dock="Bottom">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Label  Text="CopyRight" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand" FontSize="Caption"/>
        </Grid>
        <Grid 
        telerik:RadDockLayout.Dock="Left">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <telerik:RadButton Grid.Row="0" Grid.Column ="0" Text="Button 1" HorizontalOptions="Start" VerticalOptions="Center" Clicked="OnButton1Clicked"/>
            <telerik:RadButton Grid.Row="1" Grid.Column ="0" Text="Button 2" HorizontalOptions="Start" VerticalOptions="Center" Clicked="OnButton2Clicked"/>
        </Grid>
        
        <Grid >
            <ContentView  x:Name="cuurentContentView"/>
        </Grid>
    </telerik:RadDockLayout>
</ContentPage>

public partial class MainPage : ContentPage
{
	public MainPage()
	{
			InitializeComponent();
	}

    private void OnButton1Clicked(object sender, EventArgs e)
    {
		cuurentContentView = new DashboardView();
    }

    private void OnButton2Clicked(object sender, EventArgs e)
    {
        cuurentContentView = new RoutesView();
    }
}

[Daniel]

The tile change the content dynamically

[Yana]

Hi Daniel,

Thank you for sending the snippet.

First, the way the layout is currently defined does not leave space for the Grid with the dynamically updated content - the grid with the buttons which is docked on the left takes all the available space. You can easily check this by setting BackgroundColor to all the docked elements.

To resolve it, you can apply WidthRequest to the Grid with the buttons:

<Grid  telerik:RadDockLayout.Dock="Left"  WidthRequest="100">
...

In addition, you'd rather need to update the Children of the Grid by adding a new ContentView:

 

<Grid x:Name="currentContentViewHolder">
    <Label Text="test label" />
</Grid>

 

And the buttons' event handlers:

 

private void OnButton1Clicked(object sender, EventArgs e)
{
    currentContentViewHolder.Children.Clear();
    currentContentViewHolder.Children.Add(new DashboardView());
}

private void OnButton2Clicked(object sender, EventArgs e)
{
    currentContentViewHolder.Children.Clear();
    currentContentViewHolder.Children.Add(new RoutesView());
}

I've attached my sample app for a reference.  I hope I was of help.

Regards,
Yana
Progress Telerik