Wednesday 25 October 2017

Xamarin Forms StarWars Intro Labels and Attributes [Tutorial 7]




Step1: App.Xaml

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StarWars.App">
<Application.Resources>

        <ResourceDictionary>
             <!--Text Color-->
            <Color x:Key="TextColor">#ffd700</Color> <!--StarwarsIntroColor-->

            <!--  Customized font  -->
            <OnPlatform x:Key="RegularFontFamily" x:TypeArguments="x:String">
                <On Platform="iOS">HelveticaNeue</On>
                <On Platform="Android">sans-serif</On>
            </OnPlatform>
   
            <!--  font sizes  -->
            <x:Double x:Key="TitleFont">20</x:Double>



            <x:String x:Key="WarsText">
                It is a period of civil war.
The Star Wars 
'opening crawl'
is one of the first truly
great things about the 
Star Wars films.

While not an original
movie making concept
(Flash Gordon has that
claim, we believe) it
made the idea very
popular and is these
days is expected as
part of the opening
of every Star Wars film.

Many other works have
sort to emulate or
parody the concept
of the opening words
scroll.

Each crawl's prologue
gives a quick explanation
of the most immediate
events leading up to
the start of the film.

While the text is
crawling up the screen,
John Williams' famous
Star Wars theme is
blasting it's familiar
notes, creating an
attention grabbing
start to the film.

The font of the crawl
has also become quite 
iconic and adopted by
many designers.

Here's the opening
text to each film.
Note the animated
Clone Wars movie
did not have a word
crawl, nor did Rogue One.

 </x:String>


            <!--  styles  -->
            <Style x:Key="TextFontAttributes" TargetType="Label">
                <Setter Property="TextColor" Value="{StaticResource TextColor}" />
         
                <Setter Property="FontFamily" Value="{StaticResource RegularFontFamily}" />
        
                <Setter Property="FontSize" Value="{StaticResource TitleFont}" />
    
            </Style>


        </ResourceDictionary>

 </Application.Resources> 
</Application>

Step2:
App.Xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace StarWars
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();

            MainPage = new StarWars.MainPage();
        }

        protected override void OnStart()
        {
            // Handle when your app starts
        }

        protected override void OnSleep()
        {
            // Handle when your app sleeps
        }

        protected override void OnResume()
        {
            // Handle when your app resumes
        }
    }
}

Step3:
MainPage.Xaml

<?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:local="clr-namespace:StarWars"
             x:Class="StarWars.MainPage">
  <Grid>
        <Image Source="mystars.jpg" Aspect="AspectFill" HorizontalOptions="Fill" VerticalOptions="Fill"/>
        <ScrollView Orientation="Vertical" RotationX="16" Padding="0,700,0,0">
            <Label x:Name="Text" Style="{StaticResource TextFontAttributes}" Text="{StaticResource WarsText}"  HorizontalOptions="Fill" XAlign="Center"/>
        </ScrollView>
    </Grid>
    <!--<ContentPage.Resources>
        <ResourceDictionary>
           
        </ResourceDictionary>
    </ContentPage.Resources>-->
 
</ContentPage>
Step4:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace StarWars
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Step-5 : Hola!!! our Tutorial Gets Over Thanks For Watching....

No comments:

Post a Comment