1

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.

Machtal
  • 27
  • 1
  • 8

1 Answers1

1

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.

nevermore
  • 15,432
  • 1
  • 12
  • 30
  • sorry if this is a bit out of topic, I run your project in my android device API level 28(Pie) then I get warning "Could not get the `aapt2` version. Disabling `aapt2` support. Please check it is installed correctly" I already installed Android SDK build tools 26.0.0 - 26.0.3 but still the same. – Machtal Dec 13 '19 at 08:56
  • And what is the function of the SetProperty method? It make the value can't appears. That is the only one different of my project. – Machtal Dec 13 '19 at 09:07
  • 1
    @Machtal Please check the solution [here](https://github.com/xamarin/xamarin-android/blob/master/Documentation/guides/messages/xa0111.md). – nevermore Dec 13 '19 at 09:07
  • @Machtal It comes from the [BaseViewModel](https://github.com/XfHua/Xamarin.Forms.Skeleton/blob/master/App595/App595/App595/MainPage.xaml.cs#L86) – nevermore Dec 13 '19 at 09:08
  • It is fine if doesn't enter the SetProperty Method? – Machtal Dec 13 '19 at 09:18
  • @Machtal I use the SetProperty and it works well. I don't know what will happen if you don't use it. – nevermore Dec 13 '19 at 09:20
  • Sorry it is not yet, I'm still searching problem in my code. For the time being I think, maybe it's because of my mess in implemented to mvvmcross. – Machtal Dec 13 '19 at 10:06
  • what makes me curious is why only Skeleton.Animation and Skeleton.BackgroundColor did not appear ? All the rest is working fine – Machtal Dec 13 '19 at 10:11
  • 1
    @Machtal So my sample is work on your side, right? I guess the OnPropertyChanged is not fired when you change the value of Attend. – nevermore Dec 16 '19 at 01:21
  • Yes, your sample is working and you is right, OnPropertyChanged is not fired in my IsLoadBusy. So I try to changed to SetProperty it's work! `set { SetProperty(ref _isLoadBusy, value); }` thank you for saving my monday ^_^ – Machtal Dec 16 '19 at 02:28