[Solved] SideDrawer doesn't show on the phone device, but works well in Emulator

[Naweed Akram]

Hi,

 

I am facing a strange problem. I have the below code on the Main page of my WP8.1 Universal Application, which shows a RadSideDrawer on the page. The drawer content has some menu options, and main content has the page specific data. the problem is that this page works fine when tested in emulator. But, when I deploy to the WP 8.1 device (Lumia 930 running Demin update), the main page comes up as blank. Any idea what is happening. If I remove the RadSideDrawer from this page and replace it with some other content, it shows perfectly fine on the device. 

 

Appreciate the quick help.

 

Thanks & Regards

Naweed

 

<controls:PageBase
    x:Class="XGENO.Books.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:XGENO.Books.Views"
    xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"
    xmlns:controls="using:XGENO.Books.Infrastructure"
    xmlns:prism="using:Microsoft.Practices.Prism.Mvvm"
    prism:ViewModelLocator.AutoWireViewModel="True"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <Grid.Background>
            <ImageBrush ImageSource="/Assets/PageBackground.jpg" Stretch="Fill" />
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <Rectangle Fill="#325E3A" />

        <telerikPrimitives:RadSideDrawer
                x:Name="sideDrawer"
                TouchTargetThreshold="100"
                DrawerManipulationMode="Both"
                DrawerButtonStyle="{StaticResource DrawerButtonStyle}"
                DrawerButtonVerticalAlignment="Top"
                DrawerTransition="Reveal"
                Grid.Row="1">
            <telerikPrimitives:RadSideDrawer.MainContent>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="40" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <Rectangle Fill="#325E3A" />
                    <TextBlock Text="{Binding Title}" VerticalAlignment="Bottom" Margin="40 0 0 0" Foreground="#ffffff" FontSize="30" FontWeight="SemiBold"  />

                    <Button Content="Start Reading" Command="{Binding StartReadingCommand}" Style="{StaticResource SideMenuButtonStyle}" Grid.Row="1" />
                </Grid>
            </telerikPrimitives:RadSideDrawer.MainContent>

            <telerikPrimitives:RadSideDrawer.DrawerContent>
                <Border Background="#325E3A" Width="260">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <StackPanel Grid.Row="1" Orientation="Vertical">

                            <StackPanel Orientation="Horizontal" Margin="10,0,0,0" VerticalAlignment="Center">
                                <Image Source="/Assets/Icons/About.png" Height="20" Width="20" Margin="10,0,0,0" />
                                <Button Content="About" Command="{Binding AboutCommand}" Style="{StaticResource SideMenuButtonStyle}" />
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" Margin="10,0,0,0" VerticalAlignment="Center">
                                <Image Source="/Assets/Icons/PrivacyPolicy.png" Height="20" Width="20" Margin="10,0,0,0" />
                                <Button Content="Privacy Policy" Command="{Binding PrivacyPolicyCommand}" Style="{StaticResource SideMenuButtonStyle}" />
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" Margin="10,10,0,0" VerticalAlignment="Center">
                                <Image Source="/Assets/Icons/Settings.png" Height="20" Width="20" Margin="10,0,0,0" />
                                <Button Content="SETTINGS" Command="{Binding SettingsCommand}"  FontWeight="Bold" Style="{StaticResource SideMenuButtonStyle}" />
                            </StackPanel>


                            <Line X1="280" Y1="0"  Margin="10,10,10,20"  StrokeThickness="1" Stroke="White" Opacity="0.7"></Line>

                            <StackPanel Orientation="Horizontal" Margin="10,0,0,0" VerticalAlignment="Center">
                                <Image Source="/Assets/Icons/Feedback.png" Height="20" Width="20" Margin="10,0,0,0" />
                                <Button Content="Feedback" Command="{Binding FeedbackCommand}" Style="{StaticResource SideMenuButtonStyle}" />
                            </StackPanel>

                            <StackPanel Orientation="Horizontal" Margin="10,0,0,0" VerticalAlignment="Center">
                                <Image Source="/Assets/Icons/RateReview.png" Height="20" Width="20" Margin="10,0,0,0" />
                                <Button Content="Rate and Review" Command="{Binding RateReviewCommand}" Style="{StaticResource SideMenuButtonStyle}" />
                            </StackPanel>
                        </StackPanel>

                    </Grid>
                </Border>
            </telerikPrimitives:RadSideDrawer.DrawerContent>
        </telerikPrimitives:RadSideDrawer>
    </Grid>
</controls:PageBase>

[Naweed Akram]

Well, I found another issue. When I deploy the app to my device in DEBUG mode, it works fine and the Side Drawer shows up. But it doesn't display when deployed in RELEASE mode to the device.

 

Any idea?

 

[Ivaylo Gergov]

Hi,

Thank you for contacting us.

I was able to reproduce the issue. It seems that it is present on the specific device Lumia 930 only. I will further investigate what is the problem and I will get back to you as soon as possible.

Regards,
Ivaylo Gergov
Telerik

 

 

[Naweed Akram]

Hi,

 

Does this problem only happen while testing on developer unlocked 930, or does this problem also exist when the published app is installed from Store?

 

Regard

Naweed

[Oleg]

Hi! I have same problem on my Lumia 1520 (denim update), only on Release build configuration.

[Ivaylo Gergov]

Hello guys,

I was able to track the issue and it will be fixed for Q2 2015 release. Until then, I can suggest a simple workaround to invalidate the measurement state for the RadSideDrawer when it is loaded. For example:

private void RadSideDrawer_Loaded(object sender, RoutedEventArgs e)
{
    (sender as RadSideDrawer).InvalidateMeasure();
}

Please, let me know if this helps.

Regards,
Ivaylo Gergov
Telerik

 

 

[Oleg]

Hello, yes, it's works! Thanks for fast reply!

 

Regards,

Oleg

[Naweed Akram]

Hi,

 

It partly solved my problem. It now does show up in Release configuration, but the new problem is that the drawer opens in a wrong location or with wrong shape.  Plz see screenshots of how it looks like in both Debug and Release mode. And this is the XAML:

 

<telerikPrimitives:RadSideDrawer x:Name="sideDrawer" TouchTargetThreshold="100"  DrawerManipulationMode="Both" DrawerButtonStyle="{StaticResource DrawerButtonStyle}" DrawerButtonVerticalAlignment="Bottom" DrawerButtonHorizontalAlignment="Center" DrawerLocation="Bottom" DrawerTransition="ScaleDownPusher" Loaded="sideDrawer_Loaded">

 

Please advise that will this app work fine when deployed through App Store, or will this problem persist. I hope it should be something to do with deployment configurations while testing only.

Regards

Naweed

[Naweed Akram]

I am giving up on Telerik SideDrawer control. It is full of bugs. Apart from the one mentioned above (which is still unresolved), there is another serious bug which I found. In my app (screen shots above), I have buttons with bound commands to view model which uses Prism's NavigationService to navigate between pages. In the emulator, everything works perfectly fine (100%). However when deployed to device, 99% of the time, the application crashes and exits when clicking on any button which is supposed to navigate to another page.

 

Hope telerik can fix these bugs sooner than later. I had big plans of using Telerik Universal controls in my upcoming WP and WinRT apps. I suppose I will have to stick to the built-in controls for now.

[Scott]

Thanks so much for this fix, totally handled it when in release mode! It was driving me CRAZY!

For the record, I LOVE RadSideDrawer! :)

[Ivaylo Gergov]

Hello guys,

@Scott : I'm glad everything works fine for you. We appreciate your kind words.

@Naweed: We admit that currently there are some problems in release mode which are probably caused by the denim upgrade. While we are currently investigating the reason for these problems we would highly appreciate if you send us some sample project which reproduces the issues. I am sorry for any inconvenience caused. Also, we cannot say if these problems will still occur in production. Currently, we have the Telerik Controls Examples app in the Store which seems to be working fine.

Regards,
Ivaylo Gergov
Telerik