Animation and message

6 posts, 0 answers
  1. Decisive Computing
    Decisive Computing avatar
    18 posts
    Member since:
    Mar 2015

    Posted 08 May 2017 Link to this post

    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?

  2. Nikolay Demirev
    Admin
    Nikolay Demirev avatar
    176 posts

    Posted 09 May 2017 Link to this post

    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
    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
  3. Decisive Computing
    Decisive Computing avatar
    18 posts
    Member since:
    Mar 2015

    Posted 09 May 2017 in reply to Nikolay Demirev Link to this post

    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.

  4. Nikolay Demirev
    Admin
    Nikolay Demirev avatar
    176 posts

    Posted 11 May 2017 Link to this post

    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
    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
  5. J
    J avatar
    5 posts
    Member since:
    Oct 2009

    Posted 23 May Link to this post

    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>
  6. Lance | Team Lead - US DevTools Support
    Admin
    Lance | Team Lead - US DevTools Support avatar
    1045 posts

    Posted 23 May Link to this post

    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: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
    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