How To Change DockLayout Content Dynamically

1 Answer 170 Views
DockLayout
Daniel
Top achievements
Rank 1
Silver
Bronze
Daniel asked on 02 Mar 2022, 12:20 PM | edited on 02 Mar 2022, 12:22 PM

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
Top achievements
Rank 1
Silver
Bronze
commented on 02 Mar 2022, 12:30 PM

The tile change the content dynamically

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 03 Mar 2022, 09:16 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
DockLayout
Asked by
Daniel
Top achievements
Rank 1
Silver
Bronze
Answers by
Yana
Telerik team
Share this question
or