Skip to content

Commit

Permalink
Added CollectionView sample
Browse files Browse the repository at this point in the history
  • Loading branch information
Seba Cabrera committed Nov 3, 2020
1 parent cffd778 commit d0ad867
Show file tree
Hide file tree
Showing 4 changed files with 375 additions and 0 deletions.
1 change: 1 addition & 0 deletions SkeletonExample/SkeletonExample/MainPage.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ public MainPage()
this.Children.Add(new Page4());
this.Children.Add(new Page5());
this.Children.Add(new Page6());
this.Children.Add(new Page7());
}
}
}
250 changes: 250 additions & 0 deletions SkeletonExample/SkeletonExample/Pages/Page7.xaml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,250 @@
<pages:BasePage
xmlns:pages="clr-namespace:SkeletonExample.Pages"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sk="clr-namespace:Xamarin.Forms.Skeleton;assembly=Xamarin.Forms.Skeleton"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
x:Class="SkeletonExample.Pages.Page7"
Title="Collection View"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="False">

<ContentPage.Resources>
<ResourceDictionary>
<DataTemplate x:Key="ItemTemplate">
<StackLayout Orientation="Horizontal" Margin="30,10" Spacing="20">
<Frame HasShadow="False"
CornerRadius="20"
Padding="0"
WidthRequest="70"
IsClippedToBounds="True"
BackgroundColor="{StaticResource WhiteColor}"
sk:Skeleton.IsParent="True"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">

<ffimageloading:CachedImage Source="{Binding Image}"
Aspect="AspectFill"/>
</Frame>

<StackLayout Margin="0,5">

<Frame BackgroundColor="Transparent"
HasShadow="False"
CornerRadius="5"
Padding="0"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">

<Label Text="{Binding Title}"
TextColor="{StaticResource BlackColor}"
FontSize="20"
FontAttributes="Bold"
HorizontalOptions="Start"/>
</Frame>

<Frame BackgroundColor="Transparent"
HasShadow="False"
CornerRadius="5"
Padding="0"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">

<Label
Text="{Binding Subtitle}"
TextColor="{StaticResource DarkGrayColor}"
FontSize="14"
HorizontalOptions="Start"/>
</Frame>

</StackLayout>


<StackLayout WidthRequest="26" HeightRequest="26" Margin="0,5" HorizontalOptions="EndAndExpand">
<Frame HasShadow="False"
CornerRadius="5"
Padding="0"
IsClippedToBounds="True"
BackgroundColor="Transparent"
HorizontalOptions="End"
sk:Skeleton.IsParent="True"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">
<ffimageloading:CachedImage Source="health.png"
Aspect="AspectFill"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.Hide="True"/>
</Frame>
</StackLayout>
</StackLayout>



</DataTemplate>
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<Grid ColumnSpacing="0"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="350" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>

<Frame HasShadow="False" CornerRadius="30" Margin="0,-30,0,0" IsClippedToBounds="True" Padding="0" BackgroundColor="Transparent"
sk:Skeleton.IsParent="True"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}"
sk:Skeleton.Animation="{sk:DefaultAnimation Fade}">

<AbsoluteLayout>
<ffimageloading:CachedImage AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.5,0.5,1,1"
Source="img_1.jpg"
Aspect="AspectFill"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.Hide="True"/>
<ffimageloading:CachedImage Source="back_gradient.png"
Aspect="AspectFill"
AbsoluteLayout.LayoutFlags="All"
AbsoluteLayout.LayoutBounds="0,0,1,1"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.Hide="True" />

<Grid AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0,0,1,1"
x:Name="mainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="48"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="48"/>
</Grid.ColumnDefinitions>

<ffimageloading:CachedImage Grid.Column="1" Grid.Row="0" Source="horus.png" Margin="0" HorizontalOptions="Center" Aspect="AspectFit" HeightRequest="36" sk:Skeleton.IsBusy="{Binding IsBusy}" sk:Skeleton.Hide="true"/>


<ContentView Grid.Column="2" Grid.Row="0">
<ContentView.GestureRecognizers>
<TapGestureRecognizer Command="{Binding LoadCommand}" />
</ContentView.GestureRecognizers>
<ffimageloading:CachedImage Source="load.png"
Aspect="AspectFit"
HeightRequest="32"
WidthRequest="32"
HorizontalOptions="Center"
VerticalOptions="Center"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.Hide="true"/>

</ContentView>
<StackLayout Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" VerticalOptions="EndAndExpand" Margin="16,0">

<Frame BackgroundColor="Transparent" HasShadow="False" CornerRadius="5" Padding="0" sk:Skeleton.IsBusy="{Binding IsBusy}" sk:Skeleton.BackgroundColor="{StaticResource WhiteColor}" sk:Skeleton.Animation="{sk:DefaultAnimation Fade}">
<Label Text="Skeleton" TextColor="{StaticResource WhiteColor}" FontAttributes="Bold" FontSize="36"/>
</Frame>

<Frame BackgroundColor="Transparent" HasShadow="False" CornerRadius="5" Padding="0" sk:Skeleton.IsBusy="{Binding IsBusy}" sk:Skeleton.BackgroundColor="{StaticResource WhiteColor}" sk:Skeleton.Animation="{sk:DefaultAnimation Fade}">
<Label Text="By Horus" TextColor="{StaticResource WhiteColor}" FontAttributes="Bold" FontSize="20"/>
</Frame>
</StackLayout>
</Grid>
</AbsoluteLayout>
</Frame>

<ScrollView Grid.Row="1">
<StackLayout>
<Frame Margin="30,20,30,10" BackgroundColor="Transparent" HasShadow="False" CornerRadius="5" Padding="0" sk:Skeleton.IsBusy="{Binding IsBusy}" sk:Skeleton.BackgroundColor="{StaticResource GrayColor}" sk:Skeleton.Animation="{sk:DefaultAnimation Fade}">
<Label Text="Trending" TextColor="{StaticResource BlackColor}" FontAttributes="Bold" FontSize="24"/>
</Frame>

<CollectionView
SelectionMode="None"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent"
ItemsSource="{Binding Items}"
sk:Skeleton.IsParent="True"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.Animation="{sk:DefaultAnimation Fade}">
<CollectionView.ItemTemplate>

<DataTemplate>
<StackLayout Orientation="Horizontal" Margin="30,10" Spacing="20">
<Frame HasShadow="False"
CornerRadius="20"
Padding="0"
WidthRequest="70"
IsClippedToBounds="True"
BackgroundColor="{StaticResource WhiteColor}"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">

<ffimageloading:CachedImage Source="{Binding Image}"
Aspect="AspectFill"/>
</Frame>

<StackLayout Margin="0,5">

<Frame BackgroundColor="Transparent"
HasShadow="False"
CornerRadius="5"
Padding="0"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">

<Label Text="{Binding Title}"
TextColor="{StaticResource BlackColor}"
FontSize="20"
FontAttributes="Bold"
HorizontalOptions="Start"/>
</Frame>

<Frame BackgroundColor="Transparent"
HasShadow="False"
CornerRadius="5"
Padding="0"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">

<Label
Text="{Binding Subtitle}"
TextColor="{StaticResource DarkGrayColor}"
FontSize="14"
HorizontalOptions="Start"/>
</Frame>

</StackLayout>


<StackLayout WidthRequest="26" HeightRequest="26" Margin="0,5" HorizontalOptions="EndAndExpand">
<Frame HasShadow="False"
CornerRadius="5"
Padding="0"
IsClippedToBounds="True"
BackgroundColor="Transparent"
HorizontalOptions="End"
sk:Skeleton.IsParent="True"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.BackgroundColor="{StaticResource GrayColor}">
<ffimageloading:CachedImage Source="health.png"
Aspect="AspectFill"
sk:Skeleton.IsBusy="{Binding IsBusy}"
sk:Skeleton.Hide="True"/>
</Frame>
</StackLayout>
</StackLayout>



</DataTemplate>


</CollectionView.ItemTemplate>

</CollectionView>
</StackLayout>
</ScrollView>
</Grid>
</ContentPage.Content>
</pages:BasePage>
16 changes: 16 additions & 0 deletions SkeletonExample/SkeletonExample/Pages/Page7.xaml.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
using System;
using System.Collections.Generic;
using SkeletonExample.ViewModels;
using Xamarin.Forms;

namespace SkeletonExample.Pages
{
public partial class Page7 : BasePage
{
public Page7()
{
InitializeComponent();
BindingContext = new Page7ViewModel();
}
}
}
108 changes: 108 additions & 0 deletions SkeletonExample/SkeletonExample/ViewModels/Page7ViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Threading.Tasks;
using SkeletonExample.Models;
using Xamarin.Forms.Skeleton.Animations;

namespace SkeletonExample.ViewModels
{
public class Page7ViewModel : Page6ViewModel
{

private ObservableCollection<Item> items;

public ObservableCollection<Item> Items
{
get { return items; }
set { SetProperty(ref items, value); }
}

protected override async void OnLoadCommandExecute()
{
var title = "xxxxxxxxxxx";

this.Items = new ObservableCollection<Item>(new List<Item> {
new Item
{
Title = title,
Subtitle = title,
IsBusy = true
},
new Item
{
Title = title,
Subtitle = title,
IsBusy = true
},
new Item
{
Title = title,
Subtitle = title,
IsBusy = true
},
new Item
{
Title = title,
Subtitle = title,
IsBusy = true
},
new Item
{
Title = title,
Subtitle = title,
IsBusy = true
},
new Item
{
Title = title,
Subtitle = title,
IsBusy = true
},
});

this.IsBusy = true;
await Task.Delay(2500);
this.IsBusy = false;

this.Items = new ObservableCollection<Item>(new List<Item> {
new Item
{
Title = "Antelope Canyon",
Subtitle = "Arizona, United States",
Image = "img_1.jpg",
},
new Item
{
Title = "Giza Plateau",
Subtitle = "Cairo, Egypt",
Image = "img_2.jpg",
},
new Item
{
Title = "Machu Picchu",
Subtitle = "Peru",
Image = "img_3.jpg",
},
new Item
{
Title = "Lake Louise",
Subtitle = "Alberta, Canada",
Image = "img_4.jpg",
},
new Item
{
Title = "Navagio Beach",
Subtitle = "Zakynthos, Greece",
Image = "img_5.jpg",
},
new Item
{
Title = "Angels Landing",
Subtitle = "Utah, United States",
Image = "img_6.jpg",
},
});
}
}
}

0 comments on commit d0ad867

Please sign in to comment.