Rank 1
Silver
Bronze
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();
}
}
Rank 1
Silver
Bronze
1 Answer, 1 is accepted
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.