I would like to have a message display along with the animation to let my users know exactly what is going on. But it looks like I can use EITHER the animation OR text and not both.
For instance, this displays ONLY my label:
<
telerik:RadBusyIndicator
IsBusy
=
"{Binding IsBusy}"
HorizontalOptions
=
"FillAndExpand"
VerticalOptions
=
"FillAndExpand"
AnimationContentColor
=
"{StaticResource Primary}"
AnimationType
=
"Custom"
>
<
telerik:RadBusyIndicator.Content
>
<
ScrollView
>
<
StackLayout
>
<
Label
StyleClass
=
"Heading1"
Text
=
"{Binding Title}"
/>
<
Label
Text
=
"{Binding CreateDateasString}"
StyleClass
=
"Small"
/>
<
ui:HtmlTextView
x:Name
=
"Desc"
Html
=
"{Binding Description}"
/>
</
StackLayout
>
</
ScrollView
>
</
telerik:RadBusyIndicator.Content
>
<
telerik:RadBusyIndicator.BusyContent
>
<
Label
Text
=
"{Binding BusyMessage}"
/>
</
telerik:RadBusyIndicator.BusyContent
>
</
telerik:RadBusyIndicator
>
So is there a way to use the built-in animation in the custom scenario?
Or, better yet, is there a way to display a text message without using a custom template?
5 Answers, 1 is accepted
Currently, there is no built-in functionality that allows you do that, but I can suggest you a workaround.
You could use a Grid which you holds the ScrollView from the Content of the BusyIndicator. After that add the BusyIndicator and the text you want to show. When your application is busy hide the ScrollView and show the BusyIndicator and the text when the application is not busy hide the BusyIndicator and the text. This way you will be able to use the default animations and a text.
I have created a public item in our Feedback Portal where you can upvote and follow it in order to receive notifications about the progress on the matter.
I hope this helps.
Regards,
Nikolay Demirev
Telerik by Progress
But then I cannot use the Content / BusyContent can I?
So there's no way to create, in the BusyContent, an instance of the animation? If I could add a control with your animation and then my own label (or whatever else) that would be the best.
I am attaching a sample project showing you how to use the default animations and text to show that your application is busy.
Regards,
Nikolay Demirev
Telerik by Progress
You can do it like the following, is it possible to change the labels text from c#
E.g. show Loading on loading and Show Saving on saving
<
telerikPrimitives:RadBusyIndicator
x:Name
=
"BusyIndicator"
AnimationType
=
"Animation3"
AnimationContentColor
=
"Red"
AnimationContentHeightRequest
=
"100"
AnimationContentWidthRequest
=
"100"
IsBusy
=
"True"
>
<
telerikPrimitives:RadBusyIndicator.BusyContent
>
<
Label
HorizontalOptions
=
"Center"
TextColor
=
"Black"
Text
=
"Loading..."
VerticalOptions
=
"Center"
/>
</
telerikPrimitives:RadBusyIndicator.BusyContent
>
</
telerikPrimitives:RadBusyIndicator
>
That will indeed show the message, however you will be replacing the animation. This was Brian initial problem, he wants to use both options together.
If you want to show both custom text as well as the animation, you'd use the approach in Nikolay's demo in which you create a custom view with both the BusyIndicator and the Label.
However, there is another alternative in which you can just use the BusyIndicator by defining a custom ControlTemplate that allows for both. Here's how to do that:
1. Let's start with an assumption that you have a view model with an IsBusy and IsBusyMessage property. You want the BusyIndicator to show the animation when
- IsBusy=true
- IsBusyMessage="Loading data...",
public
class
ViewModel : ViewModelBase
{
private
bool
isBusy;
private
string
isBusyMessage;
public
bool
IsBusy
{
get
=> isBusy;
set
=> SetProperty(
ref
isBusy, value);
}
public
string
IsBusyMessage
{
get
=> isBusyMessage;
set
=> SetProperty(
ref
isBusyMessage, value);
}
}
2. Define a ControlTemplate in the App (or Page) Resources that has both the AnimationContent AND BusyContent together.
<
ContentPage
x:Name
=
"Page"
xmlns:viewModels
=
"clr-namespace:YourApp.Forms.ViewModels;assembly=YourApp.Forms"
xmlns:primitives
=
"clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
x:Class
=
"YourApp.Forms.YourPage"
>
<
ContentPage.BindingContext
>
<
viewModels:ViewModel
/>
</
ContentPage.BindingContext
>
<
ContentPage.Resources
>
<
Style
x:Key
=
"CustomBusyIndicatorStyle"
TargetType
=
"primitives:RadBusyIndicator"
>
<
Setter
Property
=
"AnimationType"
Value
=
"Animation6"
/>
<
Setter
Property
=
"AnimationContentHeightRequest"
Value
=
"100"
/>
<
Setter
Property
=
"AnimationContentWidthRequest"
Value
=
"100"
/>
<
Setter
Property
=
"BackgroundColor"
Value
=
"#CCFFFFFF"
/>
<
Setter
Property
=
"AnimationContentColor"
Value
=
"Blue"
/>
<
Setter
Property
=
"BusyContentTemplate"
>
<
Setter.Value
>
<
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}"
Grid.Row
=
"2"
/>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
ContentPage.Resources
>
<
Grid
>
<!-- The page content goes here -->
<!-- The busy indicator is on top of the content -->
<
primitives:RadBusyIndicator
x:Name
=
"BusyIndicator"
IsVisible
=
"{Binding IsBusy}"
IsBusy
=
"{Binding IsBusy}"
Style
=
"{StaticResource CustomBusyIndicatorStyle}"
>
<
primitives:RadBusyIndicator.BusyContent
>
<
Label
Text
=
"{Binding IsBusyMessage}"
BindingContext
=
"{Binding BindingContext, Source={x:Reference Page}}"
HorizontalTextAlignment
=
"Center"
/>
</
primitives:RadBusyIndicator.BusyContent
>
</
primitives:RadBusyIndicator
>
</
Grid
>
</
ContentPage
>
Side Note:
In my example above, I am binding the IsBusyMessage via x:Reference pointer. This is required in this specific scenario because the content template is not in the same BindingContext scope as the page.
Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik