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

這份筆記將會記錄如何在新建專案的時候，配合 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.Forms 取得核心PCL內的相依性注入容器，並且解析特定類別

由時候，您需要在 ViewModel 內，不透過建構式注入的方式，取得某個介面的實作物件，這個時候，您需要取得 Prism 的容器，自行解析出該介面的註冊實作類別。

想要取得 Prism 內的預設使用容器，可以使用底下程式碼，這個程式碼會回傳 IUnityContainer

IUnityContainer myContainer = (App.Current as PrismApplication).Container;

接著，您可以使用底下程式碼，取得某個介面(在這裡範例為 IMyClass)的實作物件，可以使用泛型Resolve 方法，解析出實作介面的物件。

fooObject = myContainer.Resolve<IMyClass>();

參考

https://vulcanlee.gitbooks.io/xamarin-forms-develop-notes/content/GroupNotes1/PrismContainer.html

Xamarin.Forms Android平台的退回實體按鍵控制

若是想要停用或者要控制實體退回鍵，需要在該頁面的 code-behind 加入底下方法

        protected override bool OnBackButtonPressed()
        {
            return true;
        }

建立 Xamarin.Forms 新專案，發生 未正確載入套件 'XamarinAndroidPackage' 錯誤

當您準備要使用 Visual Studio 2015 來建立 Xamarin.Forms 的專案，此時，會發現到這樣的錯誤訊息

未正確載入套件 'XamarinAndroidPackage'。

這個問題能是因為組態變更或者安裝其他擴充功能所造成。您可以檢查檔案 .... 取得詳細資訊。

重新啟動 Visual Studio 可以協助解決此問題。

要繼續顯示這項錯誤訊息嗎?

不論回答 Y / N，最終發現到，這個方案內是沒有 Xamarin.Android 的專案產生；而關閉 Visual Studio 且重新開啟 Visual Studio，並再度產生一次 Xamarin.Forms 專案，一樣的錯誤還是會出現，

解決問題方法

請使用檔案總管，切換到底下目錄下

C:\Users\%username%\AppData\Local\Microsoft\VisualStudio\14.0\ComponentModelCache

將這個目錄下的所有檔案刪除，重新開啟 Visual Studio 2015，就可以正常使用了

Xamarin.Forms 如何回覆 Visual Studio 內的 Xamarin 到以前的版本 upgrade / downgrade

如何恢復 Visual Studio 內的 Xamarin 到以前的版本

若您在開發上遇到問題，想要回覆到較舊的 Xamarin 版本，可以從底下網頁，下載舊的版本，安裝起來就可以囉

https://store.xamarin.com/account/my/subscription/downloads

《台北》Xamarin.Forms 跨平台行動應用程式開發實戰

最新 Xamarin.Forms 課程資訊

《台北》Xamarin.Forms 跨平台行動應用程式開發實戰 2016-10-21 09:00 ~ 2016-10-31 17:00http://www.accupass.com/go/DCT_105027

《台北》Xamarin.Forms 跨平台行動應用程式開發實戰 2016-10-15 09:00 ~ 2016-10-29 17:00http://www.accupass.com/go/DCT_105034

以往想要開發原生行動應用程式，您必須要遵循每個平台的SDK規範與了解應用程式的生命週期，並且使用專屬程式語言與API使用方式，例如： iOS 需要學習 Swift或者Objective-C，而 Andrdoid 必須要學習 Java，這使得想要開發一套能夠在不同行動裝置下運行的應用程式，您必須學習與精通這些開發工具與程式語言；最重要的是，不論是視覺介面 UI 或者商業邏輯程式碼，都無法跨平台共用，也就是說，同樣的商業邏輯需要使用不同程式語言重覆再寫一次。
Xamarin.Forms 使用 .NET C# 程式語言，配合豐富資源 BCL 與視覺宣告 XAML，搭配地表最強的程式開發工具 Visual Studio，讓您可以一次性開發出可以在 iOS & Android & Windows UWP 下運行的行動裝置應用程式，不論是視覺介面與商業邏輯，開發者也只需要撰寫一次即可，就可以產生出在不同行動裝置下執行的應用程式。另外，Xamarin.Forms 特別適合用於開發企業內部的行動應用。
本次課程包含一堂 1 小時的線上課程與三天共 21 小時的實體課程，將會帶領大家快速上手 Xamarin.Forms 開發工具，您將會認識 Xamarin 開發環境，了解使用 Xamarin.Forms 開發工具所會遇到問題與解決方法，學會 XAML 與 MVVM 開發和設計模式，實際動手做出可以跨平台執行的應用程式，並且學會整個 Xamarin.Forms 開發過程。

Xamarin.Forms 社群分享的使用 Share Plugin

若想要在應用程式內，分享應用程式的內容到到其他應用程式內，您可以在核心 PCL 專案內，使用這個套件Plugin.Share，可以讓您進行文字、連結的分享作業，或者指定一個URL，並且使用瀏覽器開啟這個URL。這些功能將會自動針對當時執行行動裝置的作業系統，執行相對應的工作。

1. 首先，請先安裝 Plugin.Share NuGet 套件
2. 要分享某段文字內容，也是相當容易的，使用底下程式碼來執行，此時，手機將會顯示並且請您選擇要分享的應用程式，選擇之後，就可以把這段文字分享出去。

await CrossShare.Current.Share(message, title);

1. 要分享URL連結，也是相當容易的，使用底下程式碼來執行，此時，手機將會顯示並且請您選擇要分享的應用程式，選擇之後，就可以把URL連結分享出去。

await CrossShare.Current.ShareLink(url, message, title);

1. 當取得一個網址，想要使用外部瀏覽器開啟這個網址，可以使用底下程式碼

await CrossShare.Current.OpenBrowser(創業空間明細.官方網站);

上述的許多功能都可以正常使用，這是因為您一開建立專案的時候，您有加入許多 NuGet 套件或者插件，而在這個檢視模型的程式碼內，就可以直接呼叫這些套件方法；此時，您只管需要呼叫這些功能，至於每個平台的專屬特性與功能，套件與插件會幫您處理掉這些繁雜問題。+

Xamarin.Forms 解決 FileNotFoundException - Could not load file or assembly 的問題

當您開發一個 Xamarin.Forms 專案，並且在 Android 平台下進行測試，一切都可以正常運作與執行；不過，您切換到 iOS 平台下，執行同樣專案，卻得到類似下圖的異常錯誤。

例外異常訊息為

Microsoft.Practices.Unity.ResolutionFailedException: Resolution of the dependency failed, type = "System.Object", name = "TravelExpensesListPage".

Exception occurred while: Calling constructor XFDoggy.Views.TravelExpensesListPage().

Exception is: FileNotFoundException - Could not load file or assembly 'Behaviors' or one of its dependencies

-----------------------------------------------

At the time of the exception, the container was:



  Resolving XFDoggy.Views.TravelExpensesListPage,TravelExpensesListPage (mapped from System.Object, TravelExpensesListPage)

  Calling constructor XFDoggy.Views.TravelExpensesListPage()

由上述的錯誤訊息，看到的是 'Behaviors' 這個組件似乎找不到，這樣的情況也有可能發生在 Android 平台下。

要解決這樣的問題，您需要在

• iOS 平台
  在 AppDelegate.cs (FinishedLaunching 方法) 內，產生這個組件的一個物件，或者參考該 NuGet 套件的使用說明，使用初始化的動作。
• Android 平台
  在 MainActivity.cs (OnCreate 方法內) 內，產生這個組件的一個物件，或者參考該 NuGet 套件的使用說明，使用初始化的動作。

解決方法

請打開 AppDelegate.cs 加入底下程式碼

        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            // 需要加入這行解決無法載入組建的問題
            var fooBehaviorBase = new Behaviors.BehaviorBase<Xamarin.Forms.ListView>();
            global::Xamarin.Forms.Forms.Init();
            LoadApplication(new App(new iOSInitializer()));

            return base.FinishedLaunching(app, options);
        }

若不知道要產生甚麼物件，可以打開這個組件的物件瀏覽器，進行查看