Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Discover page design
  • Loading branch information
Depechie committed Apr 2, 2019
1 parent d49e988 commit dd569f2
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 6 deletions.
8 changes: 8 additions & 0 deletions XamarinFloatingTabs/Models/Bird.cs
@@ -0,0 +1,8 @@
namespace XamarinFloatingTabs.Models
{
public class Bird
{
public string ImageUrl { get; set; }
public string Name { get; set; }
}
}
56 changes: 51 additions & 5 deletions XamarinFloatingTabs/Views/DiscoverPage.xaml
Expand Up @@ -6,10 +6,56 @@
BasePageTitle="Discover"
HideTabbar="true" PageTabMode="Floating">
<views:BasePage.BasePageContent>
<CollectionView ItemsLayout="{x:Static ListItemsLayout.HorizontalList}"
ItemsSource="{Binding Stories}"
ItemTemplate="{StaticResource StoryListItemTemplate}"
VerticalOptions="Start" HeightRequest="200"
Margin="20,0,0,0"/>
<ScrollView Margin="0,24,0,12">
<StackLayout Orientation="Vertical">
<Grid RowSpacing="0" ColumnSpacing="0"
Margin="24,0,24,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label Text="Stories"
Style="{StaticResource CategoryLabel}"
HorizontalOptions="StartAndExpand"
Grid.Column="0" />

<Label Text="Show all"
Style="{StaticResource CategoryLinkLabel}"
HorizontalOptions="EndAndExpand"
Grid.Column="1" />
</Grid>

<CollectionView ItemsLayout="{x:Static ListItemsLayout.HorizontalList}"
ItemsSource="{Binding Stories}"
ItemTemplate="{StaticResource StoryListItemTemplate}"
VerticalOptions="Start" HeightRequest="200"
Margin="20,0,0,0"/>

<Grid RowSpacing="0" ColumnSpacing="0"
Margin="24,0,24,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label Text="Nearby"
Style="{StaticResource CategoryLabel}"
HorizontalOptions="StartAndExpand"
Grid.Column="0" />

<Label Text="Show all"
Style="{StaticResource CategoryLinkLabel}"
HorizontalOptions="EndAndExpand"
Grid.Column="1" />
</Grid>

<CollectionView ItemsLayout="{x:Static ListItemsLayout.HorizontalList}"
ItemsSource="{Binding NearbyBirds}"
ItemTemplate="{StaticResource NearbyBirdListItemTemplate}"
VerticalOptions="Start" HeightRequest="200"
Margin="20,0,0,0"/>
</StackLayout>
</ScrollView>
</views:BasePage.BasePageContent>
</views:BasePage>
11 changes: 10 additions & 1 deletion XamarinFloatingTabs/Views/DiscoverPage.xaml.cs
Expand Up @@ -5,7 +5,8 @@ namespace XamarinFloatingTabs.Views
{
public partial class DiscoverPage : BasePage
{
public IEnumerable<Story> Stories { get; }
public IEnumerable<Story> Stories { get; }
public IEnumerable<Bird> NearbyBirds { get; }

public DiscoverPage()
{
Expand All @@ -18,6 +19,14 @@ public DiscoverPage()
new Story() { Category = "The Wilds", Title = "Why we need to save the scavengers?", ImageUrl = "http://www.birdlife.org/sites/default/files/styles/full_620x295/public/news/canada_warbler_c_jayne_gulbrand_smaller.jpg" },
new Story() { Category = "Science", Title = "Drunk birds? What is happening...", ImageUrl = "http://cdn.images.express.co.uk/img/dynamic/13/590x/549233_1.jpg" },
new Story() { Category = "The Wilds", Title = "Why we need to save the scavengers?", ImageUrl = "http://www.birdlife.org/sites/default/files/styles/full_620x295/public/news/rufous_hummingbird_selasphorus_rufus_c_ryan_bushby_1.jpg" }
};

NearbyBirds = new Bird[]
{
new Bird() { Name = "Eagle", ImageUrl = "https://www.birdlife.org/sites/default/files/styles/1600/public/lesser-spotted-eagle-johann-du-preez.png" },
new Bird() { Name = "Golden eagle", ImageUrl = "https://www.birdlife.org/sites/default/files/styles/1600/public/golden_eagle_c_marc_jones_full_size.jpg" },
new Bird() { Name = "Bald eagle", ImageUrl = "https://www.birdlife.org/sites/default/files/styles/1600/public/skeeze-pixabay-bald-eagle-977811_1280_2.jpg" },
new Bird() { Name = "Imperial eagle", ImageUrl = "https://www.birdlife.org/sites/default/files/styles/1600/public/e_imperial_eagle_flickr.jpg" }
};

BindingContext = this;
Expand Down
18 changes: 18 additions & 0 deletions XamarinFloatingTabs/XamlResources/DataTemplates.xaml
Expand Up @@ -21,4 +21,22 @@
</Frame>
</Grid>
</DataTemplate>

<DataTemplate x:Key="NearbyBirdListItemTemplate">
<Grid Padding="0,0,10,10" WidthRequest="180">
<Frame Padding="0" CornerRadius="10" HasShadow="false" BorderColor="Gray">
<Grid Padding="0" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="3*" />
</Grid.RowDefinitions>
<Image Aspect="AspectFill" Grid.Row="0" HorizontalOptions="Fill" VerticalOptions="Fill"
Source="{Binding ImageUrl}" />
<StackLayout VerticalOptions="StartAndExpand" Grid.Row="1" Padding="12">
<Label Text="{Binding Name}" Style="{StaticResource StoryTitleLabel}" />
</StackLayout>
</Grid>
</Frame>
</Grid>
</DataTemplate>
</ResourceDictionary>

0 comments on commit dd569f2

Please sign in to comment.