Xamarin Forms 如何Binding列表中的按鈕
Xamarin Forms 如何Binding列表中的按鈕
| 簡介 |
如何在ListView中Binding 按鈕 |
| 作者 |
張朝銘 |
1. 前言
l 本文件用來提供Xamrin Forms開發人員開發ListView應用
l 開發工具使用Visual Studio 2017
l 適合Xamarin Forms進階開發者
2. 目的
3. 本文
在APP開發中列表是常使用的控制項，有時在列表內我們會放入按鈕，當使用者按下後再對應其功能，本文將透過View與View Binding的技巧讓Button的Binding回到當頁的ViewMode上。
首先準備含有ListView相關的XAML內容，並建立一個含有Button的ItemTemplate如下:
<ListView ItemsSource="{Binding Items}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="{Binding Value}" HorizontalOptions="FillAndExpand"/>
<Button Text="按我"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
該ListView會讀取ViewModel中的Items屬性作為資料來源，列表中的資料則是會讀取
其ViewModel中的Value屬性顯示。
接著建立該頁面使用的ViewModel與列表中資料所使用的ViewModel。
3.2建立ViewModel
接著建立該頁面使用的ViewModel與列表中資料所使用的ViewModel，在頁面使用的ViewModel建構子內，同時初始化要展現的集合資料。如下XAML片段:
MainViewModel為該頁面使用:
public class MainViewModel
{
public List<ItemViewModel> Items { get; set; }
public MainViewModel()
{
this.Items = new List<ItemViewModel>();
for (int i = 1; i <= 100; i++)
this.Items.Add(new ItemViewModel() { Value = $"我是第{i}" });
}
}
ItemViewModel為資料集合使用:
public class ItemViewModel
{
public string Value { get; set; }
}
呈現以下結果畫面:
正常情況下Button的點擊Binding會對應到其ViewModel中，但通常我們的需求是需要在頁面的ViewModel取得哪一個Item被點擊了，因此需要利用View and View Binding的技巧將點擊事件轉到MainViewModel上。
首先在MainViewModel中建立將會由Button觸發的Command，並在建構子建立其方法，如下程式碼片段所示:
public ICommand OnClick
{
get
{
if (this.onClick == null)
this.onClick = new Command<ItemViewModel>(item =>
{
PageHelper.Alert("提示", $"您按下了{item.Value}");
});
return this.onClick;
}
}
private ICommand onClick;
該Command會傳入被按下的Item代表的ViewModel，意即在該Button的Command參數會把ViewModel傳入。使用View與View Binding的技巧，將Button 本身Binding的Source換成ListView的BindingContext，而CommandParameter使其Binding到DataTemplate的StackLayout上，最後將Command Binding到前述所建立的OnClick上。
最後完成的ListView之XAML內容如下
<ListView x:Name="list" ItemsSource="{Binding Items}" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" x:Name="stLayout">
<Label Text="{Binding Value}" HorizontalOptions="FillAndExpand"/>
<Button Text="按我"
BindingContext="{
Binding Source={x:Reference list},
Path=BindingContext }"
CommandParameter="{
Binding Source={x:Reference stLayout},
Path=BindingContext}"
Command="{Binding OnClick}"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
完成圖示
