kira
/
MAUI_Weather
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finished visual appearance of app

This commit is contained in:
Kira 2023-08-30 14:24:52 -07:00
parent 3234ba8b2b
commit 6e69a37b2b
3 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
MAUI_Weather/MVVM/Views/WeatherView.xaml
View File

@ -11,15 +11,59 @@
<Frame/>
<SearchBar Placeholder="Search" VerticalOptions="Center"/>
</Grid>
<!-- -->
<!-- Title -->
<VerticalStackLayout Grid.Row="1" Style="{StaticResource MainStackLayout}">
<Label Text="Rome" Style="{StaticResource Title}"/>
<Label Text="November 2077"/>
</VerticalStackLayout>
<!-- Weather Preview Anim -->
<skia:SKLottieView
Grid.Row="2"
RepeatCount="-1"
Source="storm.json"/>
<!-- Weather Information -->
<Grid Grid.Row="3" ColumnDefinitions="*,*,*">
<VerticalStackLayout HorizontalOptions="Center" Spacing="10">
<Label Style="{StaticResource WeatherTitle}" Text="Temp" />
<Label Style="{StaticResource WeatherValue}" Text="60" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="1" HorizontalOptions="Center" Spacing="10">
<Label Style="{StaticResource WeatherTitle}" Text="Wind" />
<Label Style="{StaticResource WeatherValue}" Text="10mph" />
</VerticalStackLayout>
<VerticalStackLayout Grid.Column="2" HorizontalOptions="Center" Spacing="10">
<Label Style="{StaticResource WeatherTitle}" Text="Weather" />
<Label Style="{StaticResource WeatherValue}" Text="Sunny" />
</VerticalStackLayout>
</Grid>
<!-- Weather Forecast -->
<CollectionView Grid.Row="4" HorizontalOptions="Center">
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>1</x:String>
<x:String>2</x:String>
<x:String>3</x:String>
<x:String>4</x:String>
<x:String>5</x:String>
</x:Array>
</CollectionView.ItemsSource>
<CollectionView.ItemsLayout>
<LinearItemsLayout ItemSpacing="10" Orientation="Horizontal"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame Style="{StaticResource Card}">
<VerticalStackLayout Spacing="5" VerticalOptions="Center">
<skia:SKLottieView IsAnimationEnabled="False" HeightRequest="50" WidthRequest="50" Source="mist.json"/>
<Label Text="Date" TextColor="{StaticResource Yellow100Accent}"/>
<Label Text="Temp"/>
<Label Text="Sunny"/>
</VerticalStackLayout>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ContentPage>

18
MAUI_Weather/Resources/Styles/AppStyles.xaml
View File

@ -23,4 +23,22 @@
<Setter Property="FontSize" Value="Large"/>
</Style>
<Style x:Key="WeatherTitle" TargetType="Label">
<Setter Property="FontFamily" Value="RubikLight"/>
</Style>
<Style x:Key="WeatherValue" TargetType="Label">
<Setter Property="FontAttributes" Value="Bold"/>
</Style>
<Style x:Key="Card" TargetType="Frame">
<Setter Property="Padding" Value="0"/>
<Setter Property="BackgroundColor" Value="{StaticResource Cardblue}"/>
<Setter Property="BorderColor" Value="Transparent"/>
<Setter Property="CornerRadius" Value="25"/>
<Setter Property="HeightRequest" Value="150"/>
<Setter Property="WidthRequest" Value="150"/>
<Setter Property="Opacity" Value=".1"/>
</Style>
</ResourceDictionary>

1
MAUI_Weather/Resources/Styles/Colors.xaml
View File

@ -8,6 +8,7 @@
https://colorhunt.co/palette/0c134f1d267d5c469cd4adfc
-->
<Color x:Key="Darkblue">#0c134f</Color>
<Color x:Key="Cardblue">#1d267d</Color>
<Color x:Key="Lightpurple">#d4adfc</Color>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->