Using SideDrawer

1 Answer 209 Views
SideDrawer
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Rolf asked on 08 Dec 2022, 07:55 PM

In the example of the SideDrawer in the SDK, the page is integrated into a RadContentView. Is that necessary?
When using a ContentPage, the display of the MainContent is somewhat truncated.

What is the function of RadContentView? It is not a control and is therefore not found in the documentation.

Is there also a RadContentPage?

1 Answer, 1 is accepted

Sort by
0
Didi
Telerik team
answered on 09 Dec 2022, 07:13 AM

Hello Rolf,

RadContentView is a view we use for internal usage. It is not officially released. If you use the Go To Definition (F12), will notice that the RadContentView inherits from ContentView.  

You can add a RadSideDrawer inside ContentView, ContentPage, based on the scenario you have. 

Regards,
Didi
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.

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 09 Dec 2022, 01:15 PM

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?

Didi
Telerik team
commented on 13 Dec 2022, 07:54 AM

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. 

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 13 Dec 2022, 02:28 PM

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.

 

Didi
Telerik team
commented on 16 Dec 2022, 10:21 AM

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>
and the result on Android Emulator: 

 

Rolf
Top achievements
Rank 1
Iron
Iron
Iron
commented on 16 Dec 2022, 07:46 PM

Hi Didi,

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

 

Tags
SideDrawer
Asked by
Rolf
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Didi
Telerik team
Share this question
or