XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書
顯示具有 Xamarin FAQ 標籤的文章。 顯示所有文章
顯示具有 Xamarin FAQ 標籤的文章。 顯示所有文章

2017/04/22

Xamarin FAQ 2-27 : 在XAML內,設定多個列舉值

問題

有些 XAML 的屬性是個列舉,可以設定多個列舉值,例如, FontAttributes 就是其中一列,可是,當我需要在 XAML 中定義多個列舉值的時候,我該如何定義呢?

解答

您可以參考底下用法,多個列舉值,可以使用逗號 , 將其分開即可
        <Label Text="多奇數位創意有限公司" FontAttributes="Italic,Bold"/>
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/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-跨平台手機應用程式設計入門-粉絲團

2017/02/19

Xamarin FAQ 2-18 : 在ListView中,如何根據紀錄類型,顯示出不同的樣貌(簡單方法)

問題

繼續 Xamarin FAQ 2-17的問題,這個時候,若每筆紀錄要出現的內容或者格式,想要依據當時的資料內容,進行變更要顯示的資料格式或者內容,這個時候,可以使用哪種技術呢?

解答

這個問題,一樣可以有多種技術可以選擇,在這裡,我們使用了在 ViewModel 中來處理;主要的設計方法為,我們需要在 ViewModel 內加入一些其他屬性,這些屬性的內容會依據當時的資料內容,進行動態的調整其物件值。在底下的 XAML 中,我們希望每筆紀錄中,當紀錄資料的出生入其大於等於1980,則文字顏色要設定成為 綠色,否則,文字顏色要設定成為 紅色。因此,每個文字的顏色,並不是固定顏色值,而是綁定 ViewModel 內的某個屬性。
        <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="{Binding ShowColor}" FontAttributes="Bold" />
                            <Label Grid.Column="1" Text="{Binding DateOfBirth, StringFormat='{0:d}'}" TextColor="{Binding ShowColor}" />
                            <Label Grid.Column="2" Text="{Binding Location}" TextColor="{Binding ShowColor}" HorizontalTextAlignment="End" />
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
在 ViewModel 中,當這個頁面要顯示之前,ViewModel 的 OnNavigatedTo 方法會被執行,此時,我們將會進行要顯示在 ListView 內所有物件的值,就在此時,我們判斷每筆紀錄的生日欄位,若出生年份大於 1980,則會設定 ShowColor 這個屬性值為綠色,否則,設定為紅色。經過這樣處理,ListView 內的每筆紀錄文字,就會顯示不同的顏色了。
        public void OnNavigatedTo(NavigationParameters parameters)
        {
            People = new ObservableCollection<Person> {
                new Person ("Kath", new DateTime (1985, 11, 20), "France"),
                new Person ("Steve", new DateTime (1975, 1, 15), "USA"),
                new Person ("Lucas", new DateTime (1988, 2, 5), "Germany"),
                new Person ("John", new DateTime (1976, 2, 20), "USA"),
                new Person ("Tariq", new DateTime (1987, 1, 10), "UK"),
                new Person ("Jane", new DateTime (1982, 8, 30), "USA"),
                new Person ("Tom", new DateTime (1977, 3, 10), "UK")
            };

            foreach (var item in People)
            {
                if(item.DateOfBirth.Year >= 1980)
                {
                    item.ShowColor = Color.Green;
                }
                else
                {
                    item.ShowColor = Color.Red;
                }
            }
        }
Xamarin-跨平台手機應用程式設計入門-粉絲團

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-跨平台手機應用程式設計入門-粉絲團