XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2017/02/28

Xamarin FAQ 2-26 : 如何從 ViewModel 中呼叫 Code Behind內的方法

問題

這個問題與 Xamarin FAQ 2-25 是相稱的,也就是說,因為我們都在 ViewModel 內寫商業處理邏輯,可是,有些時候,因為特殊需求,想要在 ViewModel 內,可以呼叫 Code Behind 的方法,這樣該怎麼處理呢?

解答

在這裡,我們假設這個頁面名稱為 MainPage,而該頁面的 ViewModel 為 MainPageViewModel
底下為 Code Behind 的程式碼,我們在建構式內,取得了這個頁面的 ViewModel 物件,因此,透過 ViewModel 物件,指定頁面中的 TestDelegate 方法到 ViewModel 內的委派方法 myDelegate 物件內,因此,我們在 ViewModel 內,若呼叫 TestDelegate 這個委派方法,就會直接執行 Code Behind 內的方法了。
    public partial class MainPage : ContentPage
    {
        MainPageViewModel fooMainPageViewModel;
        public MainPage()
        {
            InitializeComponent();

            fooMainPageViewModel = this.BindingContext as MainPageViewModel;
            fooMainPageViewModel.myDelegate = TestDelegate;
        }

        public string TestDelegate(string para)
        {
            return $"Result:{para}";
        }
    }
底下是 ViewModel 的範例程式碼
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        public delegate string TestDelegate(string para);
        public TestDelegate myDelegate;

        public void OnNavigatedFrom(NavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
            if (myDelegate != null)
            {
                var foo = myDelegate("Hello");
                ...
            }
        }
    }
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/27

Xamarin FAQ 2-25 : 如何從Code Behind中取得這個頁面綁定的 ViewModel

問題

有些時候,為了方便起見,想直接使用 Code Behind 程式碼,直接來處理一些事情;此時,若想要在 Code Behind 中,存取 ViewModel 中的屬性,或者呼叫 ViewModel 內的方法,該如何處理呢?

解答

在這裡,我們假設這個頁面名稱為 MainPage,而該頁面的 ViewModel 為 MainPageViewModel
您可以使用底下方式取得這個頁面的 ViewModel 物件;在這裡,我們宣告一個欄位型別為 MainPageViewModel 的 fooMainPageViewModel 物件,在建構式中,取得該頁面的 BindingContext 物件,並且轉型成為 MainPageViewModel。
而頁面的 BindingContext 是透過了這個 XAML 宣告 prism:ViewModelLocator.AutowireViewModel="True",由 Prism 自動將 ViewModel 物件產生,並且設定到頁面的 BindingContext 屬性上。
    public partial class MainPage : ContentPage
    {
        MainPageViewModel fooMainPageViewModel;
        public MainPage()
        {
            InitializeComponent();

            fooMainPageViewModel = this.BindingContext as MainPageViewModel;
        }
    }
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/26

Xamarin FAQ 2-24 : 如何製作出展開與收合控制項效果

問題

這個是個相當熱門的問題,許多人都有這樣的情況,會依據當時所接收到的資料狀態,決定那些控制項是否顯示出來;這尤其是在 ListView 的每筆紀錄上,根據每筆資料的紀錄,顯示出不同的控制項,讓整個應用程式更加有層次,那麼,我該如何做到這樣的需求呢?

解答

相信很多人都會先想到在這些控制項定義 x:Name 這個擴充飆技值,可是,這樣做的會就需要在 Code Behind 中來存取這個控制項物件,對於在 MVVM 架構下開發,似乎不是很好的選擇;另外,ListView.ItemTemplate 裡面的控制項,是沒有辦法使用這樣方式來存取的。
請先在 ViewModel 中定義一個型別為 bool 的屬性,將這個屬性綁定到相對應控制項的 IsVisible 屬性中;如此,藉由控制 ViewModel 的屬性值為 true 或者是 false,就可以做到是否要顯示這個控制項。
Xamarin-跨平台手機應用程式設計入門-粉絲團

Xamarin FAQ 2-23 : 控制項內的 Text 屬性中,要顯示特殊字元 < > " & 或者 Unicode 的方法

問題

在 XAML 中,這些字元 < / > / & / " 都有特殊意義,那麼,我該如何在 XAML 中使用這些字元在屬性值上呢?

解答

這些字元符號,可以使用底下方式,在 XAML 來表示
< 可以使用 &lt;
> 可以使用 &gt;
& 可以使用 &amp;
" 可以使用 &quot;
對於要在 XAML 中使用 Unicode 字符,可以使用這樣的方式來表示 —
若您想要在 C# 來表示 Unicode 字符,可以使用這樣的方式來表示 &\u2014
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/24

Xamarin FAQ 2-22 : 控制項內的 Text 屬性中的文字換行用法

問題

有很多時候,想要在 Text 屬性中,設定一個字串,但是,這個字串想要顯示成為兩行,也就是在某些地方想要強迫換行;可是,在 XAML 裡面,該如何宣告這樣的 Text 值呢?

解答

你可以參考底下用法,當您想要強制換行的時候,可以使用 &#x0a; 這樣的表示方式。
        <Label Text="多奇數位創意有限公司&#x0a;Xamarin" />
Xamarin-跨平台手機應用程式設計入門-粉絲團

Xamarin FAQ 2-21 : 在ListView中,在每筆紀錄內要綁定的命令,如何指定對應到檢視模型內

問題

當想在 ListView 的每筆紀錄上,綁定一個手勢操作命令,或者按鈕命令;您把要綁定的命令寫在頁面 ViewModel 中,可是,卻發現到當進行 ListView 每筆紀錄上的操作,這些 ICommand 都不會被執行,該如何解決此一問題呢?

解答

這樣的問題也是有兩個以上的解法可以來運用,不過,我通常都是使用這樣的作法。
首先,使用 x:Name 設定頁面的物件名稱,例如 x:Name="ThisPage"
<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="XFListView.Views.PullToRefreshPage"
             x:Name="ThisPage"
             Title="下拉更新" >
接著,在綁定命令的時候,使用 x:Reference 參考到頁面的 BindingContext 物件下的 ICommand 物件。
另外,想要讓 ICommand 取得您點選的 ListView 紀錄項目,可以使用 CommandParameter="{Binding}" ,將這筆紀錄回傳到 ICommand 命令內。
                        <BoxView 
                        BackgroundColor="White" >
                            <BoxView.GestureRecognizers>
                                <TapGestureRecognizer Command="{Binding Path=BindingContext.點擊Command, Source={x:Reference ThisPage}}" CommandParameter="{Binding}" />
                            </BoxView.GestureRecognizers>
                        </BoxView>
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/23

Xamarin Cycle 9: 準備注意事項說明

今日,2017.03.23 可以更新到 Xamarin Cycle 9 這個版本,這個版本將會支援 iOS 10.4 & Android 7.1
請參考底下說明,將您的開發環境,調整成為此篇文章說明內容

請安裝 JDK 1.8 x64 版本

現在最新的 JDK 1.8 版的為 8u121

升級 Visual Studio 2015 使用的 Xamarin Toolkit 到 4.3 版本

  • 點選 Visual Studio 2015 功能表 工具 > 選項 > Xamarin > Other > Stable > Check Now
  • 下載完成後,請點選安裝按鈕
  • 今日更新完成後的 Xamarin Toolkit 版本資訊

確認 Xamarin.Android 有使用最新安裝的 JDK

  • 點選 Visual Studio 2015 功能表 工具 > 選項 > Xamarin > Android
  • 找到 Java 開發套件位置,點選變更,切換到 x64 JDK 1.8.0.121 的安裝位置
    C:\Program Files\Java\jdk1.8.0_121

確認 Android SDK 都有安裝與升級到最新版本

  • 點選 Visual Studio 2105 功能表 工具 > Android > Android SDK Manager
  • 確定底下指出的套件,都有安裝與升級到最新版本
    • Tools > Android SDK Tools 25.2.5
    • Tools > Android SDK Platform-tools 25.0.3
    • Tools > Android SDK Build-Tools 25.0.2
    • Android 7.1.1(API 25) > SDK Platform
    • Android 7.0(API 24) > SDK Platform
    • Android 6.0(API 23) > SDK Platform
    • Android 5.1.1(API 22) > SDK Platform
    • Android 5.0.1(API 21) > SDK Platform
    • Android 4.4W.2(API 20) > SDK Platform
    • Android 4.4.2(API 19) > SDK Platform
    • Extras > Android Support Repository 44
    • Extras > Google USB Driver 11

Mac 電腦上也需要同步更新

若您有開發 iOS App,請記得上述的步驟,也需要在 Mac 電腦上都要做一次。
在 Mac 電腦上,您需要更新 Xamarin Studio 到最新版本

2017/02/20

Xamarin FAQ 2-20 : 在ListView中,如何實作出下拉更新的手勢操作

問題

Xamarin.Forms 的 ListView 是否有支援手勢更新的功能,也就是說,當使用者在 ListView 最前面的紀錄是第一筆紀錄的時候,可以使用手指由上往下滑動 ListView,如此,就可以即時更新到最新的資料。

解答

首先,我們先來建立一個頁面,裡面有個 ListView 控制項,看看有那些地方是需要設定的。
在下方的 ListView 標機宣告中,我們使用了
  • IsPullToRefreshEnabled="True"
    設定這個 ListView 需要啟用下拉更新的手勢操作
  • RefreshCommand="{Binding ListView更新資料Command}"
    當 ListView 偵測到您有下拉更新的手勢操作行為時候,這個 RefreshCommand 所綁定的命令,將會被執行;在這個 ICommand 命令中,我們將會更新 DataItemList 的集合資料內容
  • IsRefreshing="{Binding IsBusy}"
    IsRefreshing 將會顯示一個忙碌中的視覺,讓使用者知道 ListView 正在更新資料中,不過,當更新完成資料後,將會設定 IsBusy 的值為 False,這樣,忙碌中的視覺就不會出現了。
<?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="XFListViewRefresh.Views.MainPage"
             Title="ListView下拉更新">

    <StackLayout 
      Margin="20"
      HorizontalOptions="Fill" VerticalOptions="Fill">
        <Label Text="{Binding Title}" />
        <ListView
            HorizontalOptions="Fill" VerticalOptions="FillAndExpand"
            ItemsSource="{Binding DataItemList}"
            IsPullToRefreshEnabled="True"
            HasUnevenRows="True"
            RefreshCommand="{Binding ListView更新資料Command}"
            IsRefreshing="{Binding IsBusy}"
            >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid
                            RowSpacing="0" ColumnSpacing="0"
                            >
                            <Label Text="{Binding DataVale}" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>
要進行下拉更新命令的時候,可以類似底下的處理動作。
            ListView更新資料Command = new DelegateCommand(() =>
            {
                IsBusy = true;
                Refresh();
                IsBusy = false;
            });
Xamarin-跨平台手機應用程式設計入門-粉絲團