Skip to content

Commit

Permalink
Merge pull request #5 from oridotaoyebode/master
Browse files Browse the repository at this point in the history 
Added example of how to use ShimmerLayout in a ListView
  • Loading branch information
@ChasakisD
ChasakisD authored May 13, 2019
2 parents 7f433e6 + 424d9a8 commit 9b9f7c5
Show file tree
Hide file tree
Showing 7 changed files with 536 additions and 203 deletions.
2 changes: 1 addition & 1 deletion src/Sample/XFShimmerLayoutSample/XFShimmerLayoutSample/App.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ public App()

ShimmerLayout.Init(DeviceDisplay.ScreenMetrics.Density);

MainPage = new Views.ShimmerTestPage();
MainPage = new Views.ShimmerListViewPage();
}
}
}
53 changes: 53 additions & 0 deletions ...le/XFShimmerLayoutSample/XFShimmerLayoutSample/ViewModels/ShimmerListViewPageViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Xamarin.Forms;
using XFShimmerLayoutSample.Models;

namespace XFShimmerLayoutSample.ViewModels
{
public class ShimmerListViewPageViewModel: NotifyingObject
{
private bool _isBusy;
public bool IsBusy
{
get => _isBusy;
set => Set(ref _isBusy, value);
}

private ObservableCollection<string> _things;
public ObservableCollection<string> Things
{
get => _things;
set => Set(ref _things, value);
}

private Command _startAnimationCommand;
public Command StartAnimationCommand
{
get => _startAnimationCommand;
set => Set(ref _startAnimationCommand, value);
}

public ShimmerListViewPageViewModel()
{
StartAnimationCommand = new Command(async () =>
{
Things = new ObservableCollection<string>
{
"jjj",
"jjj",
"jjj",
"jjj",
"jjj"
};
IsBusy = true;

await Task.Delay(5000);


//Load real data here.
IsBusy = false;
});
}
}
}
18 changes: 17 additions & 1 deletion ...Sample/XFShimmerLayoutSample/XFShimmerLayoutSample/ViewModels/ShimmerTestPageViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using System.Threading.Tasks;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using Xamarin.Forms;
using XFShimmerLayoutSample.Models;

Expand All @@ -13,6 +14,13 @@ public bool IsBusy
set => Set(ref _isBusy, value);
}

private ObservableCollection<string> _things;
public ObservableCollection<string> Things
{
get => _things;
set => Set(ref _things, value);
}

private Command _startAnimationCommand;
public Command StartAnimationCommand
{
Expand All @@ -24,6 +32,14 @@ public ShimmerTestPageViewModel()
{
StartAnimationCommand = new Command(async () =>
{
Things = new ObservableCollection<string>
{
"jjj",
"jjj",
"jjj",
"jjj",
"jjj"
};
IsBusy = true;

await Task.Delay(5000);
Expand Down
234 changes: 234 additions & 0 deletions src/Sample/XFShimmerLayoutSample/XFShimmerLayoutSample/Views/ShimmerListViewPage.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
x:Class="XFShimmerLayoutSample.Views.ShimmerListViewPage"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:XFShimmerLayout.Controls;assembly=XFShimmerLayout"
xmlns:viewModels="clr-namespace:XFShimmerLayoutSample.ViewModels;assembly=XFShimmerLayoutSample">

<ContentPage.BindingContext>
<!-- For Test Reasons binding context is set through this way. Better use a DI Container -->
<viewModels:ShimmerListViewPageViewModel />
</ContentPage.BindingContext>
<Grid x:Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>

<ListView HasUnevenRows="True" ItemsSource="{Binding Things}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<controls:ShimmerLayout Angle="-45" GradientSize=".2" IsLoading="{Binding BindingContext.IsBusy, Source={x:Reference myGrid}}">
<StackLayout Padding="24" Spacing="16">
<Grid ColumnSpacing="8" RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<BoxView
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
BackgroundColor="Brown"
CornerRadius="20"
HeightRequest="40"
VerticalOptions="Center"
WidthRequest="40" />

<BoxView
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="20"
HorizontalOptions="Start"
WidthRequest="150" />

<BoxView
Grid.Row="1"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="14"
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="50" />

<BoxView
Grid.Row="1"
Grid.Column="2"
BackgroundColor="Brown"
HeightRequest="18"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="100" />
</Grid>

<Grid ColumnSpacing="8" RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<BoxView
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
BackgroundColor="Brown"
CornerRadius="20"
HeightRequest="40"
VerticalOptions="Center"
WidthRequest="40" />

<BoxView
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="20"
HorizontalOptions="Start"
WidthRequest="150" />

<BoxView
Grid.Row="1"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="14"
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="50" />

<BoxView
Grid.Row="1"
Grid.Column="2"
BackgroundColor="Brown"
HeightRequest="18"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="100" />
</Grid>

<Grid ColumnSpacing="8" RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<BoxView
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
BackgroundColor="Brown"
CornerRadius="20"
HeightRequest="40"
VerticalOptions="Center"
WidthRequest="40" />

<BoxView
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="20"
HorizontalOptions="Start"
WidthRequest="150" />

<BoxView
Grid.Row="1"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="14"
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="50" />

<BoxView
Grid.Row="1"
Grid.Column="2"
BackgroundColor="Brown"
HeightRequest="18"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="100" />
</Grid>

<Grid ColumnSpacing="8" RowSpacing="4">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<BoxView
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
BackgroundColor="Brown"
CornerRadius="20"
HeightRequest="40"
VerticalOptions="Center"
WidthRequest="40" />

<BoxView
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="20"
HorizontalOptions="Start"
WidthRequest="150" />

<BoxView
Grid.Row="1"
Grid.Column="1"
BackgroundColor="Brown"
HeightRequest="14"
HorizontalOptions="Start"
VerticalOptions="Center"
WidthRequest="50" />

<BoxView
Grid.Row="1"
Grid.Column="2"
BackgroundColor="Brown"
HeightRequest="18"
HorizontalOptions="End"
VerticalOptions="Center"
WidthRequest="100" />
</Grid>
</StackLayout>
</controls:ShimmerLayout>

</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

<Button
Grid.Row="1"
Padding="8"
BackgroundColor="DarkCyan"
Command="{Binding StartAnimationCommand}"
CornerRadius="10"
HorizontalOptions="FillAndExpand"
Text="Start Animation"
TextColor="White" />
</Grid>
</ContentPage>
13 changes: 13 additions & 0 deletions src/Sample/XFShimmerLayoutSample/XFShimmerLayoutSample/Views/ShimmerListViewPage.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
using Xamarin.Forms.Xaml;

namespace XFShimmerLayoutSample.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class ShimmerListViewPage
{
public ShimmerListViewPage ()
{
InitializeComponent ();
}
}
}
Loading

0 comments on commit 9b9f7c5

Please sign in to comment.