如何在Xamarin.Forms中，使用 SyncFusion NuGet 元件

設定您的 Syncfusion 使用授權金鑰 License key

• 開啟 Syncfusion License 網頁，下載壓縮檔案
• 將這個壓縮檔案解壓縮到您的硬碟上
• 開啟具有管理者權限的命令提示字元視窗，並且些換到剛剛解壓縮目錄下
• 執行這個命令進行使用授權註冊 enterkey.bat 你的SyncFusion使用授權碼

設定 Visual Studio 可以存取 SyncFusion NuGet 套件

• 開啟 Visual Studio 2015
• 點選功能表 工具 > NuGet封裝管理員 > 套件管理員設定
• 點選對話窗中 NuGet封裝管理員 > 套件來源 > 新增 按鈕(右上角的綠色加號按鈕)
• 在下方的名稱欄位輸入 SyncFusion Xamarin package
• 在下方的來源欄位輸入 http://nuget.syncfusion.com/nuget_xamarin/nuget/getsyncfusionpackages/xamarin

Xamarin FAQ 2-08 : 如何在PCL專案內使用跨平台的定時器

問題

若想要在頁面畫面中，能夠做出一個定時更新內容的效果，通常我們會使用 Timer 這個物件來處理；可以，您會發現到在 Xamarin 的核心 PCL 專案內，找不到這個物件，那麼，要如何做到這樣的效果呢?

解答

這個問題有很多解法，在這裡，我們使用 Xamarin.Forms 提供的核心功能方法

            <Label
                VerticalOptions="End" VerticalTextAlignment="End"
                HorizontalOptions="End"
                Margin="0,0,14,10"
                FontSize="14"
                Text="{Binding 使用者時間}"
                TextColor="White"
                />

        protected override void OnAppearing()
        {
            base.OnAppearing();

            fooHomePageViewModel.繼續執行定時器 = true;
            Device.StartTimer(TimeSpan.FromMilliseconds(500), () =>
            {
                    fooHomePageViewModel.使用者時間 = DateTime.Now.ToString("yyyy/MM/dd HH:mm");
                return fooHomePageViewModel.繼續執行定時器;
            });
        }
        protected override void OnDisappearing()
        {
            base.OnDisappearing();
            fooHomePageViewModel.繼續執行定時器 = false;
        }

Xamarin FAQ 2-007 : 同平台下執行，有不同Xaml屬性值

問題

若您想要在同樣一個 XAML 頁面中，根據當時所執行的行動裝置平台不同，而能夠產生不同的效果，例如，想要定義一個 BoxView 控制項的背景顏色，在 Android / iOS / UWP 平台下，有著不同的顏色與寬度，該如何在 XAML 中宣告呢?

解答

您可以參考底下的範例，首先使用 Property-Element 的表示方式，例如，這裡使用 BoxView.Color 的方式來定義這個 BoxView 的背景顏色，不過，在 Property-Element 內，不直接宣告固定的顏色物件，而是使用 OnPlatform 這個方法，根據不同行動裝置作業平台，設定不同的顏色。其中，先宣告 OnPlatform 這個項目，不過，需要使用 x:TypeArguments 來標示這個 OnPlatform 要用到的泛型型別，接著，就可以在底下，這設定不同的顏色。

在這裡有個需要注意到的地方，若要使用 OnPlatform 來定義不同平台會使用不同的物件值，您需要知道當時宣告的物件型別為何，並且使用 x:TypeArguments 來宣告，在 WidthRequest 這個屬性，因為實際的型別為 dobule，所以，在這裡需要使用 x:TypeArguments="x:Double" 來宣告。

    <BoxView HorizontalOptions="Center">
      <BoxView.Color>
        <OnPlatform x:TypeArguments="Color"
          iOS="Green"
          Android="#738182"
          WinPhone="Accent" />
      </BoxView.Color>

      <BoxView.WidthRequest>
        <OnPlatform x:TypeArguments="x:Double"
          iOS="330"
          Android="240"
          WinPhone="150" />
      </BoxView.WidthRequest>
      <BoxView.HeightRequest>300</BoxView.HeightRequest>     
    </BoxView>

Xamarin FAQ 2-06 : 如何動態變更工具列的頁面主題名稱

問題

在某些情況下，需要讓導航頁面的名稱能夠動態顯示不同的名稱，而不是固定一成不變同樣的文字，要使用甚麼方式來做到呢?

解答

在我們使用 MVVM 模式架構開發下，您可以使用資料繫結方式，把ViewModel內的某個屬性，綁定到 ContentPage.Title 這個屬性上；如此，當您想要顯示某個文字成為這個頁面的標題，就可以在頁面中動態顯示出不同文字頁面標題文字。

底下為在 ContentPage 內，指定 Title 這個屬性要綁訂到 PageTitle 這個屬性上。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="foo.Views.MyPage"
             Title="{Binding PageTitle}"
             >

在檢視模型中，首先先要宣告一個 PageTitle 這個屬性

        #region PageTitle
        private string _PageTitle;
        /// <summary>
        /// PageTitle
        /// </summary>
        public string PageTitle
        {
            get { return this._PageTitle; }
            set { this.SetProperty(ref this._PageTitle, value); }
        }
        #endregion

接著，您可以在檢視模型的建構式或者 OnNavigatedTo 事件中，設定 PageTitle 這個屬性的文字值，如此，當應用程式顯示這個頁面的時候，就會有不同的頁面標題文字了。

        public async void OnNavigatedTo(NavigationParameters parameters)
        {
            PageTitle = "這是客製頁面名稱";
        }

Xamarin 之奇怪錯誤訊息 Missing a public static GetHasBackButton

今天開發一個 ContentPage 頁面，需要在這個頁面中，使用 NavigationPage.HasBackButton=”False” 功能，可是，在建置過程中，莫名地得到底下錯誤訊息(會有這種奇怪的想法，那是因為，之前都可以正常使用這樣功能呀??)

Missing a public static GetHasBackButton or a public instance property getter for the attached property “Xamarin.Forms.NavigationPage.HasBackButtonProperty”

為什麼會有這樣的情況呢？力馬打開 Xamarin API Reference for NavigationPage，奇怪了，為什麼在 Public Fields 內，有發現到 HasBackButtonProperty ，但是，在 Public Properties 內，卻沒有看到 HasBackButton 呢?

好吧~~應該又是 XAMLC 這個元件或者其他功能有些狀況了，所以，只好先將 [assembly: XamlCompilation(XamlCompilationOptions.Compile)] 功能先註解起來吧。

重新建置一次，完美，沒有錯誤；接著再度來執行一次，完美，沒有錯誤或閃退，一切執行結果，就使我想要的。

Xamarin FAQ 2-005 : 如何隱藏導航工具列上的按鈕動態

問題

當您在使用 ToolbarItem 工具列按鈕控制項時候，想要將這個按鈕隱藏起來，這個時候，您會發現到，在 ToolbarItem 找不到 IsVisible 屬性。但是，您想要依據當時應用程式的狀態，動態的隱藏或者顯示某些工具列，這樣的需求該如何設計呢?

解答

這裡有個解決方案，那就是您可以客製控制項(Custom Contron)，也就是產生一個類別，並且繼承 ToolbarItem 這個類別；在新產生的類別中，宣告一個可綁定屬性 IsVisibleProperty，在這個可綁定屬性中的 propertyChanged 事件中，就可以動態的新增或者移除這個 ToolbarItem 按鈕了。

在底下的 XAML 頁面工具列宣告中，定義了一個 Xamarin.Forms 的 ToolbarItem 工具列按鈕，與兩個客製化工具列按鈕(記得要使用命名空間前置詞，才能夠引用這個客製化工具列控制項)，並且透過設定 顯示工具列按鈕 屬性，來控制工具列按鈕是否會被從 ToolbarItems 集合物件中加入或者移除。

    <ContentPage.ToolbarItems>
        <ToolbarItem
            Text="{Binding 切換按鈕名稱}" 
            Command="{Binding 顯示工具列Command}" />
        <controls:HideableToolbarItem 
            Text="刪除"
            Command="{Binding 刪除Command}" 
            IsVisible="{Binding 顯示工具列按鈕}" 
            Parent="{x:Reference ThisPage}" />
        <controls:HideableToolbarItem 
            Text="匯出" 
            Command="{Binding 匯出Command}" 
            IsVisible="{Binding 顯示工具列按鈕}" 
            Parent="{x:Reference ThisPage}" />
    </ContentPage.ToolbarItems>

底下為當 IsVisible 屬性值有所變動的時候，工具列按鈕物件會從 ToolbarItems 集合物件內，動態加入或者移除

        private static void OnIsVisibleChanged(BindableObject bindable, object oldVal, object newVal)
        {
            var item = bindable as HideableToolbarItem;
            bool oldvalue = (bool)oldVal;
            bool newvalue = (bool)newVal;

            if (item.Parent == null)
                return;

            var items = item.Parent.ToolbarItems;

            if (newvalue && !items.Contains(item))
            {
                items.Add(item);
            }
            else if (!newvalue && items.Contains(item))
            {
                items.Remove(item);
            }
        }

Xamarin FAQ 2-004 : 如何使用導航工具列上的按鈕

問題

導航工具列上，可以在其右方設定導航工具列按鈕 ToolbarItem (左方當然是放置了回上一頁按鈕)，例如，當這個頁面設計為需要使用者輸入相關資料，此時，當使用者要儲存資料的時候，可以從螢幕右上方點選工具列按鈕，就可以將這筆資料儲存起來；因此，對於這個需求，該如何設計呢?

解答

請找到要加入導航工具列按鈕的頁面 XAML 檔案，請在這個頁面中，加入這個屬性項目(Property Element) ContentPage.ToolbarItems，在這個集合物件中，您可以加入許多工具列按鈕控制項 ToolbarItem；另外，在每個工具列按鈕控制項中，您可以使用 Command 的屬性，指定 ViewModel 內的 ICommand 物件，作為當使用者按下這個按鈕之後，所要執行的程式碼。

    <ContentPage.ToolbarItems>
        <ToolbarItem
            Text="儲存" 
            Command="{Binding 儲存Command}" />
        <ToolbarItem
            Text="刪除" 
            Command="{Binding 刪除Command}" />
    </ContentPage.ToolbarItems>

Xamarin FAQ 2-003 : 如何隱藏導航工具列上的回上頁按鈕

問題

在某些情況下，依據客戶需要或者視覺設計出來的畫面，某些頁面並不需要顯示出回上頁的按鈕，遇到這樣的需求，該如何設計呢?

解答

這個需求解法相當的簡單，那就是請找到不需要顯示回上頁按鈕頁面的 XAML 檔案，請在 ContentPage 這個項目內，使用附加屬性 NavigationPage.HasBackButton="False" 就可以將回上一頁按鈕給隱藏起來了。

Xamarin FAQ 2-002 : 如何隱藏整個導航工具列 ToolbarItem

問題

在某些情況下，依據客戶需要或者視覺設計出來的畫面，我們需要隱藏整個導航工具列 (ToolbarItem)，遇到這樣的需求，該如何設計呢?

解答

這個需求解法相當的簡單，那就是請找到不需要顯示導航工具列頁面的 XAML 檔案，請在 ContentPage 這個項目內，使用附加屬性 NavigationPage.HasNavigationBar="False" 就可以將導航工具列給隱藏起來了。

Xamarin FAQ 2-001 : 如何變更導航工具列背景顏色

問題

當在設計一個具有導航頁面功能的應用程式時候，若想要變更導航工具列的背景顏色，以符合這個應用程式的視覺設計，該如何處理呢?

解答

想要設計一個具有導航頁面功能的應用程式，當然需要建立一個 NavigationPage 頁面，並且在 App.xaml.cs 這個 Xamarin.Forms 的進入點 Code Behind內的方法 OnInitialized，使用這個程式碼，告知這個應用程式，都具有導航頁面的功能 NavigationService.NavigateAsync("NaviPage/MainPage?title=Hello%20from%20Xamarin.Forms");

    public partial class App : PrismApplication
    {
        public App(IPlatformInitializer initializer = null) : base(initializer) { }

        protected override void OnInitialized()
        {
            InitializeComponent();

            NavigationService.NavigateAsync("NaviPage/MainPage?title=Hello%20from%20Xamarin.Forms");
        }

        protected override void RegisterTypes()
        {
            Container.RegisterTypeForNavigation<MainPage>();
            Container.RegisterTypeForNavigation<NaviPage>();
            Container.RegisterTypeForNavigation<Next1Page>();
        }
    }

接著，您需要在 NavigationPage 這個頁面中，指定使用 NavigationPage.BarBackgroundColor 來指定導航工具列的背景顏色。

<?xml version="1.0" encoding="utf-8" ?>
<NavigationPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                prism:ViewModelLocator.AutowireViewModel="True"
                x:Class="XFNaviBarColor.Views.NaviPage"
                BarBackgroundColor="Gray"
                >
    <!--使用  NavigationPage.BarBackgroundColor 來指定導航工具列的背景顏色-->

</NavigationPage>