SideDrawer + Device timer = a mess

12 posts, 0 answers
  1. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 21 Feb Link to this post

    I'm attempting to have a timer update a Label that happens to be in the MainContent of a RadSideDrawer.

    The label looks like:

                        <StackLayout Grid.Row="0">
                            <Label x:Name="AgeLabel"/>
                        </StackLayout>

    And the timer looks like:

                Device.StartTimer(new TimeSpan(0, 0, 1), () =>
                {
                    AgeLabel.Text = DateTime.Now.ToLocalTime().ToString();
                    return true;
                });

    The problem is when the timer expires, the label gets updated okay, but a RadListView on the page at Grid.Row="1" gets messed up. It suddenly changes from full width of the screen to about 1/3 width of the screen. If you tap the screen it will then correct the display, but obviously you can't expect the user to keep tapping the screen.

    I have trying using bindings with INotifyPropertyChanged and stuff, but that does not help, when the property updates, the list display gets messed up. I have also tried Device.BeginInvokeOnMainThread to make sure the right thread is updating the screen, also does not help.

    Is it possible for a timer to update the MainContent of a SideDrawer? Is this a known issue?

     

     

     

     

  2. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 21 Feb in reply to Gerry Link to this post

    Actually, it seems any update to AgeLabel.Text causes the list (below the label) to have it's display messed up. Weird, any insights out there?
  3. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    691 posts

    Posted 24 Feb Link to this post

    Hello,

    Currently we do not have any known issue similar to this. Could you please send me a sample app which reproduces the issue so I can further investigate it?

    I am looking forward to your reply.

    Regards,
    Ivaylo Gergov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 24 Feb in reply to Ivaylo Gergov Link to this post

    thanks for getting back to me - I'm going to have a look at my async/await code and make sure it isn't interferring
  5. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 24 Feb Link to this post

    yeah it's working okay now, was an unrelated async/await issue
  6. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 24 Feb in reply to Gerry Link to this post

    I take it back - my async stuff is solid now, but updating the page from a timer is still messing up the list display.
  7. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 24 Feb Link to this post

    Unfortunately it is work-stuff so I can't post it. Maybe I will try it out using some sample Telerik code somewhere
  8. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 24 Feb in reply to Gerry Link to this post

    I merged the Telerik examples "Location", which is very simple RadSideDrawer example with "Songs" data from the songs example (because otherwise the Location example is too simple to show the problem)

     

     

    <?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:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
                 xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls" 
                 xmlns:telerikListView="clr-namespace:Telerik.XamarinForms.DataControls.ListView;assembly=Telerik.XamarinForms.DataControls"
                 x:Class="Portable.Location">
        <ContentPage.Resources>
            <ResourceDictionary>
                <Style TargetType="Button" x:Key="ButtonStyle">
                    <Style.Setters>
                        <Setter Property="WidthRequest" Value="50"/>
                        <Setter Property="BorderRadius" Value="0"/>
                        <Setter Property="BackgroundColor" Value="Transparent"/>
                        <Setter Property="VerticalOptions" Value="Fill"/>
                        <Setter Property="HorizontalOptions" Value="Fill"/>
                    </Style.Setters>
                </Style>
                <Color x:Key="BackgroundColor">#FFEBC0</Color>
                <Color x:Key="SelectedBackgroundColor">#FFF7E6</Color>

            </ResourceDictionary>
        </ContentPage.Resources>
        
      <ContentPage.ToolbarItems>
        <ToolbarItem Activated="OnToolbarButtonClick" Order="Primary" Priority="0" Text="Menu">
          <ToolbarItem.Icon>
            <OnPlatform x:TypeArguments="FileImageSource"
                            iOS="hamburgerButtonIcon.png"
                            Android="hamburgerButtonIcon.png"
                            WinPhone="Assets/hamburgerButtonIcon.png" />
          </ToolbarItem.Icon>
        </ToolbarItem>
      </ContentPage.ToolbarItems>
      <Grid>
        <telerikPrimitives:RadSideDrawer x:Name="drawer" DrawerLength="250">
          <telerikPrimitives:RadSideDrawer.MainContent>
            <Grid BackgroundColor="Gray">
              <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
              </Grid.RowDefinitions>
               <Label Grid.Row="0" Text="Gerry was here first" x:Name="foobar"/>


                <telerikDataControls:RadListView x:Name="listview"
                                                 IsItemSwipeEnabled="False"
                                                 IsPullToRefreshEnabled="True"
                                                 SelectionMode="Single"
                                                 SwipeOffset="50,0,50,0"
                                                 BackgroundColor="#463003"
                                                 Grid.Row="1"
                                           >
                    <telerikDataControls:RadListView.SelectedItemStyle>
                        <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource SelectedBackgroundColor}"
                                                           BorderLocation="Bottom" BorderColor="#A0967D" BorderWidth="2"/>
                    </telerikDataControls:RadListView.SelectedItemStyle>
                    <telerikDataControls:RadListView.ItemStyle>
                        <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource BackgroundColor}"
                                                           BorderLocation="Bottom" BorderColor="#A0967D" BorderWidth="2"/>
                    </telerikDataControls:RadListView.ItemStyle>
                    <telerikDataControls:RadListView.PressedItemStyle>
                        <telerikListView:ListViewItemStyle BackgroundColor="{StaticResource BackgroundColor}"
                                                           BorderLocation="Bottom" BorderColor="#A0967D" BorderWidth="2"/>
                    </telerikDataControls:RadListView.PressedItemStyle>

                    <telerikDataControls:RadListView.LayoutDefinition>
                        <telerikListView:ListViewLinearLayout ItemLength="100" />
                    </telerikDataControls:RadListView.LayoutDefinition>

                    <telerikDataControls:RadListView.ItemTemplate>
                        <DataTemplate>
                            <telerikListView:ListViewTemplateCell>
                                <telerikListView:ListViewTemplateCell.View>
                                    <Grid Padding="10">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="90"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Image Source="{Binding AlbumArt}"/>
                                        <StackLayout Padding="10,0,0,0" Grid.Column="1">
                                            <Label Text="{Binding Title}" TextColor="#694A00" LineBreakMode="TailTruncation" FontSize="Large"/>
                                        </StackLayout>
                                    </Grid>
                                </telerikListView:ListViewTemplateCell.View>
                            </telerikListView:ListViewTemplateCell>
                        </DataTemplate>
                    </telerikDataControls:RadListView.ItemTemplate>

                </telerikDataControls:RadListView>
                
            </Grid>
          </telerikPrimitives:RadSideDrawer.MainContent>

          <telerikPrimitives:RadSideDrawer.DrawerContent>

              <StackLayout>
                  <Label Text="Foo"/>
                  <Label Text="Bar"/>
              <ListView x:Name="drawerList" />
              </StackLayout>

          </telerikPrimitives:RadSideDrawer.DrawerContent>
        </telerikPrimitives:RadSideDrawer>
      </Grid>
    </ContentPage>

     

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Telerik.XamarinForms.DataControls.ListView;
    using Telerik.XamarinForms.Primitives;
    using Telerik.XamarinForms.Primitives.SideDrawer;
    using Xamarin.Forms;

    namespace Portable
    {
        public partial class Location : ContentPage
        {
            private int count = 10;

            private ViewModel viewModel = new ViewModel();

            public Location()
            {
                InitializeComponent();
                this.Title = "Event Dashboard";

                this.drawerList.ItemsSource = new List<string>() { "Inbox", "Drafts", "Sent Items", "hello" };
                var list = Enum.GetValues(typeof(SideDrawerLocation)).OfType<SideDrawerLocation>().ToList();

                // new
                // listview.ItemsSource = Enumerable.Range(0, this.count);
                listview.ItemsSource = viewModel.Songs;
                foobar.Text = "dude";
                StartAgeTimer();
            }

            void StartAgeTimer()
            {
                TimeSpan ts = new TimeSpan(0, 0, 1);
                Device.StartTimer(ts, () =>
                {
                    foobar.Text = "blah " + DateTimeOffset.Now.ToLocalTime().ToString();
                    return true;
                });
            }

            void OnToolbarButtonClick(object sender, EventArgs e)
            {
                drawer.IsOpen = !drawer.IsOpen;
            }

            private async void RefreshRequested(object sender, PullToRefreshRequestedEventArgs e)
            {
                await Task.Delay(2000);
                listview.ItemsSource = Enumerable.Range(this.count, 10);
                this.count += 10;
                listview.EndRefresh();
            }
        }
    }

     

    And the timer messes up the display.

  9. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    691 posts

    Posted 01 Mar Link to this post

    Hi Gerry,

    Well, I tried to use the code below to reproduce the issue but with no result. Please, create some sample application so that I can further investigate the problem.

    I am looking forward to your reply.

    Regards,
    Ivaylo Gergov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 03 Mar in reply to Ivaylo Gergov Link to this post

    I tried updating my code to inherit from NotifyPropertyChangedBase and call base.OnPropertyChanged("LastUpdateTime"); in the property setter, the list display below the property still gets messed up.

    I cannot provide my code as it is proprietary and there is too much of it.

    Can you provide your code that does not reproduce the result? Note that the Telerik example "Location" will not show the problem as it is too simple, the list display must be more than one simple text label. Use the "Songs" list example.

  11. Gerry
    Gerry avatar
    25 posts
    Member since:
    Jan 2017

    Posted 03 Mar Link to this post

    Also, it must be a Drawer, and it must be a (complex) List.
  12. Ivaylo Gergov
    Admin
    Ivaylo Gergov avatar
    691 posts

    Posted 08 Mar Link to this post

    Hi Gerry,

    Thank you for the provided information.

    I have logged this as a bug and it will be further investigated. I have updated your Telerik points as a token of gratitude.

    Regards,
    Ivaylo Gergov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top