Xamarin.Forms.Skeleton - What make animation and BackgroundColor of the plugin doesn't appears?

1.2k Views Asked by At

I have implemented the Skeleton plugin in my xamarin.form app. It's working fine in my listview page. Then I try it in my listView item detail, the animation and skeleton backgroundColor doesn't work. The function working fine and no error in my build.

This is what I've tried:

my xaml layout :

<ScrollView BackgroundColor="White">
        <StackLayout
               Margin="15"
               extension:Skeleton.IsParent="True"
               extension:Skeleton.IsBusy="{Binding IsLoadBusy}"
               extension:Skeleton.BackgroundColor="{StaticResource GrayColor}"
               extension:Skeleton.Animation="Fade"
               extension:Skeleton.AnimationInterval="600">
            <Image
                   x:Name="ImgSelfie"
                   HeightRequest="200" WidthRequest="200" BackgroundColor="White"
                   Source="selfie"
                   extension:Skeleton.IsBusy="{Binding IsLoadBusy}"
                   extension:Skeleton.Animation="Fade"
                   extension:Skeleton.BackgroundColor="{StaticResource DarkGrayColor}"/>
            <Label Text="Location :" FontAttributes="Bold"/>
            <Editor
                   Text="{Binding Attend.AddressDetail}" x:Name="EdtLocation" IsEnabled="False" AutoSize="TextChanges"
                   extension:Skeleton.IsBusy="{Binding IsLoadBusy}"
                   extension:Skeleton.Animation="Fade"
                   extension:Skeleton.BackgroundColor="{StaticResource DarkGrayColor}"/>

            <Label Text="Time :" FontAttributes="Bold"/>
            <Entry
                   Text="{Binding Attend.Created}" x:Name="EntTime" IsEnabled="False"
                   extension:Skeleton.IsBusy="{Binding IsLoadBusy}"
                   extension:Skeleton.Animation="Fade"
                   extension:Skeleton.BackgroundColor="{StaticResource DarkGrayColor}" />

            <Label Text="Action :" FontAttributes="Bold"/>
            <Label
                   Text="{Binding Attend.Activity}" x:Name="LblAction" FontSize="Medium" TextColor="Black"
                   extension:Skeleton.IsBusy="{Binding IsLoadBusy}"
                   extension:Skeleton.Animation="Fade"
                   extension:Skeleton.BackgroundColor="{StaticResource DarkGrayColor}"/>

            <Label Text="Noted :" FontAttributes="Bold"/>
            <Editor
                   Text="{Binding Attend.Note}" x:Name="EntNote" IsEnabled="False" AutoSize="TextChanges"
                   extension:Skeleton.IsBusy="{Binding IsLoadBusy}"
                   extension:Skeleton.Animation="Fade"
                   extension:Skeleton.BackgroundColor="{StaticResource DarkGrayColor}"/>

            <StackLayout VerticalOptions="EndAndExpand">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <material:MaterialButton
                   mvx:Bi.nd="Command OnCancelButtonCommand" Text="Confirm"
                   ButtonType="Outlined" BorderColor="Black" BackgroundColor="White"
                   TextColor="Black" PressedBackgroundColor="Gray" BorderWidth="2" WidthRequest="25" Padding="15"/>
                </Grid>
            </StackLayout>
        </StackLayout>
    </ScrollView>

and the view model :

    public async Task PerformShimmerAsyncTask(string id)
    {
        this.Attend = new Attendance
        {
            //Image = null,
            AddressDetail = "x",
            Created = DateTime.Now,
            Activity = "x",
            Note = "x"
        };

        this.IsLoadBusy = true;
        await Task.Delay(2500);
        this.IsLoadBusy = false;
        //await GetItem(id);

        this.Attend = new Attendance
        {
           //Image = "selfie.png",
           AddressDetail = "asdasdasda",
           Created = DateTime.Now,
           Activity = "sadasdasdasfacf",
           Note = "asuuusfasfa"
        };
    }

following based on this example.

Please help and correct if my question is not yet clear.

1

There are 1 best solutions below

10
On BEST ANSWER

I use your code and it works well on my side, I can show you my sample project.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();


        myViewModel vm = new myViewModel();

        this.BindingContext = vm;
        vm.PerformShimmerAsyncTask("123");
    }
}

public class myViewModel : BaseViewModel
{

    private MyModel _attend;
    private bool _isLoadBusy = false;

    public MyModel Attend
    {
        get { return _attend; }
        set { SetProperty(ref _attend, value); }
    }

    public bool IsLoadBusy
    {
        get { return _isLoadBusy; }
        set
        {
            _isLoadBusy = value;
            OnPropertyChanged();
        }
    }

    public async Task PerformShimmerAsyncTask(string id)
    {

        this.Attend = new MyModel
        {
            AddressDetail = "x",
            Created = DateTime.Now,
            Activity = "x",
            Note = "x"
        };

        this.IsLoadBusy = true;
        await Task.Delay(10000);
        this.IsLoadBusy = false;

        this.Attend = new MyModel
        {
            AddressDetail = "asdasdasda",
            Created = DateTime.Now,
            Activity = "sadasdasdasfacf",
            Note = "asuuusfasfa"
        };
    }

}

public class MyModel 
{
    public string AddressDetail { get; set; }
    public DateTime Created { get; set; }
    public string Activity { get; set; }
    public string Note { get; set; }
}

And the code in Xaml is same as yours. You should make sure that you have set the right bindingContext and call PerformShimmerAsyncTask correctly.

I uploaded my sample project here. Let me know if it works for you.