這份筆記將會記錄如何在新建專案的時候，配合 Grial UIKit 這個 Xamarn.Forms 的 UI 設計支援套件，讓 Xamarin.Forms 的開發者可以快速的開發出漂亮、專案與實用的 Xamarin.Forms 應用程式。

由於要使用 Grial UI Kit 套件，需要做許多初始設定工作與設定的動作，因此，請參考這份文件就可以順利做出。

建立 Xamarin.Forms 專案

開啟 Visual Studio 2015，點選功能表 檔案 > 新增 > 專案，在 新增專案 對話窗，點選 Prism >Prism Unity App (Forms)，在下方名稱欄位輸入 XFGrial
在 Prism for Xamarin.Forms - Project Wizard 對話窗，點選 Android 與 iOS，最後點選 Create按鈕。

您只能夠選擇 Android & iOS 專案，這是因為 Grial UI Kit 僅僅支援這兩個平台

另外，Grial UI Kit 將會針對 Android 5.0+ (API Level 21) 版本進行最佳化和 iOS 8.0+

不過， Android 4.2.2+ (API Level 17+) 也是有支援的

Grial UI Kit 初始化

目錄建立

請依序在底下專案建立新的資料夾

核心 PCL 專案

Helpers

Models
Android 專案

Renderers
iOS 專案

Renderers

加入參考組件

請將您購買取得的 Grial UI Kit 產品內所附的組件，依序加入到底下專案內

核心 PCL 專案

UXdivers.Artina.Grial.dll

Android 專案

UXdivers.Artina.Grial.dll

UXdivers.Artina.Grial.Droid.dll

iOS 專案

UXdivers.Artina.Grial.dll

UXdivers.Artina.Grial.iOS.dll

主題和品牌 Theme / branding

底下的步驟，將會進行核心PCL與原生專案的主題佈景樣式的系統設定

核心PCL專案

建立 ExportedColors 類別

滑鼠右擊 PCL核心專案，選取 加入 > 新增項目

在 加入新項目 對話窗內，點選 Visual C# > 類別，在底下名稱欄位中，輸入 ExportedColors，最後點選 新增 按鈕。

在新產生的檔案內，將其 ExportedColors 類別定義，使用底下程式碼取代

    public static class ExportedColors
    {

        public static readonly Color AccentColor = Color.FromRgba(218, 18, 95, 255);

        public static readonly Color InverseTextColor = Color.FromRgba(255, 255, 255, 255);

    }

加入全域樣式宣告

在核心PCL專案內，開啟 App.xaml 檔案，請將這個檔案的標記宣告內容，使用底下 XAML 語言取代。

不過，請記得要更先 x:Class="XFGrial.App" 命名空間定義

成為您實際建立專案的命名空間

<?xml version="1.0" encoding="utf-8" ?>
<prism:PrismApplication xmlns="http://xamarin.com/schemas/2014/forms"
                        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                        xmlns:prism="clr-namespace:Prism.Unity;assembly=Prism.Unity.Forms"
                        x:Class="XFGrial.App"
                        xmlns:mark="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
                        xmlns:artina="clr-namespace:UXDivers.Artina.Shared;assembly=UXDivers.Artina.Shared"
                        xmlns:converters="clr-namespace:UXDivers.Artina.Grial;assembly=UXDivers.Artina.Grial">

  <Application.Resources>

    <!-- http://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/styles/ -->

    <ResourceDictionary>
      <!-- 

                EXPORTED COLORS

                Everytime you change any of the exported colors
                you MUST compile (Right click on "Colors.tt" > Tools > Process T4 Templates)
                to see your changes on your App
            -->
      <!-- Export AccentColor -->
      <!--<Color x:Key="AccentColor">#FFDA1200</Color>-->
      <Color x:Key="AccentColor">#FFDA125F</Color>
      <!-- Export InverseTextColor -->
      <Color x:Key="InverseTextColor">White</Color>




      <!-- COLORS -->
      <Color x:Key="BrandColor">#ad1457</Color>
      <Color x:Key="BrandColorLight">#ec407a</Color>
      <Color x:Key="BrandColorLighter">#f06292</Color>
      <Color x:Key="BrandColorDark">#c2185b</Color>
      <Color x:Key="BrandColorDarker">#ad1457</Color>

      <!-- COMPLEMENT COLORS -->
      <Color x:Key="ComplementColor">#384f63</Color>
      <Color x:Key="ComplementColorDark">#272f36</Color>
      <Color x:Key="ComplementColorDarker">#1f252a</Color>
      <Color x:Key="TranslucidBlack">#44000000</Color>
      <Color x:Key="TranslucidWhite">#22ffffff</Color>

      <!-- INDICATOR COLORS -->
      <Color x:Key="OkColor">#22c064</Color>
      <Color x:Key="ErrorColor">Red</Color>
      <Color x:Key="WarningColor">#ffc107</Color>


      <Color x:Key="SecondaryColor">#54B9ED</Color>
      <Color x:Key="FacebookColor">#3e549c</Color>
      <Color x:Key="ComplentColor">#FF009966</Color>

      <Color x:Key="SaveButtonColor">#22c064</Color>
      <Color x:Key="DeleteButtonColor">#D50000</Color>

      <Color x:Key="LabelButtonColor">#ffffff</Color>

      <Color x:Key="PlaceholderColor">#22ffffff</Color>
      <Color x:Key="PlaceholderColorEntry">#77FFFFFF</Color>
      <Color x:Key="MainMenuBackgroundColor">#283441</Color>
      <Color x:Key="MainMenuSeparatorColor">#253642</Color>
      <Color x:Key="ListViewSeparatorColor">#77CCCCCC</Color>
      <Color x:Key="LightBorderColor">#FFF</Color>

      <Color x:Key="WalkthroughStepBackgroundColor1">#1CBCB4</Color>
      <Color x:Key="WalkthroughStepIconColor1">#FFF</Color>

      <Color x:Key="ArtinaEntryBorderBotomColor">#2C2F35</Color>

      <Color x:Key="CategoryColor1">#FF0000</Color>
      <Color x:Key="ListViewItemTextColor">#FF212121</Color>





      <!-- BASE COLORS AND UNITS VALUES -->
      <Color x:Key="BaseTextColor" >#37474f</Color>
      <x:Double x:Key="BaseFontSize">16</x:Double>
      <x:Double x:Key="BaseButtonHeight">44</x:Double>
      <x:Double x:Key="BaseButtonBorderRadius">22</x:Double>


      <x:Double x:Key="MainMenuLabelFontsize">18</x:Double>
      <x:Double x:Key="MainMenuIconFontsize">20</x:Double>
      <x:Double x:Key="MainMenuHeaderFontsize">18</x:Double>
      <x:Double x:Key="MainMenuLabelTranslationX">10</x:Double>
      <x:Double x:Key="MainMenuChevronRightFontsize">24</x:Double>
      <x:Double x:Key="MainMenuIconWidthRequest">22</x:Double>

      <x:String x:Key="AboutPageURL">http://www.uxdivers.com</x:String>
      <x:String x:Key="AboutPageTitle">Made by UXDivers</x:String>

      <!-- STATIC IMAGES -->
      <FileImageSource x:Key="HamburguerIcon" File="hamburguer_icon.png" />
      <FileImageSource x:Key="WelcomeBackgroundImage" File="welcome_bg.jpg" />

      <FileImageSource x:Key="BrandImage" File="logo.png" />

      <FileImageSource x:Key="LoginBackgroundImage" File="signup_bg.jpg" />
      <FileImageSource x:Key="SignUpBackgroundImage" File="signup_bg.jpg" />
      <FileImageSource x:Key="PasswordRecoveryBackgroundImage" File="signup_bg.jpg" />

      <FileImageSource x:Key="WalkthroughStepBackgroundImage0" File="walkthrough_bg_0.png" />
      <FileImageSource x:Key="WalkthroughStepBackgroundImage1" File="walkthrough_bg_1.png" />
      <FileImageSource x:Key="WalkthroughStepBackgroundImage2" File="walkthrough_bg_2.png" />
      <FileImageSource x:Key="WalkthroughStepGenericPhoneBackgroundImage" File="walkthrough_generic_phone_bg" />

      <FileImageSource x:Key="ThemeAvatarSample0Image" File="user_profile_0.jpg" />
      <FileImageSource x:Key="ThemeAvatarSample1Image" File="user_profile_1.jpg" />

      <FileImageSource x:Key="SocialHeaderBackgroundImage0" File="social_header_bg_0.jpg" />
      <FileImageSource x:Key="SocialHeaderBackgroundImage1" File="social_header_bg_1.jpg" />


      <!-- IMPLICIT STYLES -->
      <Style TargetType="Frame">
        <Setter Property="OutlineColor" Value="{StaticResource BrandColor}" />
      </Style>

      <Style TargetType="Entry">
        <Setter Property="TextColor" Value="{StaticResource BaseTextColor}" />
      </Style>

      <Style TargetType="ActivityIndicator">
        <Setter Property="Color" Value="{StaticResource AccentColor}" />
      </Style>

      <Style TargetType="ContentPage">
        <Setter Property="BackgroundColor" Value="White" />
      </Style>

      <Style TargetType="ContentView">
        <Setter Property="BackgroundColor" Value="White" />
      </Style>

      <Style TargetType="ScrollView">
        <Setter Property="BackgroundColor" Value="Transparent" />
      </Style>

      <Style TargetType="Label">
        <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
        <Setter Property="TextColor" Value="{StaticResource BaseTextColor}" />
      </Style>

      <Style TargetType="ListView">
        <Setter Property="BackgroundColor" Value="Transparent" />
        <Setter Property="SeparatorColor" Value="{StaticResource ListViewSeparatorColor}" />
        <Setter Property="SeparatorVisibility" Value="Default" />
      </Style>

      <Style TargetType="TableView">
        <Setter Property="BackgroundColor" Value="Transparent" />
        <Setter Property="artina:TableViewProperties.HeaderFooterTextColor" Value="{StaticResource AccentColor}"/>
      </Style>



      <Style TargetType="ProgressBar">
        <Setter Property="artina:ProgressBarProperties.TintColor" Value="{StaticResource AccentColor}"/>
      </Style>

      <Style TargetType="Slider">
        <Setter Property="artina:SliderProperties.TintColor" Value="{StaticResource AccentColor}"/>
      </Style>


      <Style TargetType="TextCell">
        <Setter Property="TextColor" Value="{ StaticResource AccentColor }" />
      </Style>

      <Style TargetType="Button">
        <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
        <Setter Property="BorderRadius" Value="22" />
        <Setter Property="BorderWidth"    Value="0" />
        <Setter Property="BorderColor"    Value="Transparent" />
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>

        <!-- 
                Mimic Android Buttons background color 
                If no background color is set, 
                the button won't render with height as specified here
                -->
        <Setter Property="BackgroundColor">
          <Setter.Value>
            <OnPlatform x:TypeArguments="Color" Android="#d6d6d6" />
          </Setter.Value>
        </Setter>
      </Style>

      <Style TargetType="artina:Button">
        <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
        <Setter Property="BorderRadius" Value="22" />
        <Setter Property="BorderWidth"    Value="0" />
        <Setter Property="BorderColor"    Value="Transparent" />
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>

        <!-- 
                Mimic Android Buttons background color 
                If no background color is set, 
                the button won't render with height as specified here
                -->
        <Setter Property="BackgroundColor">
          <Setter.Value>
            <OnPlatform x:TypeArguments="Color" Android="#d6d6d6" />
          </Setter.Value>
        </Setter>
      </Style>

      <!-- BASE STYLES -->
      <Style x:Key="FontIcon" TargetType="Label">
        <Setter Property="FontFamily" Value="{x:Static artina:FontAwesome.FontName}" />
      </Style>


      <Style x:Key="RoundedButtonStyle" TargetType="Button">
        <Setter Property="FontSize" Value="{StaticResource BaseFontSize}" />
        <Setter Property="BorderRadius" Value="22" />
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
      </Style>

      <Style x:Key="Horizontal1ptLineStyle" TargetType="BoxView">
        <Setter Property="HeightRequest" Value="1"/>
        <Setter Property="BackgroundColor" Value="#eee" />
      </Style>

      <Style x:Key="StatusLabelStyle" TargetType="Label" >
        <Setter Property="Text" Value=" AVAILABLE " />
        <Setter Property="VerticalOptions" Value="End" />
        <Setter Property="HorizontalOptions" Value="Start"/>
        <Setter Property="FontSize" Value="14"/>
      </Style>

      <!-- SPECIFIC STYLES -->
      <Style x:Key="IconCloseLabelStyle" TargetType="Label" BasedOn="{StaticResource FontIcon}">
        <Setter Property="FontSize" Value="20"/>
        <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
        <Setter Property="VerticalOptions" Value="FillAndExpand"/>
        <Setter Property="Text" Value="&#xf00d;"/>
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="VerticalTextAlignment" Value="Center"/>
        <Setter Property="TextColor" Value="White"/>
        <Setter Property="HeightRequest" Value="30"/>
        <Setter Property="WidthRequest" Value="30"/>
      </Style>

      <Style x:Key="IconBackLabelStyle" TargetType="Label" BasedOn="{StaticResource IconCloseLabelStyle}">
        <Setter Property="Text" Value="&#xf104;"/>
      </Style>

      <!-- COMMON -->
      <Style x:Key="AvailableStatusStyle" TargetType="Label" BasedOn="{StaticResource StatusLabelStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource OkColor}"/>
        <Setter Property="TextColor" Value="White"/>
      </Style>

      <!-- MAIN MENU STYLES -->
      <Style x:Key="MainMenuStyle" TargetType="ContentPage" >
        <Setter Property="BackgroundColor" Value="{StaticResource MainMenuBackgroundColor}"/>
      </Style>

      <Style x:Key="MainMenuListViewStyle" TargetType="ListView">
        <Setter Property="BackgroundColor" Value="{StaticResource MainMenuBackgroundColor}"/>
        <Setter Property="SeparatorVisibility" Value="Default" />
        <Setter Property="SeparatorColor" Value="{StaticResource MainMenuSeparatorColor}" />
        <Setter Property="RowHeight" Value="44"/>
      </Style>

      <Style x:Key="MainMenuIconStyle" TargetType="Label" >
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontFamily" Value="{x:Static artina:FontAwesome.FontName}" />
        <Setter Property="FontSize" Value="{StaticResource MainMenuIconFontsize }"/>
        <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
      </Style>

      <Style x:Key="MainMenuHeaderStyle" TargetType="Label" >
        <Setter Property="BackgroundColor" Value="{StaticResource MainMenuBackgroundColor}"/>
        <Setter Property="TextColor" Value="White" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="FontSize" Value="{StaticResource MainMenuHeaderFontsize }"/>
        <Setter Property="FontAttributes" Value="Bold"/>
      </Style>

      <Style x:Key="MainMenu_Label_Style" TargetType="Label" >
        <Setter Property="TextColor" Value="White" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="TranslationX" Value="{StaticResource MainMenuLabelTranslationX}"/>
        <Setter Property="FontSize" Value="{StaticResource MainMenuLabelFontsize}"/>
        <Setter Property="HorizontalOptions" Value="StartAndExpand"/>
        <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
      </Style>

      <Style x:Key="MainMenu_Right_Chevron_Style" TargetType="Label" BasedOn="{StaticResource FontIcon}">
        <Setter Property="TextColor" Value="White" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="FontSize" Value="{StaticResource MainMenuChevronRightFontsize}"/>
        <Setter Property="HorizontalOptions" Value="End"/>
      </Style>


      <!-- LOGINS STYLES -->
      <Style x:Key="PrimaryActionButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource AccentColor}"/>
        <Setter Property="TextColor" Value="{StaticResource LabelButtonColor}"/>
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
      </Style>

      <Style x:Key="SecondaryActionButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource ComplementColor}"/>
        <Setter Property="TextColor" Value="{StaticResource LabelButtonColor}"/>
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
      </Style>

      <Style x:Key="TransparentButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
        <Setter Property="BackgroundColor" Value="Transparent"/>
        <Setter Property="TextColor" Value="{StaticResource LabelButtonColor}"/>
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
      </Style>

      <!-- ENTRY FIELDS -->
      <Style x:Key="ArtinaEntryStyle" TargetType="Entry">
        <Setter Property="TextColor" Value="White" />
        <Setter Property="artina:EntryProperties.BorderStyle" Value="BottomLine"/>
        <Setter Property="artina:EntryProperties.BorderWidth" Value="1"/>
        <Style.Triggers>
          <Trigger TargetType="Entry"
                        Property="IsFocused" Value="True">
            <Setter Property="artina:EntryProperties.BorderColor" Value="{StaticResource AccentColor}" />
          </Trigger>
        </Style.Triggers>
      </Style>

      <Style x:Key="LoginEntryStyle" TargetType="Entry">
        <Setter Property="TextColor" Value="White" />
        <Setter Property="BackgroundColor" Value="Transparent"/>
      </Style>

      <Style x:Key="ArtinaLoginEntryStyle" TargetType="Entry" BasedOn="{ StaticResource LoginEntryStyle }" >
        <Setter Property="artina:EntryProperties.BorderStyle" Value="BottomLine"/>
        <Setter Property="artina:EntryProperties.BorderColor" Value="{ StaticResource TranslucidWhite }"/>
        <Setter Property="artina:EntryProperties.PlaceholderColor" Value="{ StaticResource PlaceholderColorEntry }"/>
        <Style.Triggers>
          <Trigger TargetType="Entry"
                        Property="IsFocused" Value="True">
            <Setter Property="artina:EntryProperties.BorderColor" Value="{ StaticResource AccentColor }" />
          </Trigger>
        </Style.Triggers>
      </Style>

      <!-- VALIDATIONS -->
      <Style x:Key="ValidationEntryErrorStyle" TargetType="Label" >
        <Setter Property="BackgroundColor" Value="{ StaticResource ErrorColor }" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontSize" Value="12" />
      </Style>

      <Style x:Key="ValidationEntryWarningStyle" TargetType="Label" >
        <Setter Property="BackgroundColor" Value="{ StaticResource WarningColor }" />
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontSize" Value="12" />
      </Style>


      <!-- WALKTHROUGH -->
      <Style x:Key="WalkthroughStepBaseStyle" TargetType="ContentPage">
        <Setter Property="BackgroundColor" Value="{StaticResource BrandColor}"/>
      </Style>

      <Style x:Key="WalkthroughStepStyle" TargetType="ContentPage" BasedOn="{StaticResource WalkthroughStepBaseStyle}">
        <Setter Property="Opacity" Value="1"/>
      </Style>

      <Style x:Key="WalkthroughStepIconStyle" TargetType="Label" BasedOn="{StaticResource FontIcon}">
        <Setter Property="HorizontalTextAlignment" Value="Center"/>
        <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
        <Setter Property="FontSize" Value="72"/>
        <Setter Property="TextColor" Value="White" />
      </Style>

      <!-- SETTINGS -->
      <Style x:Key="SaveButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource SaveButtonColor}"/>
        <Setter Property="TextColor" Value="#FFF"/>
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
      </Style>

      <Style x:Key="DeleteButtonStyle" TargetType="Button" BasedOn="{StaticResource RoundedButtonStyle}">
        <Setter Property="BackgroundColor" Value="{StaticResource DeleteButtonColor}"/>
        <Setter Property="TextColor" Value="#FFF"/>
        <Setter Property="HeightRequest" Value="{StaticResource BaseButtonHeight}"/>
      </Style>

      <!-- SOCIAL -->
      <Style x:Key="SocialHeaderStyle" TargetType="Label" >
        <Setter Property="TranslationX" Value="20"/>
        <Setter Property="VerticalOptions" Value="CenterAndExpand"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="HeightRequest" Value="46" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="TextColor" Value="#FF1C1C1C"/>
      </Style>

      <Style x:Key="SocialHeaderStyleBorderBottomStyle" TargetType="Label" >
        <Setter Property="HeightRequest" Value="1" />
        <Setter Property="BackgroundColor" Value="#FFAAAAAA"/>
      </Style>


      <Style x:Key="ToolbarStyle" TargetType="Grid">
        <Setter Property="HeightRequest" Value="60"/>
        <Setter Property="ColumnSpacing" Value="0"/>
      </Style>

      <!-- BRAND BLOCK -->
      <Style x:Key="BrandContainerStyle" TargetType="StackLayout" >
        <Setter Property="HorizontalOptions" Value="Start"/>
        <Setter Property="VerticalOptions" Value="Start"/>
      </Style>

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

      <Style x:Key="BrandNameOrnamentStyle" TargetType="BoxView" >
        <Setter Property="HeightRequest" Value="4"/>
        <Setter Property="VerticalOptions" Value="End"/>
        <Setter Property="HorizontalOptions" Value="Start"/>
        <Setter Property="WidthRequest" Value="40" />
        <Setter Property="BackgroundColor" Value="{StaticResource BrandColor}" />
      </Style>

      <!-- LAYOUT HELPERS -->
      <Style x:Key="Spacer" TargetType="BoxView">
        <Setter Property="BackgroundColor" Value="Transparent"/>
      </Style>

      <Style x:Key="SpacerThemeShowCaseStyle" TargetType="BoxView" BasedOn="{ StaticResource Spacer }">
        <Setter Property="HeightRequest" Value="20"/>
      </Style>

      <Style x:Key="HorizontalRuleStyle" TargetType="BoxView">
        <Setter Property="BackgroundColor" Value="{StaticResource AccentColor}"/>
        <Setter Property="HeightRequest" Value="1"/>
      </Style>

      <Style x:Key="LoginPadding" TargetType="StackLayout">
        <Setter Property="Padding" Value="40,0,40,0"/>
      </Style>


      <!-- THEME -->
      <Style TargetType="artina:CircleImage">
        <Setter Property="WidthRequest" Value="50" />
        <Setter Property="HeightRequest" Value="50" />
        <Setter Property="BorderThickness" Value="3"/>
        <Setter Property="BorderColor" Value="{StaticResource AccentColor}"/>
      </Style>

      <Style x:Key="Avatar" TargetType="artina:CircleImage" >
        <Setter Property="WidthRequest" Value="50" />
        <Setter Property="HeightRequest" Value="50" />
        <Setter Property="BorderThickness" Value="3"/>
        <Setter Property="BorderColor" Value="{StaticResource AccentColor}"/>
      </Style>

      <Style x:Key="AvatarXSmall" TargetType="artina:CircleImage" BasedOn="{ StaticResource Avatar }">
        <Setter Property="WidthRequest" Value="36" />
        <Setter Property="HeightRequest" Value="36" />
        <Setter Property="BorderThickness" Value="2"/>
      </Style>

      <Style x:Key="AvatarSmall" TargetType="artina:CircleImage" BasedOn="{ StaticResource Avatar }">
        <Setter Property="WidthRequest" Value="44" />
        <Setter Property="HeightRequest" Value="44" />
      </Style>

      <Style x:Key="AvatarLarge" TargetType="artina:CircleImage" BasedOn="{ StaticResource Avatar }">
        <Setter Property="WidthRequest" Value="110" />
        <Setter Property="HeightRequest" Value="110" />
      </Style>



      <Style x:Key="FontIconItemDemo" TargetType="Label" BasedOn="{ StaticResource FontIcon }">
        <Setter Property="TextColor" Value="{ StaticResource AccentColor }" />
        <Setter Property="FontSize" Value="24" />
        <Setter Property="FontFamily" Value="{ x:Static artina:FontAwesome.FontName }" />
      </Style>


      <!-- ECOMMERCE -->
      <Style x:Key="EcommerceProductGridBannerStyle" TargetType="StackLayout">
        <Setter Property="HeightRequest" Value="120" />
        <Setter Property="BackgroundColor" Value="{StaticResource BrandColorDarker}" />
      </Style>

      <!-- CUSTOM NAVBAR -->
      <Style x:Key="CustomNavBarStyle" TargetType="StackLayout">
        <Setter Property="BackgroundColor" Value="{StaticResource AccentColor}" />
        <Setter Property="HeightRequest">
          <Setter.Value>
            <OnPlatform x:TypeArguments="x:Double"
                            Android="56"
                            iOS="66" />
          </Setter.Value>
        </Setter>
      </Style>
    </ResourceDictionary>
  </Application.Resources>
</prism:PrismApplication>

Android 專案

更新資源檔案定義

您需要從 Grial.droid Resource 資料夾中，複製檔案到您的 Android 專案，並且修改 MainActivity.cs 檔案，使您的 Android 使用這些檔案的樣式資源定義。

首先，您需要從 Grial.droid Resource > values 與 Resource > values-v21 資料夾內，複製Style.xml 檔案到您的 Android 專案內的相同資料夾中。

您也可將複製整理好的 Android Resources 目錄下的所有資料夾內容，從檔案總管內，拖拉這些檔案到 Visual Studio 方案總管內的 Android 專案內的 Resources 資料夾內。

不過，請特別注意，在此之前，您需要先將剛剛建立好的 Android 專案內的 Resource 資料夾內的layout / values / values-v21 資料夾內的所有檔案先刪除掉。

完成之後，您的 Android 專案會呈現如下內容

新增 SplashActivity

這裡要產生 Android 專案的開機畫面。

滑鼠右擊 Android 專案，選取 加入 > 新增項目

在 加入新項目 對話窗內，點選 Visual C# > Class，在底下名稱欄位中，輸入 SplashActivity，最後點選 新增 按鈕。

在新產生的檔案內，將其 SplashActivity 類別定義，使用底下程式碼取代

    [Activity(
        Label = "XF Grial",
        Theme = "@style/Theme.Splash",
        Icon = "@drawable/icon",
        MainLauncher = true,
        NoHistory = true)
    ]

    public class SplashActivity : Activity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            StartActivity(typeof(MainActivity));
        }
    }

修正 MainActivity 的宣告

底下為使用 Prism 專案樣板所產生的 Android 專案的 MainActivity.cs 檔案內容

    [Activity(Label = "XFGrial", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.tabs;
            ToolbarResource = Resource.Layout.toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App(new AndroidInitializer()));
        }
    }

請修正其 MainActivity 類別上方的屬性宣告，如下列程式碼所示

    [Activity(
        Label = "XF Grial",
        Theme = "@style/AppTheme",
        Icon = "@android:color/transparent",
        MainLauncher = false)
    ]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.tabs;
            ToolbarResource = Resource.Layout.toolbar;

            base.OnCreate(bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App(new AndroidInitializer()));
        }
    }

修正 AndroidManifest.xml

滑鼠雙擊核心PCL專案 > Propertyies > AndroidManifest.xml

請將這個檔案內的 android:theme="@style/MyTheme" 宣告移除，如下列所示

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:installLocation="auto">
    <uses-sdk android:minSdkVersion="23" android:targetSdkVersion="23" />
    <application android:label="XFGrial.Droid" ></application>
</manifest>

iOS 專案

新增 Appearance

您可將複製整理好的 iOS Resources 目錄下的所有檔案，從檔案總管內，拖拉這些檔案到 Visual Studio 方案總管內的 iOS 專案內的 Resources 資料夾內。
滑鼠右擊 iOS 專案，選取 加入 > 新增項目，接著在 加入新項目 對話窗中，選取 Apple > Class，在底下名稱欄位中輸入 Appearance
在剛剛產生的 Appearance.cs 檔案的 Appearance 類別，使用底下程式碼替換掉。

    public static class Appearance
    {
        public static UIColor AccentColor = ExportedColors.AccentColor.ToUIColor();
        public static UIColor TextColor = ExportedColors.InverseTextColor.ToUIColor();

        public static void Configure()
        {
            UINavigationBar.Appearance.BarTintColor = AccentColor;
            UINavigationBar.Appearance.TintColor = TextColor;
            UINavigationBar.Appearance.TitleTextAttributes = new UIStringAttributes {
                ForegroundColor = TextColor,
            };

            UIProgressView.Appearance.ProgressTintColor = AccentColor;

            UISlider.Appearance.MinimumTrackTintColor = AccentColor;
            UISlider.Appearance.MaximumTrackTintColor = AccentColor;
            UISlider.Appearance.ThumbTintColor = AccentColor;

            UISwitch.Appearance.OnTintColor = AccentColor;

            UITableViewHeaderFooterView.Appearance.TintColor = AccentColor;

            UITableView.Appearance.SectionIndexBackgroundColor = AccentColor;
            UITableView.Appearance.SeparatorColor = AccentColor;

            UITabBar.Appearance.TintColor = AccentColor;

            UITextField.Appearance.TintColor = AccentColor;

            UIButton.Appearance.TintColor = AccentColor;
            UIButton.Appearance.SetTitleColor (AccentColor, UIControlState.Normal);
        }
    }

修正 AppDelegate

在 iOS 專案內，打開 AppDelegate.cs 檔案，修改 FinishedLaunching 方法，如下所示；也就是加入這行Appearance.Configure();

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();

            var workaround = typeof(UXDivers.Artina.Shared.CircleImage);
            Appearance.Configure();

            LoadApplication(new App(new iOSInitializer()));

            return base.FinishedLaunching(app, options);
        }

Font Awesome 圖示字型黨安裝與設定

請將 Font Awesome 圖示字型檔案複製到您的原生專案內。

Android 專案

請使用檔案總管，在目錄 Font Awesome 下找到 fontawesome-webfont.ttf 檔案，拖拉這個檔案到 Android 專案內的 Assets 資料夾。

使用滑鼠右擊 Android 專案 > Renderers 資料夾，點選 加入 > 新增項目

在 加入新項目 對話窗中，選擇 Visual C# > Class，在底下名稱欄位，輸入CustomFontLabelRenderer，最後點選 新增 按鈕。

將底下程式碼替換到剛剛產生的 CustomFontLabelRendere 類別定義

    public class CustomFontLabelRenderer : ArtinaCustomFontLabelRenderer
    {
        private static readonly string[] CustomFontFamily = new [] { "FontAwesome" };
        private static readonly Tuple<FontAttributes, string>[][] CustomFontFamilyData = new [] { 
            new [] {
                new Tuple<FontAttributes, string>(FontAttributes.None, "fontawesome-webfont.ttf"), 
                new Tuple<FontAttributes, string>(FontAttributes.Bold, "fontawesome-webfont.ttf"), 
                new Tuple<FontAttributes, string>(FontAttributes.Italic, "fontawesome-webfont.ttf"), 
            },
        };

        protected override bool CheckIfCustomFont (string fontFamily, FontAttributes attributes, out string fontFileName)
        {
            for (int i = 0; i < CustomFontFamily.Length; i++) {
                if (string.Equals(fontFamily, CustomFontFamily[i], StringComparison.InvariantCulture)){
                    var fontFamilyData = CustomFontFamilyData[i];

                    for (int j = 0; j < fontFamilyData.Length; j++) {
                        var data = fontFamilyData[j];
                        if (data.Item1 == attributes){
                            fontFileName = data.Item2;

                            return true;
                        }
                    }

                    break;
                }
            }

            fontFileName = null;
            return false;
        }
    }

iOS 專案

請使用檔案總管，在目錄 Font Awesome 下找到 fontawesome-webfont.ttf 檔案，拖拉這個檔案到 Android 專案內的 Resources 資料夾。

滑鼠右擊 info.plist 檔案，選取 開啟方式，選擇 XML(文字)編輯器，最後，點選 確定 按鈕

在這個檔案的最後面，加入裡下XML碼

    <key>UIAppFonts</key>
    <array>
      <string>fontawesome-webfont.ttf</string>
    </array>

自訂渲染器 Custom Renderers

Grial 提供許多自訂渲染器(Renderer)，您需要在每個原生平台的 AssemblyInfo.cs 檔案內來進行宣告，這樣才可以在這個專案內生效。

Android 專案

在 Android 專案內的 Properties 節點下，打開 AssemblyInfo.cs 檔案

在最後面加入底下程式碼

請將這個 XFGrial.Droid.Renderers.CustomFontLabelRenderer 定義之前面的命名空間，更換為您當時專案使用的命名空間。


// Custom renderer definition.

[assembly: ExportRenderer(typeof(Entry), typeof(UXDivers.Artina.Shared.ArtinaEntryRenderer))]
[assembly: ExportRenderer(typeof(Editor), typeof(UXDivers.Artina.Shared.ArtinaEditorRenderer))]
[assembly: ExportRenderer(typeof(Label), typeof(XFGrial.Droid.Renderers.CustomFontLabelRenderer))]
[assembly: ExportRenderer(typeof(Switch), typeof(UXDivers.Artina.Shared.ArtinaSwitchRenderer))]
[assembly: ExportRenderer(typeof(ActivityIndicator), typeof(UXDivers.Artina.Shared.ArtinaActivityIndicatorRenderer))]
[assembly: ExportRenderer(typeof(ProgressBar), typeof(UXDivers.Artina.Shared.ArtinaProgressBarRenderer))]
[assembly: ExportRenderer(typeof(Slider), typeof(UXDivers.Artina.Shared.ArtinaSliderRenderer))]
[assembly: ExportRenderer(typeof(SwitchCell), typeof(UXDivers.Artina.Shared.ArtinaSwitchCellRenderer))]
[assembly: ExportRenderer(typeof(TextCell), typeof(UXDivers.Artina.Shared.ArtinaTextCellRenderer))]
[assembly: ExportRenderer(typeof(ImageCell), typeof(UXDivers.Artina.Shared.ArtinaImageCellRenderer))]
[assembly: ExportRenderer(typeof(ViewCell), typeof(UXDivers.Artina.Shared.ArtinaViewCellRenderer))]
[assembly: ExportRenderer(typeof(EntryCell), typeof(UXDivers.Artina.Shared.ArtinaEntryCellRenderer))]
[assembly: ExportRenderer(typeof(SearchBar), typeof(UXDivers.Artina.Shared.ArtinaSearchBarRenderer))]
[assembly: ExportRenderer(typeof(UXDivers.Artina.Shared.Button), typeof(UXDivers.Artina.Shared.ArtinaButtonRenderer))]

iOS 專案

在 iOS 專案內的 Properties 節點下，打開 AssemblyInfo.cs 檔案

在最後面加入底下程式碼

// Custom renderer definition

[assembly: ExportRenderer(typeof(UXDivers.Artina.Shared.CircleImage), typeof(UXDivers.Artina.Shared.ImageCircleRenderer))]
[assembly: ExportRenderer(typeof(EntryCell), typeof(UXDivers.Artina.Shared.ArtinaEntryCellRenderer))]
[assembly: ExportRenderer(typeof(ImageCell), typeof(UXDivers.Artina.Shared.ArtinaImageCellRenderer))]
[assembly: ExportRenderer(typeof(SwitchCell), typeof(UXDivers.Artina.Shared.ArtinaSwitchCellRenderer))]
[assembly: ExportRenderer(typeof(TableView), typeof(UXDivers.Artina.Shared.ArtinaTableRenderer))]
[assembly: ExportRenderer(typeof(TextCell), typeof(UXDivers.Artina.Shared.ArtinaTextCellRenderer))]
[assembly: ExportRenderer(typeof(ViewCell), typeof(UXDivers.Artina.Shared.ArtinaViewCellRenderer))]

[assembly: ExportRenderer(typeof(Entry), typeof(UXDivers.Artina.Shared.ArtinaEntryRenderer))]

#pragma warning disable 219
internal static class WorkaroundLoadingCustomRenderersFromExternalAssemblies {
    static WorkaroundLoadingCustomRenderersFromExternalAssemblies()
    {
        var a = new UXDivers.Artina.Shared.ArtinaEntryRenderer();
    }
}
#pragma warning restore 219

開機畫面 Splash image

iOS 作業系統

滑鼠雙擊 iOS 專案的 Properties 節點

將 Launch Storyboard 的值 LaunchScreen 清除

參考

http://grialkit.com/gettingstarted/overview/

https://github.com/UXDivers/Grial-UI-Kit-Support/wiki

Xamarin Research

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書

2016/09/26

Xamarin.Forms Grial UI Kit 的使用 - 新建專案

建立 Xamarin.Forms 專案

Grial UI Kit 初始化

目錄建立

加入參考組件

核心 PCL 專案

Android 專案

iOS 專案

主題和品牌 Theme / branding

核心PCL專案

建立 ExportedColors 類別

加入全域樣式宣告

Android 專案

更新資源檔案定義

新增 SplashActivity

修正 MainActivity 的宣告

修正 AndroidManifest.xml

iOS 專案

新增 Appearance

修正 AppDelegate

Font Awesome 圖示字型黨安裝與設定

Android 專案

iOS 專案

自訂渲染器 Custom Renderers

Android 專案

iOS 專案

開機畫面 Splash image

iOS 作業系統

參考

XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

2016/09/26

Xamarin.Forms Grial UI Kit 的使用 - 新建專案

建立 Xamarin.Forms 專案

Grial UI Kit 初始化

目錄建立

加入參考組件

核心 PCL 專案

Android 專案

iOS 專案

主題和品牌 Theme / branding

核心PCL專案

建立 ExportedColors 類別

加入全域樣式宣告

Android 專案

更新資源檔案定義

新增 SplashActivity

修正 MainActivity 的宣告

修正 AndroidManifest.xml

iOS 專案

新增 Appearance

修正 AppDelegate

Font Awesome 圖示字型黨安裝與設定

Android 專案

iOS 專案

自訂渲染器 Custom Renderers

Android 專案

iOS 專案

開機畫面 Splash image

iOS 作業系統

參考

XAML in Xamarin.Forms 基礎篇電子書

Xamarin.Forms 快速入門電子書