Using SideDrawer

If SideDrawer usage is independent of RadContentView, then
I want to contrast the following two definitions of FirstLookView.xaml from SideDrawer
to describe my problem:

Case 1:
- Add a BackgroundColor (e.g. Yellow) to the first grid definition in the MainContent to illustrate this.
- Comment out the entire RadListView in the MainContent.

Result: The grid (yellow color) does not spread over the entire width of the screen.

Case 2:
The content of RadViewContent only contains the following XAML code (without SideDrawer):

 <Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="*" BackgroundColor="yellow" HorizontalOptions="FillAndExpand">
                    <HorizontalStackLayout Grid.Row="0" Grid.Column="0"  Spacing="10" Margin="0,0,0,20" HorizontalOptions="FillAndExpand">
                        <Image Source="sidedrawer.png"
                               WidthRequest="40"
                               HeightRequest="40">
                        </Image>
                        <Label Text="List of Controls2"
                               VerticalTextAlignment="Center"
                               FontSize="20"
                               VerticalOptions="Center"/>
                    </HorizontalStackLayout>
                    <Grid Grid.Row="1">
  </Grid>
                    <telerik:RadButton Text="Navigate to Product Page"
                                       Grid.Row="2"
                                       Margin="50, 20"
                                       VerticalOptions="{OnIdiom Default=Center, Phone=End}"
                                       HorizontalOptions="{OnIdiom Default=Start, Phone=FillAndExpand}"
                                       Command="{Binding NavigateToProductPageCommand}"
                                       Style="{StaticResource SubmitButtonStyle}"/>
                </Grid>

Result: The grid (yellow color) spreads over the entire width of the screen.

My goal is that the grid in the MainContent extends over the entire width of the screen even when using the SideDrawer.
What should I do?

The SideDrawer FirstLook example is wrapped in a RadContentView with Margin of 5px.

I have tested case 1 and 2 and cannot reproduce the described scenario on WinUI. With and without SideDrawer the container is with the same width. Could you please share on which platform the described behavior occurs? 

I suggest you create a sample .NET MAUI app and test the cases there. The Telerik Controls Samples is designed and implemented to cover the specific look for mobile/desktop. 

If you reproduce the behavior in a sample app, you can attach it to this ticket. If you do not want to share the project in the forum, you can open a support ticket and attach it there. 

Hi Didi,

It's true under Windows, behavior is ok. I have the problem in Android emulation.
Adding ColumnDefinitions="*" to the grid tag didn't change anything either.

Generally speaking, my goal in MainContent is to define a grid (without absolute
values and independent of its content) that covers the entire width of the screen.

Hi Rolf, 

The SideDrawer control has 2 views - MainContent and DrawerContent. Each view inherits from a ContentView. 
Here is the code you can use to have the main content that covers the entire width of the screen. 

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <HorizontalStackLayout Spacing="10">
        <ImageButton WidthRequest="{OnPlatform Default='25', WinUI='32'}" 
                        HeightRequest="{OnPlatform Default='25', WinUI='32'}" 
                        BorderWidth="0" 
                        BorderColor="Transparent" 
                        BackgroundColor="Transparent" 
                        Source="hamburgermenu.png"
                        Clicked="ImageButton_Clicked"
                        AutomationId="openAndCloseButton">
        </ImageButton>
        <Label VerticalOptions="Center"
                Text="SideDrawer" />
    </HorizontalStackLayout>
    <Grid Grid.Row="1">
        <telerik:RadSideDrawer x:Name="drawer" 
                                DrawerLength="200">
            <telerik:RadSideDrawer.MainContent>
                <Grid BackgroundColor="LightBlue" RowDefinitions="*">
                    <Label Text="Main content" />
                </Grid>
            </telerik:RadSideDrawer.MainContent>
            <telerik:RadSideDrawer.DrawerContent>
                <VerticalStackLayout Spacing="10"
                                    BackgroundColor="Red"
                                        Padding="10, 10, 0, 0">
                    <Button Text="Mail" />
                    <Button Text="Calendar" />
                    <Button Text="People" />
                    <Button Text="Tasks" />
                </VerticalStackLayout>
            </telerik:RadSideDrawer.DrawerContent>
        </telerik:RadSideDrawer>
    </Grid>
</Grid>

Hi Didi,

I opened a ticket at number 1591073, because the problem still exists.