20 Answers, 1 is accepted
Unfortunately, this is not enough information for me to determine what the problem might be. The AnimationType list can be found in the Animations documentation article.
Here's an example of setting one.
<telerikBusyIndicator:RadBusyIndicator x:Name="radBusyIndicator" AnimationType="Animation4" IsBusy="True"/>Note: Make sure you also have the required SkiaSharp (v 1.59.3) packages installed as well:
SkiaSharp (all projects)
SkiaSharp.Views (all projects except class library)
SkiaSharp.Views.Forms (all projects)
If you still experience issues please share the code that you're using, along with details of the target platform, so that I can investigate directly.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
RadBusyIndicator radBusyIndicator = new RadBusyIndicator(){ IsBusy = true, Content = new Label() { Text = "This is the content of the RadBusyIndicator control displayed when the indicator is not busy.", TextColor = Color.Black },
AnimationContentWidthRequest = 100, AnimationContentHeightRequest = 100,};
Rank 1
Hello, I do have SkiaSharp on all my projects, also here is the code I use:
RadBusyIndicator radBusyIndicator = new RadBusyIndicator(){ IsBusy = true, Content = new Label() { Text = "This is the content of the RadBusyIndicator control displayed when the indicator is not busy.", TextColor = Color.Black }, AnimationType = AnimationType.Animation8, AnimationContentWidthRequest = 100, AnimationContentHeightRequest = 100,};
Also, I am using Xamarin.Forms, and this error happens in both iOS and Android,
Also when I tried creating a new project It worked on iOS but not on Android when using .NET Standard, but it worked on PCL.
Can you also confirm all the SkiaSharp packages are using v1.59.x and not 1.6? The NuGet package manager can sometimes install the latest even when the dependency is an earlier version.
Also, double check the RadBusyIndicator Required Telerik Assemblies documentation to insure that you have all the Telerik assemblies referenced:
RadBusyIndicator Required Telerik Assemblies
- Portable (or .NET Standard) Project
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.SkiaSharp.dll
- Android Project
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.SkiaSharp.dll
- iOS Project
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.SkiaSharp.dll
- UWP Project
Telerik.XamarinForms.Common.dll
Telerik.XamarinForms.Primitives.dll
Telerik.XamarinForms.SkiaSharp.dll
Demo
I've attached a demo. It's a straightforward "File > New Xamarin.Forms" with "Blank app" and ".NET Standard" selected. After creating the projects, I installed Telerik UI for Xamarin (via the Telerik NuGet server), updated Xamarin.Forms to the latest service release available for that version (3.0 in this case) and added the required NuGet packages (for example Required Android support libraries).
Here is the entirety of the code:
XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:local="clr-namespace:NetStandard2_Test" x:Class="NetStandard2_Test.MainPage"> <Grid x:Name="RootGrid"/></ContentPage>Code-Behind
using Telerik.XamarinForms.Primitives;using Xamarin.Forms;namespace NetStandard2_Test{ public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); RadBusyIndicator radBusyIndicator = new RadBusyIndicator { IsBusy = true, Content = new Label { Text = "This is the content of the RadBusyIndicator control displayed when the indicator is not busy.", TextColor = Color.Black }, AnimationType = AnimationType.Animation8, AnimationContentWidthRequest = 100, AnimationContentHeightRequest = 100, }; RootGrid.Children.Add(radBusyIndicator); } }}Here's the result at runtime:
As you can see, the control is working as expected.
Further Investigation
If you have any trouble, update my attached demo so that it replicates the issue and send it back to me so that we can investigate the issue directly.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
Unable to find package Telerik.UI.for.Xamarin with version (=> 2018.2.516.2)
- Found 1 version(s) in nuget.org [ Nearest version: 2015.3.1202 ]
- Found 0 version(s) in Microsoft Visual Studio Offline Packages
- Found 0 version(s) in Local
Also, I cannot post a sample project because it says the only allowed extensions are jpg, jpeg, png and gif.
Please read the 2nd sentence under "Demo" section in my last reply. I explain that I used the Telerik NuGet server instead of local assemblies (click that link to be brought to the instructions). After you follow the instructions, you'll be able to build!
For your convenience, here's the link again: Telerik NuGet Server.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
I did read the tutorial and I did everything it said. But I still get the same error and it says "Found 0 version(s) in telerik"
And If I try to search in the Telerik Nuget I get no result. (It shows no packages).
I used my Telerik account credentials to login to https://nuget.telerik.com/nuget.
But it still is empty in both web and Visual Studio. (See attached screenshot)
The screenshot you've provided is the expected result. I looked into your account and it seems you do not have a license for UI for Xamarin. This is why you cannot see any results for the specific package in the NuGet feed.
In fact, you've never started a trial or downloaded UI for Xamarin, where did you get the release you're using? Telerik licensing is per-developer and cannot be shared among many users..
It is common that a developer uses a license that was purchased by their employer, for this case we have an easy to use portal so that the employer can assign you as the Licensed User of the product. Have the owner of the license take the following steps:
1 - Go the Managed Licensed Users portal
2 - Unassign themselves from the license (they will remain the owner and can change users at any time)
3 - Assign you as the Licensed User using your Telerik Account email address
Once you obtain a license (trial or paid), you'll be able to then see the Xamarin packages in the Telerik NuGet feed (note that if you are assigned a trial license, you'll need to switch to the Trial NuGet package).
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
Thanks.
Yep, that would explain why you're having a problem. Easy fix! Once you start the download, you'll automatically be assigned the trial license.
Once that happens the NuGet server should show you the following packages:
If you have any further trouble, let me know.
Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik
Rank 1
We testing this the latest version from Telerik Package
We added this first page, the whole application crashed, plus once we added the Telerik Xamarin the Application increased 100 MB in size
<primitives:RadBusyIndicator x:Name="radBusyIndicator"
IsVisible="{Binding IsBusy}"
IsBusy="{Binding IsBusy}"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationType="Animation4"
AnimationContentColor="LightBlue"
Grid.Row="0"
Grid.RowSpan="2">
<primitives:RadBusyIndicator.Content>
<Grid BindingContext="{x:Reference Page}"
WidthRequest="{Binding Width}"
HeightRequest="{Binding Height}" />
</primitives:RadBusyIndicator.Content>
</primitives:RadBusyIndicator>
Hello Rabeeh,
Without the crash details, I cannot tell you what went wrong.
Crash Suspicion
If I had to guess, it is because the ContentPage you used that code in doesn't have the name "Page". The BindingContext of the BusyIndicator.Content uses an x:Reference, this means the target of that x:Reference must exist, you you'll crash your application.
To better explain, here's the same code, with the relevant parts highlighted:
<ContentPage x:Name="Page" ....>
....
<primitives:RadBusyIndicator x:Name="radBusyIndicator"
IsVisible="{Binding IsBusy}"
IsBusy="{Binding IsBusy}"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationType="Animation4"
AnimationContentColor="LightBlue"
Grid.Row="0"
Grid.RowSpan="2">
<primitives:RadBusyIndicator.Content>
<Grid BindingContext="{x:Reference Page}"
WidthRequest="{Binding Width}"
HeightRequest="{Binding Height}" />
</primitives:RadBusyIndicator.Content>
</primitives:RadBusyIndicator>
</ContentPage>Ultimately, you don't have to take that approach. You can just use it without inner content predefined. Try starting with this, then add features you want afterwards.
<primitives:RadBusyIndicator IsVisible="{Binding IsBusy}" IsBusy="{Binding IsBusy}"/>App Size
Answering your question about app size, it's expected that your package size increased. This is because you're including all the assemblies for all the controls. If you only are using thew RadBusyIndicator, then you can only use the assemblies that the RadBusyIndicator comes in (it is only 3 assemblies, plus SkiaSharp nuget). Please read the RadBusyIndicator Getting Started documentation for more information.
If you have any further trouble or questions about assemblies, please open a Support ticket here and include all the details about your setup (XF version, target platform version, etc) and we'll be happy to assist with your specific setup.
Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik
Rank 1
Veteran
I know this is an old thread but here goes ..
I am an experienced Xamarin developer and have been engaged by a licensee of your product.
I am using Xamarin Shell as a base
INPC is implemented in the base view model
I have a simple piece of XAML and I am setting the Binding context in the code behind of the content page like so ...
public SyncDataView(){ InitializeComponent(); BindingContext = App.Container.Resolve<SyncDataViewModel>();}
Then here is the simple XAML....
<?xml version="1.0" encoding="utf-8" ?><ContentPage x:Class="APPX.Views.SyncDataView" xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives" xmlns:vm="clr-namespace:APPX.ViewModels;assembly=APPX"> <ContentPage.Content> <primitives:RadBusyIndicator x:Name="BusyIndicator" AnimationContentHeightRequest="100" AnimationContentWidthRequest="100" IsBusy="{Binding IsBusy, Mode=OneWay}" IsVisible="{Binding IsBusy, Mode=OneWay}" VerticalOptions="Center"> <primitives:RadBusyIndicator.BusyContent> <Label HorizontalOptions="Center" Text="{Binding BusyMessageText}" VerticalOptions="Center" /> </primitives:RadBusyIndicator.BusyContent> <primitives:RadBusyIndicator.Content> <Button Margin="60" Command="{Binding SyncLookups}" Text="Sync Lookups" /> </primitives:RadBusyIndicator.Content> </primitives:RadBusyIndicator> </ContentPage.Content>
I am getting the following XAML binding errors and the busy indicator never shows ....
[0:] Binding: 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Xamarin.Forms.ContentPresenter.Content'[0:] Binding: 'Content' property not found on 'Telerik.XamarinForms.Primitives.BusyContentPresenter', target property: 'Xamarin.Forms.ContentPresenter.Content'
Here are my NuGet packages in use...
<ItemGroup> <PackageReference Include="Autofac" Version="6.1.0" /> <PackageReference Include="LiteDB" Version="5.0.10" /> <PackageReference Include="Microsoft.AppCenter" Version="4.1.0" /> <PackageReference Include="Microsoft.AppCenter.Analytics" Version="4.1.0" /> <PackageReference Include="Microsoft.AppCenter.Crashes" Version="4.1.0" /> <PackageReference Include="Microsoft.AppCenter.Distribute" Version="4.1.0" /> <PackageReference Include="Newtonsoft.Json" Version="12.0.3" /> <PackageReference Include="Polly" Version="7.2.1" /> <PackageReference Include="Refit" Version="6.0.24" /> <PackageReference Include="SkiaSharp" Version="2.80.2" /> <PackageReference Include="SkiaSharp.Views" Version="2.80.2" /> <PackageReference Include="SkiaSharp.Views.Forms" Version="2.80.2" /> <PackageReference Include="Splat" Version="10.0.1" /> <PackageReference Include="sqlite-net-pcl" Version="1.7.335" /> <PackageReference Include="System.ComponentModel.Annotations" Version="5.0.0" /> <PackageReference Include="Telerik.UI.for.Xamarin.Common" Version="2021.1.119.1" /> <PackageReference Include="Telerik.UI.for.Xamarin.Input" Version="2021.1.119.1" /> <PackageReference Include="Telerik.UI.for.Xamarin.Primitives" Version="2021.1.119.1" /> <PackageReference Include="Telerik.UI.for.Xamarin.SkiaSharp" Version="2021.1.119.1" /> <PackageReference Include="Xamarin.CommunityToolkit" Version="1.0.3" /> <PackageReference Include="Xamarin.Essentials.Interfaces" Version="1.6.1" /> <PackageReference Include="Xamarin.Forms" Version="5.0.0.2012" /> <PackageReference Include="Xamarin.Essentials" Version="1.6.1" /></ItemGroup>
In my test code I am running a loop with sleep ....
var tmpLookupList = App.AppConfiguration?.LookupTablesToSync.Split(',').ToList();foreach (string tableName in tmpLookupList){ Debug.WriteLine($"IsBusy = {IsBusy}"); BusyMessageText = $"Syncing {tableName} ...."; Thread.Sleep(TimeSpan.FromSeconds(10)); Debug.WriteLine("Done sleeping");}
Any idea what the issue could be ?
Thanks for any guidance you can offer
Rank 1
Veteran
I even added a converter to make sure the visible bool is right and add stack layouts but no luck :(
<ContentPage.Resources> <ResourceDictionary> <xct:InvertedBoolConverter x:Key="InvertedBoolConverter" /> </ResourceDictionary> </ContentPage.Resources> <ContentPage.Content> <primitives:RadBusyIndicator x:Name="BusyIndicator" AnimationContentHeightRequest="100" AnimationContentWidthRequest="100" IsBusy="{Binding IsBusy}" IsVisible="{Binding IsBusy,Converter={StaticResource InvertedBoolConverter}}" VerticalOptions="Center"> <primitives:RadBusyIndicator.BusyContent> <StackLayout> <Label HorizontalOptions="Center" Text="{Binding BusyMessageText}" VerticalOptions="Center" /> </StackLayout> </primitives:RadBusyIndicator.BusyContent> <primitives:RadBusyIndicator.Content> <StackLayout> <Button Margin="60" Command="{Binding SyncLookups}" Text="Sync Lookups" /> </StackLayout> </primitives:RadBusyIndicator.Content> </primitives:RadBusyIndicator> </ContentPage.Content></ContentPage>Hello Stephen,
First problem is you have IsVisible bound to IsBusy, but have the Button inside the Content. That means you will never see the button. You're going to want to move the button outside of the Content anyways (explained below)
As to why you're not seeing the animations is because I suspect you are accidentally sleeping the UI thread, instead use Task.Delay
Debug.WriteLine($"IsBusy = {IsBusy}");
BusyMessageText = $"Syncing {tableName} ....";
await Task.Delay(10000);
Debug.WriteLine("Done sleeping");XAML Binding Errors In Output
After you fix that, you will probably still see the ContentPresenter binding errors. You can safely ignore them, they are false flags. I can 100% confirm the binding works and the BindableProperty BusyContentPresenter has a Content property. We can't explain why Visual Studio is flagging this, I have reported it to Microsoft but I don't have an answer yet.
Note: If you are using the XAML Binding Errors pane in Visual Studio, that is not for a Xamarin.Forms project.
Understanding Data Binding & BusyIndicator content
I strongly discourage using BusyIndicator Content that has any data bindings. This is because we remove the content form the Visual Tree when IsBusy is toggled. This means all your bindings will be reset and restored every time it is toggled.
My solution for this is to put the RadBusyIndicator on top of the content. I have written a KB article that explains this and offers a simpel and elegant solution with source code.
SkiaSharp Tip
I see SkiaSharp.Views inside the csproj you shared. That should not be in the class library project, it only goes in the platform project. In fact, if you expand the class library project's dependencies, you should see a warning for that package (because it has no NET Standard 2.0 dlls).
You can find a better explanation in this documentation, but let me share a screenshot for your convenience.in our
Demo
If you wanted to show your custom busy text next to the busy indicator animation, I recommend following the guidance here for custom BusyContent Xamarin BusyIndicator Documentation | Custom Busy Content | Telerik UI for Xamarin
Below is a demo I wrote to meet your scenario:
MainViewModel
using System.Threading.Tasks;
using Xamarin.Forms;
namespace MyApp.Portable
{
public class MainViewModel : Telerik.XamarinForms.Common.NotifyPropertyChangedBase
{
private int testCount;
private bool isBusy;
private string busyMessageText;
public MainViewModel()
{
SyncLookups = new Command(async() => await ExecuteSyncLookupsAsync());
}
public bool IsBusy
{
get => isBusy;
set => UpdateValue(ref isBusy, value);
}
public string BusyMessageText
{
get => busyMessageText;
set => UpdateValue(ref busyMessageText, value);
}
public Command SyncLookups { get; set; }
private async Task ExecuteSyncLookupsAsync()
{
IsBusy = true;
testCount++;
BusyMessageText = $"Syncing look ups (#{testCount}), please wait...";
await Task.Delay(4000);
IsBusy = false;
}
}
}MainPage.xaml.cs
using Xamarin.Forms;
namespace MyApp.Portable
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
BindingContext = new MainViewModel();
}
}
}MainPage
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:primitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
xmlns:local="clr-namespace:MyApp.Portable;assembly=Myapp.Portable"
mc:Ignorable="d"
x:Class="MyApp.Portable.MainPage">
<Grid>
<Button Command="{Binding SyncLookups}"
VerticalOptions="Center"
HorizontalOptions="Center"
Text="Sync Lookups" />
<primitives:RadBusyIndicator x:Name="BusyIndicator"
IsBusy="{Binding IsBusy, Mode=OneWay}"
IsVisible="{Binding IsBusy, Mode=OneWay}"
AnimationContentColor="DarkBlue"
BackgroundColor="#CCFFFFFF"
AnimationContentHeightRequest="100"
AnimationContentWidthRequest="100"
AnimationType="Animation6">
<primitives:RadBusyIndicator.BusyContentTemplate>
<ControlTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ContentPresenter Content="{TemplateBinding Path=AnimationContent}"
Grid.Row="1" />
<ContentPresenter Content="{TemplateBinding Path=BusyContent}"
HorizontalOptions="Center"
Grid.Row="2"/>
</Grid>
</ControlTemplate>
</primitives:RadBusyIndicator.BusyContentTemplate>
<primitives:RadBusyIndicator.BusyContent>
<Label Text="{Binding BusyMessageText, Source={RelativeSource AncestorType={x:Type local:MainViewModel}}}"
HorizontalOptions="Center"
VerticalOptions="Center" />
</primitives:RadBusyIndicator.BusyContent>
</primitives:RadBusyIndicator>
</Grid>
</ContentPage>> Note: I usually put the Resources in App.xaml so that the rest of the app can use the same BusyIndicator style. To see such an app, continue to the next section.
Production -Ready Demo
To see a real world example, visit the official Telerik CRM demo I wrote last year https://docs.telerik.com/devtools/xamarin/demos-and-sample-apps/xamarin-sample-applications#telerik-crm-app
See the style in the App.xaml's Line 98 to Line 130.
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Hello,
My apologies, I forgot to include the link to the KB article I mentioned in the databinding section of my last reply. you can find it here Data bound controls inside busy indicator raise exception when busy state is changed | Telerik UI for Xamarin
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
Thanks, that KB article did it ...
Is this going to be resolved soon or ???
Hi Stephen,
I'm not sure what you mean by resolved, there is no broken functionality or bug. Everything is working as expected and as designed.
As far as the false error output in Visual Studio goes, it is an issue with Visual Studio that we have no control over. There are a lot of issues with Xamarin.Forms XAML and Visual Studio XAML tooling.
If you're referring to needing to put the BusyIndicator on top of the content, that is just the way things work in Xamarin.Forms. If you remove something from the visual tree, you also lose the data binding.
If you have any specific problems, please open a Technical Support ticket and we'll take a deeper look at your code. A ticket is like a forum post, but it is private, you can attach your code and has a guaranteed 24 hour turnaround.
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Veteran
ok fair enough ... the title of your KB seems like it's a bug ...
My apologies, I forgot to include the link to the KB article I mentioned in the databinding section of my last reply. you can find it here Data bound controls inside busy indicator raise exception when busy state is changed | Telerik UI for Xamarin
Hi Stephen,
Ah okay, thanks for clearing that up. The 'exception' wording in the KB article's title refers to any errors from the custom content itself, not an exception from the RadBusyIndicator.
Here's a little more info, in case it's helpful.
Your content may not ever have errors. This is because even if you place data bound content in the area that gets removed, you'd only see errors if that content cannot handle having it's properties reset when it is removed and re-added from the Visual Tree.
It's actually more of a problem for developers who are expecting no UI changes after something gets removed and re-added to the UI. For example, if you have a ListView with ItemsSource bound to a view model collection. If you remove and re-add that ListView from the visual tree, it will be as if it is brand new (scrolled to the top, etc).
This is not that common depending on your scenario, but it can an undesired thing. In the large majority of cases, it is not even an issue, which is why it is a KB article instead of part of the main documentation.
Regards,
Lance | Manager Technical Support
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.