C#對(duì)Xamarin框架進(jìn)行數(shù)據(jù)綁定

更新時(shí)間：2022年01月19日 14:15:53 作者：老馬-Max

這篇文章介紹了C#對(duì)Xamarin框架進(jìn)行數(shù)據(jù)綁定，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

關(guān)于數(shù)據(jù)綁定

Xamarin 單向、雙向綁定

Xaml綁定

C#代碼綁定

在此之前，幾段偽代碼幫助像我一樣菜的同學(xué)入門。。。

假如說(shuō)，有兩個(gè)控件，一個(gè)是滑動(dòng)條(Slider)，一個(gè)是顯示文本的標(biāo)簽(Label)。

            Slider slider = new Slider()
            {
                Maximum = 1,
                Value = 10
            };

            Label label = new Label();
            label.Text = slider.Value.ToString();

滑動(dòng)條(Slider)滑動(dòng)的最小單位是 1，初始化值是 10。

我們想用標(biāo)簽(Label)顯示滑動(dòng)條的值，在代碼里可以直接賦值。

label.Text = slider.Value.ToString();

但是，這樣只能獲取一次值，我們想滑動(dòng)條每次滑動(dòng)，標(biāo)簽動(dòng)態(tài)顯示滑動(dòng)條的值，這時(shí)候就需要綁定。

方式1：

            Slider slider = new Slider()
            {
                Maximum = 1,
                Value = 10
            };

            Label label = new Label();
            label.Text = "666"; // 隨便初始化一個(gè)值

            label.BindingContext = slider;      // 與一個(gè)對(duì)象相關(guān)聯(lián)

            // 設(shè)置一個(gè)綁定
            // 將 Label 類型的 Text 與 slider 的 Value 屬性綁定起來(lái)
            label.SetBinding(Label.TextProperty,"Value");

方式2：

            Slider slider = new Slider()
            {
                Maximum = 1,
                Value = 10
            };

            Label label = new Label();
            label.Text = "666"; // 隨便初始化一個(gè)值

            Binding binding = new Binding()
            {
                Source = slider, // 關(guān)聯(lián)數(shù)據(jù)源
                Path = "Value"   // 綁定數(shù)據(jù)源的屬性
            };

            // 綁定
            label.SetBinding(Label.TextProperty, binding);

上面里，有關(guān)鍵字需要記住

BindingContext()、SetBinding()、Binding、Source、Path。

視圖-視圖綁定

視圖-視圖綁定，即 UI 控件間的綁定，使用 Xaml 代碼即可完成，不需要 C#代碼。

上一節(jié)中，使用偽代碼來(lái)作為示范，顯示了兩種綁定方式，下面將以兩種方式為例，編寫(xiě) Xaml 代碼的綁定。

首先，要建立數(shù)據(jù)源

<Slider x:Name="slider" Maximum="1.0" VerticalOptions="CenterAndExpand" />

綁定數(shù)據(jù)使用 {Binding ... ...}

然后按照第一種方式就行綁定

        <Label x:Name="label" 
               BindingContext="{x:Reference Name=slider}"    
               Text="{Binding Path=Value}" />

x:Reference 是拓展標(biāo)記，在 XAML 標(biāo)記中其他地方聲明的實(shí)例的引用。指明所引用的元素的 x:Name。就是一種固定格式，主要是里面的 Name，要填寫(xiě)數(shù)據(jù)控件的 X:Name 屬性。

{Binding Path=Value} 表明操作是 Binding ，即綁定數(shù)據(jù)，綁定的數(shù)據(jù)是 slider 的 Value 屬性。

上面綁定方式，先在 BindingContext 屬性中綁定數(shù)據(jù)源對(duì)象，再在 Text 屬性中綁定數(shù)據(jù)源對(duì)象的 Value 屬性。

第二種方式

<Label Text="{Binding  Source={x:Reference Name=slider}, Path=Value}" />

第二種方式，直接使用 {Binding ... ... } 綁定數(shù)據(jù)，Source 設(shè)置要綁定的數(shù)據(jù)源對(duì)象，Path 綁定了這個(gè)對(duì)象的某個(gè)屬性。

為了讓界面好看一些，總結(jié)上面的代碼，寫(xiě)成

    <StackLayout>
        <Label x:Name="label" 
               BindingContext="{x:Reference Name=slider}"    
               Text="{Binding Path=Value}" />
        
        <Slider x:Name="slider" Maximum="1.0" VerticalOptions="CenterAndExpand" />
        
        <Label Text="{Binding  Source={x:Reference Name=slider}, Path=Value}" />

    </StackLayout>

但是上面的小數(shù)點(diǎn)位數(shù)太多，不符合我們需要的格式，我們可以使用 StringFormat 對(duì)數(shù)據(jù)進(jìn)行格式化。

Text="{Binding Path=Value,StringFormat='{0:F1}'}

綁定模式

綁定枚舉

綁定類型的BindingMode枚舉：

Default
OneWay -值從源傳輸?shù)侥繕?biāo)
OneWayToSource -值從目標(biāo)傳輸?shù)皆?/li>
TwoWay -值傳輸源和目標(biāo)之間的這兩種方式
OneTime-數(shù)據(jù)從源到目標(biāo)進(jìn)行，但僅當(dāng)BindingContext發(fā)生更改時(shí)

上面的的數(shù)據(jù)綁定，是一對(duì)一的，而且是單向的數(shù)據(jù)綁定，是先有 Slider 控件，再在 Label 中綁定。

而且實(shí)際場(chǎng)景，1對(duì)1并且數(shù)據(jù)雙向影響、1對(duì)多并且多個(gè)數(shù)據(jù)源數(shù)據(jù)匯集到一個(gè)控件等。

單個(gè)控件的不同屬性都可以綁定數(shù)據(jù)。但是，每個(gè)控件只能有一個(gè)BindingContext，因此，在該視圖上的多個(gè)數(shù)據(jù)綁定必須全部引用同一對(duì)象的屬性。

如果你使用上小節(jié)的第一種方式的話，那么只能綁定=一個(gè)對(duì)象和使用這個(gè)對(duì)象的屬性。

如果使用第二種方法，則可以綁定多個(gè)數(shù)據(jù)源。

一對(duì)多-目標(biāo)綁定源數(shù)據(jù)

根據(jù)之前的示例，假如 Label 的多個(gè)屬性，同時(shí)要綁定不同的數(shù)據(jù)，可以這樣寫(xiě)。

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!-- Scale：大小， Rotation：旋轉(zhuǎn)角度 -->
        <Label x:Name="label"
               Text="TEXT"
               Scale="{Binding Source={x:Reference Name=slider1},Path=Value}"   
               Rotation="{Binding Source={x:Reference Name=slider2},Path=Value}"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <!-- 用來(lái)控制大小 -->
        <Slider x:Name="slider1"
                Grid.Row="1" Grid.Column="0"
                Value="5"
                Maximum="10" />


        <!--控制旋轉(zhuǎn)角度 -->
        <Slider x:Name="slider2"
                Grid.Row="2" Grid.Column="0"
                Maximum="360"/>
    </Grid>

一對(duì)多-源對(duì)象綁定目標(biāo)

上面的方法不太靈活，假設(shè) Label 是公用的，要在 Label 里面配置多個(gè)屬性的數(shù)據(jù)來(lái)源，要通過(guò)自身編寫(xiě)綁定，而且一個(gè)屬性只能綁定一個(gè)數(shù)據(jù)對(duì)象。

為了降低耦合度，降低 Label 綁定數(shù)據(jù)的復(fù)雜程度，并且使得多個(gè)對(duì)象都可以修改 Label 的屬性。

我們可以反過(guò)來(lái)，創(chuàng)建多個(gè)控件，Label 是數(shù)據(jù)源，其他控件是目標(biāo)源，但是數(shù)據(jù)卻是從其他控件提供給 Label 的。有的繞，沒(méi)事，下面舉例說(shuō)明。

        <!-- Scale：大小， Rotation：旋轉(zhuǎn)角度 -->
        <Label x:Name="label"
               Text="TEXT"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <!-- 用來(lái)控制大小 -->
        <Slider x:Name="scaleSlider"
                BindingContext="{x:Reference label}"
                Grid.Row="1" Grid.Column="0"
                Maximum="10"
                Value="{Binding Scale, Mode=TwoWay}" />

        <!--控制旋轉(zhuǎn)角度 -->
        <Slider x:Name="rotationSlider"
                BindingContext="{x:Reference label}"
                Grid.Row="2" Grid.Column="0"
                Maximum="360"
                Value="{Binding Rotation, Mode=OneWayToSource}" />

label 不作任何處理，而 scaleSlider 和 rotationSlider 把 label 作為數(shù)據(jù)源綁定，從綁定的定義來(lái)說(shuō)， label 是數(shù)據(jù)源， label 的屬性數(shù)據(jù)將作為目標(biāo)控件 scaleSlider、 rotationSlider 的屬性值。

咦？好像搞錯(cuò)了，我們是要通過(guò)別的控件，去修改 label 的屬性值，怎么變成了用 label 的屬性值當(dāng)作此控件的屬性值了？

原因在于使用了 Mode 。

OneWayToSource 枚舉：值從目標(biāo)傳輸?shù)皆础?/p>

從綁定的代碼和定義來(lái)說(shuō)，label 是數(shù)據(jù)源，滑動(dòng)條是目標(biāo)，但是數(shù)據(jù)是反向流通的。

文本框雙向綁定

示例代碼如下

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="2*" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="2*" />
        </Grid.ColumnDefinitions>
        <Editor x:Name="edit1"
                Grid.Row="0"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Text="a"/>
        
        <Editor x:Name="edit2"
                Grid.Row="1"
                Grid.Column="1"
                Grid.ColumnSpan="2"
                Text="{Binding Source={x:Reference edit1},Path=Text,Mode=TwoWay}"/>
    </Grid>

官方示例

微軟官方文檔有一個(gè)示例代碼量比較多，有興趣可以參考一下

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamlSamples.SliderTransformsPage"
             Padding="5"
             Title="Slider Transforms Page">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!-- Scaled and rotated Label -->
        <Label x:Name="label"
               Text="TEXT"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <!-- Slider and identifying Label for Scale -->
        <Slider x:Name="scaleSlider"
                BindingContext="{x:Reference label}"
                Grid.Row="1" Grid.Column="0"
                Maximum="10"
                Value="{Binding Scale, Mode=TwoWay}" />

        <Label BindingContext="{x:Reference scaleSlider}"
               Text="{Binding Value, StringFormat='Scale = {0:F1}'}"
               Grid.Row="1" Grid.Column="1"
               VerticalTextAlignment="Center" />

        <!-- Slider and identifying Label for Rotation -->
        <Slider x:Name="rotationSlider"
                BindingContext="{x:Reference label}"
                Grid.Row="2" Grid.Column="0"
                Maximum="360"
                Value="{Binding Rotation, Mode=OneWayToSource}" />

        <Label BindingContext="{x:Reference rotationSlider}"
               Text="{Binding Value, StringFormat='Rotation = {0:F0}'}"
               Grid.Row="2" Grid.Column="1"
               VerticalTextAlignment="Center" />

        <!-- Slider and identifying Label for RotationX -->
        <Slider x:Name="rotationXSlider"
                BindingContext="{x:Reference label}"
                Grid.Row="3" Grid.Column="0"
                Maximum="360"
                Value="{Binding RotationX, Mode=OneWayToSource}" />

        <Label BindingContext="{x:Reference rotationXSlider}"
               Text="{Binding Value, StringFormat='RotationX = {0:F0}'}"
               Grid.Row="3" Grid.Column="1"
               VerticalTextAlignment="Center" />

        <!-- Slider and identifying Label for RotationY -->
        <Slider x:Name="rotationYSlider"
                BindingContext="{x:Reference label}"
                Grid.Row="4" Grid.Column="0"
                Maximum="360"
                Value="{Binding RotationY, Mode=OneWayToSource}" />

        <Label BindingContext="{x:Reference rotationYSlider}"
               Text="{Binding Value, StringFormat='RotationY = {0:F0}'}"
               Grid.Row="4" Grid.Column="1"
               VerticalTextAlignment="Center" />
    </Grid>
</ContentPage>

簡(jiǎn)單的集合綁定

MainPage.xaml 里添加

    <ListView x:Name="lview">
    </ListView>

MainPage.xaml.cs 里，改成

    public partial class MainPage : ContentPage
    {
        public static List<string> lists = new List<string> {"a","b","c","d","e","f" };
        public MainPage()
        {
            InitializeComponent();
            lview.ItemsSource = lists;
        }
    }

運(yùn)行后，會(huì)自動(dòng)出現(xiàn)列表。

到此這篇關(guān)于C#對(duì)Xamarin框架進(jìn)行數(shù)據(jù)綁定的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: