Animation and message

[Decisive Computing]

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>

[Nikolay Demirev]

Hi Brian,

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

[Decisive Computing]

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.

[Nikolay Demirev]

Hello Brian,

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

[J]

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>

[Lance | Manager Technical Support]

Hello Jonathon,

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="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        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