每個MAUI的可系結屬性都有預設系結模式,可在建立可系結屬性時設定,並且可從 DefaultBindingMode 物件的 屬性 BindableProperty 取得。
這個預設繫結模式表示當該屬性是資料繫結目標時,模式即已生效。並且此模式是 OneWay
。 當這些屬性是資料繫結目標時,即會從來源設定目標屬性
我們打開MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Todo.MainPage">
<ScrollView>
<VerticalStackLayout>
<!-- 3 Row(2*, Auto, 100), 2 Col(Auto, Auto)-->
<!-- * 是Width預設值(1*) -->
<Grid RowDefinitions="2*, Auto, Auto"
ColumnDefinitions="Auto, 2*"
BindingContext="{x:Reference slider}">
<Label Grid.Row="0"
Grid.ColumnSpan="2"
FontSize="{Binding Value}"
Text="Wlecome TodoPage"
HorizontalOptions="Center"
VerticalOptions="Center" />
...
</Grid>
<Slider x:Name="slider"
Maximum="100" />
</VerticalStackLayout>
</ScrollView>
</ContentPage>
我們看到
<Grid RowDefinitions="2*, Auto, Auto"
ColumnDefinitions="Auto, 2*"
BindingContext="{x:Reference slider}">
<Label Grid.Row="0"
Grid.ColumnSpan="2"
FontSize="{Binding Value}"
Text="Wlecome TodoPage"
HorizontalOptions="Center"
VerticalOptions="Center" />
...
<Slider x:Name="slider"
Maximum="100" />
Slider
是我們資料繫結的來源,而我們的目標是Grid
,並且透過{Binding Value}
來達到修改我們的FontSize。(Slider和Grid做繫結,並讓Label綁定值)
而如果我們只要單單對Label和Slider做繫結的話,我們也可以更改為
<Grid RowDefinitions="2*, Auto, Auto"
ColumnDefinitions="Auto, 2*">
<Label Grid.Row="0"
Grid.ColumnSpan="2"
FontSize="{Binding Source={x:Reference slider}, Path=Value}"
Text="Wlecome TodoPage"
HorizontalOptions="Center"
VerticalOptions="Center" />
...
<Slider x:Name="slider"
Maximum="100" />
接下來重新複習了什麼是單向繫結後,我們開始介紹雙向繫結
如果目標屬性上的預設系結模式不適用於特定資料系結,可藉將Mode延伸的Binding
屬性設定為列舉的BindingMode
其中一個成員來覆寫它:
大部分可系結的屬性都有預設OneWay的系結模式,但某些屬性的預設系結模式可以為TwoWay,像是:
Date
屬性Text
屬性IsRefreshing
屬性SelectedItem
屬性SelectedIndex
和SelectedItem
屬性Value
屬性IsToggled
屬性On
屬性Time
屬性當資料繫結搭配MVVM模式使用時,viewmodel 類別是資料系結來源,而view是由資料系結目標等view所組成。
並且我們可能會希望頁面上的每個view都以viewmodel中對應的屬性值初始化,但view中的變更也會影響viewmodel屬性
今天簡單的介紹了data binding,明天開始進行todo的實作