XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2016/09/26

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+) 也是有支援的
    PrismForXamarinForms

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 專案會呈現如下內容
Grial需要的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 清除
GrialiOS啟動畫面修正

參考

沒有留言:

張貼留言