RadSideDrawer - Issue with repainting when resizing window on UWP target

[Paresh]

This is for UWP.

I have a SideDrawer and inside main content of side drawer I have a list view which I am binding from code behind. Now when I launch application, it renders fine, each row of list if occupying full width. Now when I maximize application, each row is now not resizing to full width. Again when I restore window size back to original, sometime it restores back to original state and sometime last column is not visible.

If I remove RadSideDrawer from xaml, its able to resize the elements well on maximize and restore.

I have created a sample application for this behavior and below is the xaml and codebehind file.

https://github.com/pbijvani/test/blob/master/MainPage.xaml

https://github.com/pbijvani/test/blob/master/MainPage.xaml.cs

 

attaching screenshot to show behavior.

https://github.com/pbijvani/test/blob/master/first_launch.PNG

https://github.com/pbijvani/test/blob/master/maximize.PNG

https://github.com/pbijvani/test/blob/master/restore_back.PNG

 

Appreciate any help on this.

[Lance | Senior Manager Technical Support]

Hello Paresh,

Thank you for sharing links to the code. I see an immediate problem with using a StackLayout as the page's root element. You should never use a control that leverages UI virtualization inside a StackLayout.

Remove the StackLayout so that the RadSideDrawer is the root element. For example:

<ContentPage ...>

<!-- The RadSideDrawer is the root View on the page -->
    <telerikPrimitives:RadSideDrawer>
        ...
    </telerikPrimitives:RadSideDrawer>
</ContentPage>

Note: If you must have a parent element (i.e. if you plan to add other controls on top of the SideDrawer), use a Grid instead of a StackLayout.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Paresh]

Thanks for reply. I just tried as you suggested. Removed stacklayout and set the RadSideDrawer as root element. But no change in behavior. Still getting same issue on window maximize/restore on UWP.

 

see  my updated xaml code in below link.

https://github.com/pbijvani/test/blob/master/MainPage.xaml

[Lance | Senior Manager Technical Support]

Hello Paresh,

I've tested the code and am not seeing a problem with the SideDrawer.

Test 1
To explain this better, let's remove the ListView and run the app again.

Result
The background color of the Grid is gray, no matter the state of the Window. This means the the SideDrawer's MainContent is properly filling the Page's bounds.


Test 2
As a second test, to isolate that the problem is with the ItemTemplate, give the ListView a different background color and add it back to the Grid:

<ListView x:Name="listView" BackgroundColor="Goldenrod"  Grid.Row="0">

Result
You will now see that the ListView indeed fills the screen and the SideDrawr.MainContent is still working as expected because the yellow fills the window.


Summary

The issue appears to be with the ItemTemplate of the ListView, or with the ListView itself. I would investigate that next to see how you can improve the layout, maybe switch to a Grid with ColumnDefinitions instead of a horizontal StackLayout.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Paresh]

Thanks for your reply.

I understood point you are trying to make. In any case listview is surely occupying full width. So issue seems to be with ItemTemplate of the ListView.

But then, why removing RadSideDrawer from page makes a same ItemTemplate work well with resize? Let me know if you have any more findings.

 

Thanks

 

[Lance | Senior Manager Technical Support]

Hello Paresh,

I'm not sure what's happening here. I would normally suspect a problem between the SideDrawer and it's children, but in this case the first child has a gray background that always fills the page, and the lowest child is the ListView, in which it's yellow background always fills the page.

I'm not able to reliably replicate the behavior enough to test it (it got only once for me), but I suspect it's with Xamarin.Forms UWP (the UWP ListView) and the native layout panel not causing a remeasure pass in the parent.

You could create a custom renderer for the native ListView and put a few breakpoints in the OnSizeChanged override, then see if calling InvalidateArrage or InvalidateMeasure helps:

[assembly: Xamarin.Forms.Platform.UWP.ExportRenderer(typeof(Xamarin.Forms.ListView), typeof(CustomListViewRenderer))]
namespace YourApplication.UWP
{
    public class CustomListViewRenderer : Xamarin.Forms.Platform.UWP.ListViewRenderer
    {
        protected override void OnElementChanged(Xamarin.Forms.Platform.UWP.ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var nativeUwpListView =  Control as Windows.UI.Xaml.Controls.ListView;
                nativeUwpListView.SizeChanged += NativeUwpListView_SizeChanged;            }
        }

        private void NativeUwpListView_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            var nativeUwpListView = sender as Windows.UI.Xaml.Controls.ListView;

            nativeUwpListView.InvalidateArrange();
            Debug.WriteLine("InvalidateArrange Called");
        }
    }
}

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Daniel]

Hello Paresh, Hello Lance,

i think i have quite a similar issue here. We are also using the RadSideDrawer but without the list view. I created a sample page that has just a button in a stack layout. I am observing the same behavior as Paresh:

After launch the app renders fine. Now when I enter full screen mode and then restore window size back to its original size, the right part of the button is not visible anymore. I can also reproduce the behavior by decreasing the window width very fast.

I put a sample repo here: https://github.com/DanielGramsJTL/TelerikRadSideDrawer/blob/master/TelerikXamarinApp2/Portable/MainPage.xaml

 

Best regards,

Daniel

[Lance | Senior Manager Technical Support]

Hi Daniel,

Thank you providing the code example. First, I don't recommend using a StackLayout as the root element, even set to FillAndExpand. The AndExpand flag is unreliable and behaves differently on different platforms. I switched the code to use a Grid instead, and it's working as expected.

Here's the code, I made the following changes:

- Removed the AndExpand flag for the SideDrawer (The default Options for SideDrawer is Fill)
- Replaced StackLayout with Grid and removed AndExpand flag (the default Options for Grid is Fill)

<ContentPage ...>

    <telerikPrimitives:RadSideDrawer DrawerLength="400"
                                     AreGesturesEnabled="false"
                                     DrawerLocation="Bottom"
                                     DrawerTransitionType="SlideInOnTop"
                                     DrawerTransitionDuration="0.2"
                                     IsOpen="False">
        <telerikPrimitives:RadSideDrawer.DrawerContent>
            <StackLayout VerticalOptions="FillAndExpand"
                         BackgroundColor="GreenYellow">
                <Label Text="DrawerContent"
                       VerticalOptions="FillAndExpand"></Label>
            </StackLayout>
        </telerikPrimitives:RadSideDrawer.DrawerContent>
        <telerikPrimitives:RadSideDrawer.MainContent>
            <Grid BackgroundColor="LightBlue"
                  Margin="0"
                  Padding="10">
                <Button Text="Telerik"
                        FontSize="Large"
                        BackgroundColor="Orange"
                        HorizontalOptions="FillAndExpand" />
            </Grid>
        </telerikPrimitives:RadSideDrawer.MainContent>
    </telerikPrimitives:RadSideDrawer>
</ContentPage>

Note:

- Project uses the recommend version of Xamarin.Forms for U for Xamarin (3.1.0.697729)
- UWP targets 17763

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DrawerDismissTest.Portable"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             x:Class="DrawerDismissTest.Portable.MainPage">

    <telerikPrimitives:RadSideDrawer DrawerLength="400"
                                     AreGesturesEnabled="false"
                                     DrawerLocation="Bottom"
                                     DrawerTransitionType="SlideInOnTop"
                                     DrawerTransitionDuration="0.2"
                                     IsOpen="False">
        <telerikPrimitives:RadSideDrawer.DrawerContent>
            <StackLayout VerticalOptions="FillAndExpand"
                         BackgroundColor="GreenYellow">
                <Label Text="DrawerContent"
                       VerticalOptions="FillAndExpand"></Label>
            </StackLayout>
        </telerikPrimitives:RadSideDrawer.DrawerContent>
        <telerikPrimitives:RadSideDrawer.MainContent>
            <Grid BackgroundColor="LightBlue"
                  Margin="0"
                  Padding="10">
                <Button Text="Telerik"
                        FontSize="Large"
                        BackgroundColor="Orange"
                        HorizontalOptions="FillAndExpand" />
            </Grid>
        </telerikPrimitives:RadSideDrawer.MainContent>
    </telerikPrimitives:RadSideDrawer>
</ContentPage>



This works well for me, let me know how it goes.Note that I'm using XF 3.1.0.697729 (the recommended version for UI for Xamarin) and tARGET uwp 17134

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Daniel]

Hi Lance,

many thanks for your reply. I copied your xml layout but the behavior did not change for me. I am using the recommended XF version 3.1.0.69772 with UWP Build 17134.

I also recorded a short screencast to show my results: https://drive.google.com/file/d/1-tV8e_WPaX_29G9QdyRBar23Wku-hQvo/view?usp=sharing - my mouse interactions seem a bit unusual but its the safest way to reproduce the behavior :-) The same happens in other situations like resizing or rotating the app.

Best regards,

Daniel

[Lance | Senior Manager Technical Support]

Hello Daniel,

Thanks for the video, it went a long way towards helping describe (and reproduce) the issue. I initially misinterpreted the problem and was looking for issues resizing from smaller to larger, not larger to smaller.

I had a conversation with the developers and this might be due to the renderer for the native UWP control. I've logged this as an official bug report. Since I created the bug report using your account, you are automatically subscribed.

@Paresh,
If you would also like to subscribe the bug report to be notified of changed, please visit the following link and click the  "Follow" button: SideDrawer [UWP]: MainContent is not resized when Windows is Maximized and Restored.

Thank you both for taking the time to help us understand and recreate the problem. As a small token of appreciation, I've updated both of your account's Telerik Points.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Lance | Senior Manager Technical Support]

Hello Daniel,

Thanks for the video, it went a long way towards helping describe (and reproduce) the issue. I initially misinterpreted the problem and was looking for issues resizing from smaller to larger, not larger to smaller.

I had a conversation with the developers and this might be due to the renderer for the native UWP control. I've logged this as an official bug report. Since I created the bug report using your account, you are automatically subscribed.

@Paresh,
If you would also like to subscribe the bug report to be notified of changed, please visit the following link and click the  "Follow" button: SideDrawer [UWP]: MainContent is not resized when Windows is Maximized and Restored.

Thank you both for taking the time to help us understand and recreate the problem. As a small token of appreciation, I've updated both of your account's Telerik Points.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Daniel]

Thank you, Lance! :-)