XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2017/02/17

Xamarin FAQ 2-17 : 如何客製化ListView的每筆紀錄視覺

問題

ListView 除了 TextCell / ImageCell 這兩種預設的紀錄顯示方式,若想要自行定義每筆 ListView 的紀錄所顯示的資料樣式,例如,想要加入 Switch / 按鈕到每筆紀錄上,這個時候,有甚麼解法呢?

解答

Xamarin.Forms 中的 ListView 控制項中,除了上述兩種樣式可以選擇之外,還可以使用 ViewCell 來定義每筆紀錄要顯示的資料格式;例如,在底下的範例中,我們在 ItemTemplate > DataTemplate 內,使用了 ViewCell 來定義每筆紀錄要出現的樣貌。
在這裡,我們定義了一個 Grid 版面配置,在這個裡面分別定義了三個欄位,因此,我們可以在這三個欄位中,分別指定要顯示那些資料。
        <ListView 
            ItemsSource="{Binding People}"
            >
            <ListView.ItemTemplate>
                <DataTemplate >
                    <ViewCell>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.4*" />
                                <ColumnDefinition Width="0.3*" />
                                <ColumnDefinition Width="0.3*" />
                            </Grid.ColumnDefinitions>
                            <Label Text="{Binding Name}" TextColor="Green" FontAttributes="Bold" />
                            <Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}" TextColor="Green" />
                            <Label Grid.Column="2" Text="{Binding Location}" TextColor="Green" HorizontalTextAlignment="End" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/16

Xamarin FAQ 2-16 : 在ListView內,使用彈出功能表但綁定同一個命令,要如何區分來自哪個項目

問題

在開發過程中,想要使用一個 ICommand 物件,來綁定 ListView 的多個彈出功能表項目,但是,要能夠讓 ICommand 命令可以知道哪個命令按鈕被按下了,該如何設計呢?

解答

這個時候,可以使用 CommandParameter 這個屬性,來標示出單要執行 ICommand 命令的時候,透過 CommandParameter 可以區分當時按下的按鈕是哪個,並且根據 CommandParameter 的內容,進行不同的處理。
                    <ViewCell>
                        <ViewCell.ContextActions>
                            <MenuItem Text="立即產生"
                                      Command="{Binding 右鍵功能表Command}" CommandParameter="立即產生"  />
                            <MenuItem Text="刪除"
                                      Command="{Binding 右鍵功能表Command}" CommandParameter="刪除"
                                      IsDestructive="True" />
                        </ViewCell.ContextActions>
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/15

Xamarin FAQ 2-15 : 在ListView內,如何使用彈出功能表

問題

很多App都可以在 ListView 上製作出類似 Windows 右鍵彈出功能表的效果,那麼,若想要使用 Xamarin.Forms 來開發,是否可以做到這樣的功能呢?

解答

其實,在 Xamarin.Forms 中,已經具備了這樣功能,您可以在 ViewCell 內,只用這個 ViewCell.ContextActions Property Element 表示方式,使用 MenuItem 標記來宣告,當使用者要使用彈出功能錶的時候,要出現甚麼樣的選項內容。
在底下的範例中,會出現兩個選項,若使用者選擇了某個選項,則會執行相對應 ViewModel 內的 ICommand 命令。
                    <ViewCell>
                        <ViewCell.ContextActions>
                            <MenuItem Text="立即產生"
                                      Command="{Binding 立即產生Command}" CommandParameter="{Binding .}"  />
                            <MenuItem Text="刪除"
                                      Command="{Binding 刪除Command}" CommandParameter="{Binding .}"
                                      IsDestructive="True" />
                        </ViewCell.ContextActions>
Xamarin-跨平台手機應用程式設計入門-粉絲團

Xamarin FAQ 2-14 : 在ListView內,如何使用點擊項目的Code-Behind方法

問題

想要偵測與處理使用者點選 ListView 的某個項目,可以使用 Code-Behind 的方式來處理,因為,ListView 並沒有支援使用者點擊動作的命令,那該要怎麼做呢?

解答

首先,需要使用 x:Name 這個擴充標記功能,設定 ListView 的名稱,這樣,我們才可以在 Code-Behind 中來存取這個 ListView 控制項。
+

接著,請在這個頁面的建構式中,使用剛剛命名的 ListView 名字,來訂閱 ItemSelected 這個事件。
因此,您就可以在這個事件中,進行設計該做些甚麼動作了。
            listview.ItemSelected += (s, e) =>
            {

            };
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/14

Xamarin FAQ 2-13 : 在ListView內,如何做到多選功能,並取得這些多選資料

問題

由於 ListView 控制項,不像其他開發工具中的 ListView 控制項,並沒有預設提供多選功能,所以,若要解決這樣的問題,我們該如何處理呢?

解答

其實,我們可以使用 ListView 的 ItemTapped 事件,透過這個事件的發生,在每個 ListView 紀錄之相對應的 ViewModel 屬性中,記錄下這筆紀錄是否已經有被點選過,或者取消點選,並且適時變更 ListView 的紀錄 UI 樣貌,讓使用者知道這筆紀錄已經被選擇或者取消選擇了。所以,當使用者確定選擇完成之後,要進行其他處理工作,您就可以根據 ObservableCollection<T> 這個 ViewModel 屬性值,過濾出所有被選擇的項目紀錄。
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/13

Xamarin.iOS xvs/Build/4.2.2.11/execute-task 錯誤,導致無法建置 ipa

今天一早,接到同事通知要修改一個錯誤,接著需要部署到 HocKeyApp 上;如同以往,Android 版本,使用 Archive Manager 順利產生了 Release 版本,不過,當要建置 iOS Release 版本的時候,出現底下的錯誤訊息:

嚴重性 程式碼 說明  專案  檔案  行   隱藏項目狀態
錯誤      MessagingException: The post for client build3868vulca on topic xvs/Build/4.2.2.11/execute-task/XXXX.iOS/3bb4f67%2FDetectSdkLocations has been cancelled
OperationCanceledException: 已取消作業。  XFNtuh.iOS  

可是,上周都可以正常運作,Mac電腦上周幾乎都在關機模式,今天才開啟,真不知道發生了甚麼問題。

解決方式:

到 Mac 電腦上,刪除 ~/Library/Caches/Xamarin/mtbs 目錄下的所有內容,我是使用這個指令

rm -rf ~/Library/Caches/Xamarin/mtbs

2017/02/12

Xamarin FAQ 2-12 : 在ListView裡面的項目,若有按鈕,如何偵測使用有點擊這個按鈕

問題

這個問題在於使用者可以點選 ListView 的任何紀錄,並且 ListView 會根據使用者點選特定紀錄,做出相對應的反應;可是,每筆紀錄上,都會有個按鈕控制項,若使用者點擊了這個按鈕,我們必須做出其他相對應的反應;面對這樣的需求,該如何處理呢?

解答

這個時候,您可以在 ViewCell 內,加入一個按鈕控制項,在這個按鈕控制項中,宣告 Command="{Binding 進行互動Command}" CommandParameter="{Binding .}" 這樣的屬性,也就是說,當使用者點選每個 ListView 紀錄上的按鈕時候,就會執行 ViewModel 內的這個 進行互動Command 命令,並且會把當時這個紀錄資料,傳遞到 ICommand 物件內。
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <Grid
              >
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="120" />
              </Grid.ColumnDefinitions>
              <BoxView Grid.Column="0" BackgroundColor="{Binding FavoriteColor}"
                       VerticalOptions="Center" HorizontalOptions="Center"
                       HeightRequest="40" WidthRequest="40"/>
              <StackLayout Grid.Column="1" Orientation="Vertical">
                <Label
                  TextColor="Teal" FontSize="14"
                  Text="{Binding Name}" />
                <Label
                  TextColor="Teal" FontSize="14"
                  Text="{Binding Birthday, StringFormat='{0:yyyy-MM-dd}'}" />
              </StackLayout>
              <Button Grid.Column="2"
                      Text="進行互動"
                      Command="{Binding 進行互動Command}"
                      CommandParameter="{Binding .}"
                      />
            </Grid>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
Xamarin-跨平台手機應用程式設計入門-粉絲團

Xamarin FAQ 2-11 : 在ListView內,如何指定檢視模型內的ICommand做綁定

問題

若使用 Code Behind 的方式來解決使用者點選 ListView 控制項的時候,要觸發某個事件,可以在 Code Behind 程式碼中訂閱 ItemSelected 這個事件,可是,若採用 MVVM 價購方式開發,不想要使用 Code Behind 的方式來訂閱這個事件,而是想要綁定 ICommand 命令,這個時候,該如何處理呢?

解答

這個時候,您可以使用 Xamarin.Forms 內建的 Behavior 功能,每個 Xamarin.Forms 的控制項,都可以使用 Behaviors 屬性,可以用來定義相關擴充行為;不過,要綁定 ListView 的點擊某筆紀錄的事件,這個時候,我們需要使用一個 NuGet 套件:Behaviors.Forms
在底下的 XAML 宣告中,宣告了一個額外命名空間 xmlns:behaviors="clr-namespace:Behaviors;assembly=Behaviors",透過 behaviors 這個命名空間,可以取得與使用這個 Behavior NuGet 套件的相關擴充行為功能;所以,您可以在底下看到宣告了 <ListView.Behaviors> 屬性,使用了 InvokeCommandAction 這個方法,綁定了當 ListView 控制項有這個 ItemTapped 事件發生的時候,就會去執行這個 ViewModel 內的 MyDataClickedCommand 命令。
<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"
             xmlns:behaviors="clr-namespace:Behaviors;assembly=Behaviors"
             x:Class="XFListView.Views.ItemClickPage"
             Title="ListView 點選與取消選取">

  <StackLayout>
    <ListView x:Name="listview"
      ItemsSource="{Binding MyData}"
      SelectedItem="{Binding MyDataSelected, Mode=TwoWay}"
      Margin="20,0"
      IsPullToRefreshEnabled="True"
              RefreshCommand="{Binding 更新資料Command}"
              IsRefreshing="{Binding IsBusy, Mode=TwoWay}"
      >
      <ListView.Behaviors>
        <behaviors:EventHandlerBehavior EventName="ItemTapped">
          <behaviors:InvokeCommandAction Command="{Binding MyDataClickedCommand}"  />
        </behaviors:EventHandlerBehavior>
      </ListView.Behaviors>
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/11

Xamarin FAQ 2-10 : 如何取消使用者點選ListView項目

問題

這也是個經常被詢問的問題,當使用者點選了某個 ListView 的紀錄,這個時候,ListView 會高亮顯示出使用者所點選的項目,而程式設計師在某些情況中,希望能夠取消不要高亮這個紀錄,我們該如何處理呢?

解答

這個問題解法相當的容易,會遇到產生這樣的問題,若您使用了這個方法 SelectedItem="{Binding MyItemListSelected}" 來綁定 ListView.SelectedItem 屬性,當您想要取消被使用者點選的 ListView 紀錄項目,您只需要在 ViewModel 內設定 MyItemListSelected 即可。
Xamarin-跨平台手機應用程式設計入門-粉絲團

2017/02/09

Xamarin FAQ 2-09 : 如何得知使用者點選ListView那個項目

問題

當要使用 ListView 控制項的時候,會顯示出一群的資料在這個控制項中,此時,使用者可以點選 ListView 控制項中的任何一個項目,可是,這個時候,我們要如何知道使用者到底是點選了哪個資料項目呢?

解答

ListView 裡面有個屬性 SelectedItem,您可以在 Cod Behind 程式碼中,存取這個 ListView 物件的 SelectedItem 屬性,就可以得知使用者點選了哪筆紀錄。
若是採用 MVVM 的開發方式,我們處理邏輯程式碼將不會寫在 Code Behind 內,使用撰寫在 ViewModel 中,可以,在 ViewModel 內,無法得知當時是與哪個 View 綁定再一起,因此,無法直接存取 ListView 這個物件與其相關屬性。不過,您不用擔心,您可以使用 Data Binding 技術,綁定 ViewModel 內的某個 Property到 ListView.SelectedItem Attribute上:SelectedItem="{Binding MyItemListSelected}";因此,若在 ViewModel 內,想要知道使用者點選了哪個項目,這個時候,就可直接存取 ViewModel 內的 MyItemListSelected 屬性,就會知道了。
    <ListView
      ItemsSource="{Binding MyItemList}"
      SelectedItem="{Binding MyItemListSelected}"
      Margin="20,0"
      >
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
          ...
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
Xamarin-跨平台手機應用程式設計入門-粉絲團