Welcome Page using xamarin form
Welcome page will introduce your app. This page occurs as first page of application
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoginUIDesigns.Views.Welcome.Design1"
Shell.NavBarIsVisible="False"
NavigationPage.HasNavigationBar="False"
BackgroundColor="#1C375C">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<CarouselView x:Name="cv" IsScrollAnimated="True" IndicatorView="indicatorView" Grid.Row="0" HeightRequest="400" >
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0">
<Frame HasShadow="True" BackgroundColor="#FFFDFF" BorderColor="LightGray" CornerRadius="20" Margin="20"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout>
<Image Source="{Binding Img}" IsAnimationPlaying="True" HeightRequest="300" Aspect="AspectFit" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
<Label Text="{Binding Name}" HorizontalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView" Grid.Row="0" IndicatorColor="LightGray" VerticalOptions="EndAndExpand"
SelectedIndicatorColor="Black" IndicatorSize="8" HorizontalOptions="Center"/>
<Grid Padding="20,30,20,0" RowSpacing="10" Grid.Row="1" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="Welcome to Gym Spot" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="25"/>
<Label Grid.Row="1" Grid.ColumnSpan="3" Text="Seven's workouts are based on scientific studies to provide the maximum benefit in the shortest time possible. Tailor-made workouts target your goal areas to make sure you get the most out of your training. Getting fit has never been this easy - or this much fun! Seven is a PT in your pocket, motivating you to come back." HorizontalOptions="FillAndExpand" TextColor="White" FontSize="14"/>
<Button Text="Login" TextColor="#1C375C" Grid.Row="2" HeightRequest="40" Grid.Column="0" BackgroundColor="White" CornerRadius="20"></Button>
<Button Text="Register" TextColor="#1C375C" Grid.Row="2" HeightRequest="10" Grid.Column="1" BackgroundColor="White" CornerRadius="20"></Button>
</Grid>
<Path Grid.Row="2" VerticalOptions="EndAndExpand" Data="m333.5114,204.27502l115.48359,-59l-0.00813,123.08816c-101.06176,0.76114 -113.03789,-0.51177 -246.99185,-0.49297l131.51639,-63.59519z"
Stroke="white" Fill="white" HeightRequest="143" Aspect="Fill" ></Path>
</Grid>
</ContentPage.Content>
</ContentPage> .cs Code
public partial class Design1 : ContentPage
{
public Design1()
{
InitializeComponent();
var list = new ExerciseModel().Get();
cv.ItemsSource = list;
}
} Design 2
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoginUIDesigns.Views.Welcome.Design2"
Shell.NavBarIsVisible="False"
NavigationPage.HasNavigationBar="False"
BackgroundColor="#1C375C">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image Source="exercise.gif" Grid.Row="0" IsAnimationPlaying="True" HeightRequest="350" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
<Grid Padding="20,30,20,0" RowSpacing="10" Grid.Row="1" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Text="Welcome to Gym Spot" Grid.Row="0" Grid.ColumnSpan="3" HorizontalOptions="FillAndExpand" TextColor="White" FontSize="25"/>
<Label Grid.Row="1" Grid.ColumnSpan="3" Text="Seven's workouts are based on scientific studies to provide the maximum benefit in the shortest time possible. Tailor-made workouts target your goal areas to make sure you get the most out of your training. Getting fit has never been this easy - or this much fun! Seven is a PT in your pocket, motivating you to come back every day with achievements, daily challenges and more." HorizontalOptions="FillAndExpand" TextColor="White" FontSize="14"/>
<Button Text="Login" Margin="0,10,0,0" TextColor="#1C375C" Grid.Row="2" HeightRequest="40" Grid.Column="0" BackgroundColor="White" CornerRadius="20"></Button>
<Button Text="Register" Margin="0,10,0,0" TextColor="#1C375C" Grid.Row="2" HeightRequest="40" Grid.Column="1" BackgroundColor="White" CornerRadius="20"></Button>
</Grid>
<Path Margin="0" Grid.Row="2" VerticalOptions="EndAndExpand" Data="m333.5114,204.27502l115.48359,-59l-0.00813,123.08816c-101.06176,0.76114 -113.03789,-0.51177 -246.99185,-0.49297l131.51639,-63.59519z"
Stroke="white" Fill="white" HeightRequest="143" Aspect="Fill" ></Path>
</Grid>
</ContentPage.Content>
</ContentPage> Design 3
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="LoginUIDesigns.Views.Welcome.Design3"
Shell.NavBarIsVisible="False"
NavigationPage.HasNavigationBar="False"
BackgroundColor="#FFFDFF">
<ContentPage.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="StartAndExpand" Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<CarouselView Grid.Row="0" Grid.ColumnSpan="3" VerticalOptions="FillAndExpand" HeightRequest="700" x:Name="cv" IsScrollAnimated="True" IndicatorView="indicatorView" >
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0">
<Image Source="{Binding Img}" IsAnimationPlaying="True" HeightRequest="400" Aspect="AspectFit" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand"/>
<Label Text="{Binding Name}" HorizontalOptions="Start" Margin="20,0" FontSize="20" FontAttributes="Bold" TextColor="#1C375C" />
<Label Text="{Binding Description}" Margin="20" TextColor="#1C375C" FontSize="16" HorizontalOptions="Center" VerticalOptions="StartAndExpand" />
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
<IndicatorView x:Name="indicatorView" Grid.Row="1" Grid.Column="1" IndicatorColor="LightGray" VerticalOptions="CenterAndExpand"
SelectedIndicatorColor="Black" IndicatorSize="8" HorizontalOptions="Center"/>
<Button Text="Skip" TextColor="#1C375C" Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" HeightRequest="40" BackgroundColor="White" CornerRadius="20"></Button>
<Button Text="Next" TextColor="#1C375C" Grid.Row="1" Grid.Column="2" VerticalOptions="CenterAndExpand" HeightRequest="40" BackgroundColor="White" CornerRadius="20"></Button>
</Grid>
</ContentPage.Content>
</ContentPage> .cs Code
public partial class Design3 : ContentPage
{
public Design3()
{
InitializeComponent();
var list = new ExerciseModel().Get();
cv.ItemsSource = list;
//Device.StartTimer(TimeSpan.FromSeconds(2), (Func<bool>)(() =>
//{
// cv.Position = (cv.Position + 1) % list.Count;
// return true;
//}));
}
} For more detail click here
Conclusion:
Today we learn Welcome page. Please share your feedback in comment section.
Comments
Post a Comment