iT邦幫忙

2022 iThome 鐵人賽

DAY 15
0
Software Development

30天學習.Net MAUI系列 第 15

15.關於Data binding (二)

  • 分享至 

  • xImage
  •  

每個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其中一個成員來覆寫它:

  • Default
  • TwoWay — 資料會在來源與目標之間雙向運作
  • OneWay — 資料會從來源移至目標
  • OneWayToSource — 資料會從目標移至來源
  • OneTime — 資料會從來源移至目標,但只有在 BindingContext 變更 (.NET MAUI 3.0)

大部分可系結的屬性都有預設OneWay的系結模式,但某些屬性的預設系結模式可以為TwoWay,像是:

  • DatePicker 的Date屬性
  • Editor、Entry、SearchBar 及 EntryCell 的Text屬性
  • ListView 的IsRefreshing屬性
  • MultiPage 的SelectedItem屬性
  • Picker 的SelectedIndexSelectedItem屬性
  • Slider和 Stepper 的Value屬性
  • Switch 的IsToggled屬性
  • SwitchCell 的On屬性
  • TimePicker 的Time屬性

當資料繫結搭配MVVM模式使用時,viewmodel 類別是資料系結來源,而view是由資料系結目標等view所組成。

並且我們可能會希望頁面上的每個view都以viewmodel中對應的屬性值初始化,但view中的變更也會影響viewmodel屬性


今天簡單的介紹了data binding,明天開始進行todo的實作


上一篇
14.關於Data binding (一)
下一篇
16.實作Todo (一)
系列文
30天學習.Net MAUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言