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?
11 Answers, 1 is accepted
Rank 1
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
Rank 1
Rank 1
Rank 1
Rank 1
Rank 1
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.
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
Rank 1
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.
Rank 1
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