Skip to content

Visual Challenge - Simple Habit Discovery Screen UI #41

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Visual Challenge - Simple Habit Discovery Screen UI #41

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions VisualChallenge/VisualChallenge/App.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,24 @@
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="VisualChallenge.App">
<Application.Resources>
<Style x:Key="LabelTitleStyle" TargetType="Label" >
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="Margin" Value="20,0" />
<Setter Property="FontAttributes" Value="Bold" />

</Style>

<Style x:Key="LabelSubtitleStyle" TargetType="Label" >
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="Medium" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>

<Style x:Key="LabelRegularStyle" TargetType="Label" >
<Setter Property="TextColor" Value="White" />
<Setter Property="FontSize" Value="Small" />
</Style>

</Application.Resources>
</Application>
2 changes: 1 addition & 1 deletion VisualChallenge/VisualChallenge/AppShell.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
-->
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Color x:Key="NavigationPrimary">#232C39</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.ShellBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.ShellForegroundColor" Value="White" />
Expand Down
10 changes: 10 additions & 0 deletions VisualChallenge/VisualChallenge/Model/Habit.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
using System;
namespace VisualChallenge.Model
{
public class Habit
{
public string Title { get; set; }
public string Time { get; set; }
public string Photo { get; set; }
}
}
3 changes: 3 additions & 0 deletions VisualChallenge/VisualChallenge/VisualChallenge.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,7 @@
<DependentUpon>VisualChallengePage.xaml</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<Folder Include="Model\" />
</ItemGroup>
</Project>
104 changes: 95 additions & 9 deletions VisualChallenge/VisualChallenge/VisualChallengePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,108 @@
<?xml version="1.0" encoding="utf-8" ?>
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
x:Class="VisualChallenge.VisualChallengePage"
Shell.NavBarIsVisible="True"
BackgroundColor="White"
Shell.NavBarIsVisible="False"
BackgroundColor="#1D232E"
Title="Visual Challenge"
>

<!-- If you decide to change out the flexlayout leave the scroll view here
Currently there's a bug in shell that will set margins wrong if the content is not in a scrollview
-->
<ScrollView>
<FlexLayout Margin="20" Direction="Column" AlignContent="Center" JustifyContent="SpaceAround">

<Label Text="Start Here" FontSize="24" HorizontalTextAlignment="Center"/>

<Button Text="Read More About Visual" Clicked="Button_Clicked" />
<FlexLayout Padding="0,20" Direction="Column" AlignContent="Center" JustifyContent="Start">
<Grid RowSpacing="25">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.4*" />
<RowDefinition Height="0.4*" />
<RowDefinition Height="0.4*" />
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<Label Style="{StaticResource LabelTitleStyle}" Text="Featured" />
<ScrollView Orientation="Horizontal">
<StackLayout Padding="20,0" Spacing="15" Orientation="Horizontal" BindableLayout.ItemsSource="{Binding Featured}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout WidthRequest="150">
<Frame HeightRequest="150" Padding="0" BackgroundColor="Black" >
<StackLayout>
<Image Opacity="0.7"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="{Binding Photo}"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill" />
</StackLayout>
</Frame>
<Label Text="{Binding Title}"
Style="{StaticResource LabelSubtitleStyle}" />
<Label Text="{Binding Time}"
Style="{StaticResource LabelRegularStyle}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout Grid.Row="1">
<Label Style="{StaticResource LabelTitleStyle}" Text="Night Meditations" />
<ScrollView Orientation="Horizontal">
<StackLayout Padding="20,0" Spacing="15" Orientation="Horizontal" BindableLayout.ItemsSource="{Binding NightMeditations}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout WidthRequest="150">
<Frame HeightRequest="150" Padding="0" BackgroundColor="Black">
<StackLayout>
<Image Opacity="0.7"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="{Binding Photo}"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill"/>
</StackLayout>
</Frame>
<Label Text="{Binding Title}"
Style="{StaticResource LabelSubtitleStyle}" />
<Label Text="{Binding Time}"
Style="{StaticResource LabelRegularStyle}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout Grid.Row="2">
<Label Style="{StaticResource LabelTitleStyle}" Text="Night Meditations" />
<ScrollView Orientation="Horizontal">
<StackLayout Padding="20,0" Spacing="15" Orientation="Horizontal" BindableLayout.ItemsSource="{Binding Anxiety}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout WidthRequest="150">
<Frame HeightRequest="150" Padding="0" BackgroundColor="Black">
<StackLayout>
<Image Opacity="0.7"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="{Binding Photo}"
AbsoluteLayout.LayoutFlags="All"
Aspect="AspectFill"/>
</StackLayout>
</Frame>
<Label Text="{Binding Title}"
Style="{StaticResource LabelSubtitleStyle}" />
<Label Text="{Binding Time}"
Style="{StaticResource LabelRegularStyle}" />
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
</Grid>

</FlexLayout>
</ScrollView>
Expand Down
1 change: 1 addition & 0 deletions VisualChallenge/VisualChallenge/VisualChallengePage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ public partial class VisualChallengePage : ContentPage
public VisualChallengePage()
{
InitializeComponent();
BindingContext = new VisualChallengePageViewModel();
}

private void Button_Clicked(object sender, EventArgs e)
Expand Down
63 changes: 63 additions & 0 deletions VisualChallenge/VisualChallenge/VisualChallengePageViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
using System;
using System.Collections.ObjectModel;
using VisualChallenge.Model;

namespace VisualChallenge
{
public class VisualChallengePageViewModel
{
public ObservableCollection<Habit> Featured { get; set; }
public ObservableCollection<Habit> NightMeditations { get; set; }

public ObservableCollection<Habit> Anxiety { get; set; }
public VisualChallengePageViewModel()
{
Featured = new ObservableCollection<Habit>
{
new Habit { Title = "Seeing The Good In Others", Time = "10 mins", Photo = Photo1},
new Habit { Title = "Forgiveness", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Embracing Life Transitions", Time = "5 mins" , Photo = Photo3},
new Habit { Title = "One Minute Breaks", Time = "1 mins", Photo = Photo1},
new Habit { Title = "Mindful Parenting", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Money Worries", Time = "5 mins", Photo = Photo3},
new Habit { Title = "Overthinking", Time = "5 mins", Photo = Photo1},
new Habit { Title = "Manifest Your Dreams", Time = "10 mins", Photo = Photo2},
new Habit { Title = "Unlock Your Full Potential", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Work Anxiety", Time = "5 mins", Photo = Photo3}
};

NightMeditations = new ObservableCollection<Habit>
{
new Habit { Title = "Seeing The Good In Others", Time = "10 mins", Photo = Photo1},
new Habit { Title = "Forgiveness", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Embracing Life Transitions", Time = "5 mins" , Photo = Photo3},
new Habit { Title = "One Minute Breaks", Time = "1 mins", Photo = Photo1},
new Habit { Title = "Mindful Parenting", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Money Worries", Time = "5 mins", Photo = Photo3},
new Habit { Title = "Overthinking", Time = "5 mins", Photo = Photo1},
new Habit { Title = "Manifest Your Dreams", Time = "10 mins", Photo = Photo2},
new Habit { Title = "Unlock Your Full Potential", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Work Anxiety", Time = "5 mins", Photo = Photo3}
};

Anxiety = new ObservableCollection<Habit>
{
new Habit { Title = "Seeing The Good In Others", Time = "10 mins", Photo = Photo1},
new Habit { Title = "Forgiveness", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Embracing Life Transitions", Time = "5 mins" , Photo = Photo3},
new Habit { Title = "One Minute Breaks", Time = "1 mins", Photo = Photo1},
new Habit { Title = "Mindful Parenting", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Money Worries", Time = "5 mins", Photo = Photo3},
new Habit { Title = "Overthinking", Time = "5 mins", Photo = Photo1},
new Habit { Title = "Manifest Your Dreams", Time = "10 mins", Photo = Photo2},
new Habit { Title = "Unlock Your Full Potential", Time = "5 mins", Photo = Photo2},
new Habit { Title = "Work Anxiety", Time = "5 mins", Photo = Photo3}
};

}

private const string Photo1 = "https://www.freeaudiolibrary.com/img/cms/jetty-1373173_640.jpg";
private const string Photo2 = "https://www.freeaudiolibrary.com/img/leoblog/b/lg-b-musica%20sin%20copyright.png";
private const string Photo3 = "https://www.bensound.com/bensound-img/relaxing.jpg";
}
}