[Xamarin] DataBinding

해당글에서는 DataBinding 하는 방법을 알 수 있다. 예시를 통해 DataBinding 을 자세하게 알 수 있다.

 

Event : Slider 변경
Target1 : Label Padding 값 변경
Target2 : Label FontSize 값 변경

 

1-1. CS 파일에서 핸들링

 

xaml 파일

<Label x:Name="xLabel01" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" />
<Label x:Name="xLabel02" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" />

<Slider x:Name="xSlider01" Maximum="40" Minimum="10" ValueChanged="xSlider_ValueChanged" />

 

cs 파일

public DataBind()
{
    InitializeComponent();

    InitProperty();
}

private void xSlider_ValueChanged(object sender, ValueChangedEventArgs e)
{
    xLabel01.Padding = (int)xSlider01.Value;
    xLabel02.FontSize = (int)xSlider01.Value;
}

private void InitProperty()
{
    xLabel01.Padding = (int)xSlider01.Value;
    xLabel02.FontSize = (int)xSlider01.Value;
}

 

Slider의 ValueChanged Event 시 Slider Value를 Label 에 설정 하는 방법이다.

InitProperty() 메서드를 통해 초기 설정을 한다.

해당방법은 코드가 길어지고 유지보수가 어려워진다. 특수한 경우가 아니면 비추천한다.

 

 

1-2. SetBinding() 메서드

메서드중 SetBinding() 으로 DataBinding 이 가능하다.

 

cs 파일

xLabel09.BindingContext = xSlider05;
xLabel10.BindingContext = xSlider05;

xLabel09.SetBinding(Label.PaddingProperty, "Value");
xLabel10.SetBinding(Label.FontSizeProperty, "Value");

 

 

1-3. Binding Class 사용

SetBidning() 메서드에 Binding Class 를 이용하여 가능하다. Binding Class 는 재사용이 불가능하여 주의해야 한다.

만약, 재사용을 한다면 컴파일 도중 Exception 이 발생한다.

 

xmal 파일

Binding binding1 = new Binding()
{
    Source = xSlider06,
    Path = "Value"
};

Binding binding2 = new Binding()
{
    Source = xSlider06,
    Path = "Value"
};

xLabel11.SetBinding(Label.PaddingProperty, binding1);
xLabel12.SetBinding(Label.FontSizeProperty, binding1);

 

 

 

 

2-1. xaml 파일 내에서 컨트롤

 

xaml 파일

<Label x:Name="xLabel03" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" 
                   BindingContext="{x:Reference xSlider02}" Padding="{Binding Path=Value}" />
<Label x:Name="xLabel04" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" BindingContext="{x:Reference xSlider02}" FontSize="{Binding Path=Value}" />

<Slider x:Name="xSlider02" Maximum="40" Minimum="10" />

 

• BindingContext : 어떤 클래스로 할지 정한다. '{x:Reference name}' 으로 설정한다.
• {x:Reference name} : 'name' 부분에 설정값을 가져올 Name 값을 지정한다.
• {Binding Path=Value} : 원하는 Property 에 해당 처럼 값을 설정한다.

해당 코드는 CS파일 핸들링 없이 xmal 파일 내에서 DataBinding을 할 수 있다. 해당처럼 진행하면 유지보수가 좋아지며 cs 파일을 건들일이 없어진다.

 

---

 

'BindingContext="{x:Reference xSlider02}"' 부분이 공통으로 반복적으로 들어가는 경우 Property 속성에 직접 지정할 수 있다.

Property 속성 내에 'Binding Source' 를 통해 직접적으로 지정할 수 있다.

 

xaml 파일

<Label x:Name="xLabel05" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" 
                   Padding="{Binding Source={x:Reference xSlider03}, Path=Value}" />
<Label x:Name="xLabel06" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" 
       FontSize="{Binding Source={x:Reference xSlider03}, Path=Value}" />

<Slider x:Name="xSlider03" Maximum="40" Minimum="10" />

 

---

 

하지만 해당경우에도 'Binding Source' 부분이 반복적으로 들어가는 경우 좀 더 간결하게도 가능하다. 만약, <StakLayout> 에서 진행한다면 <StackLayout> 속성중 'BindingContext' 를 통해 지정이 가능하다.

 

xaml 파일

<StackLayout Padding="20" BackgroundColor="LightGray" BindingContext="{x:Reference xSlider04}">

	<Label x:Name="xLabel07" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" 
                   Padding="{Binding Path=Value}" />
    <Label x:Name="xLabel08" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" 
           FontSize="{Binding Path=Value}" />

    <Slider x:Name="xSlider04" Maximum="40" Minimum="10" />

</StackLayout>

 

미리 StackLayout 에 지정하여 공통값을 지정하여 사용 가능하다. 

 

 

---

 

 

아래 전체 코드를 적어두며 여러가지 상황에 맞춰 DataBinding을 해나가면 된다. 추가 상황에 맞는 경우가 생길시 예제를 추가하도록 하겠다.

 

 

xaml 파일

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinStudy01.DataBind">
    <ContentPage.Content>
        <ScrollView>

            <StackLayout Padding="20" BackgroundColor="LightGray" BindingContext="{x:Reference xSlider04}">

                <Label x:Name="xLabel01" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" />
                <Label x:Name="xLabel02" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" />

                <Slider x:Name="xSlider01" Maximum="40" Minimum="10" ValueChanged="xSlider_ValueChanged"></Slider>


                <Label x:Name="xLabel03" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" 
                   BindingContext="{x:Reference xSlider02}" Padding="{Binding Path=Value}"/>
                <Label x:Name="xLabel04" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" BindingContext="{x:Reference xSlider02}" FontSize="{Binding Path=Value}"></Label>

                <Slider x:Name="xSlider02" Maximum="40" Minimum="10" />


                <Label x:Name="xLabel05" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" 
                   Padding="{Binding Source={x:Reference xSlider03}, Path=Value}" />
                <Label x:Name="xLabel06" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" 
                   FontSize="{Binding Source={x:Reference xSlider03}, Path=Value}" />

                <Slider x:Name="xSlider03" Maximum="40" Minimum="10" />


                <Label x:Name="xLabel07" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" 
                   Padding="{Binding Path=Value}" />
                <Label x:Name="xLabel08" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" 
                   FontSize="{Binding Path=Value}" />

                <Slider x:Name="xSlider04" Maximum="40" Minimum="10" />


                <Label x:Name="xLabel09" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" />
                <Label x:Name="xLabel10" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" />

                <Slider x:Name="xSlider05" Maximum="40" Minimum="10"></Slider>


                <Label x:Name="xLabel11" Text="Hello!" HorizontalOptions="Center" VerticalOptions="Center" Margin="0, 50, 0, 0" />
                <Label x:Name="xLabel12" Text="Xamarin" HorizontalOptions="Center" VerticalOptions="Center" />

                <Slider x:Name="xSlider06" Maximum="40" Minimum="10"></Slider>

            </StackLayout>
        </ScrollView>
    </ContentPage.Content>
</ContentPage>

 

cs 파일

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinStudy01
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class DataBind : ContentPage
    {
        public DataBind()
        {
            InitializeComponent();

            InitProperty();
            
            xLabel09.BindingContext = xSlider05;
            xLabel10.BindingContext = xSlider05;

            xLabel09.SetBinding(Label.PaddingProperty, "Value");
            xLabel10.SetBinding(Label.FontSizeProperty, "Value");

            Binding binding1 = new Binding()
            {
                Source = xSlider06,
                Path = "Value"
            };

            Binding binding2 = new Binding()
            {
                Source = xSlider06,
                Path = "Value"
            };

            xLabel11.SetBinding(Label.PaddingProperty, binding1);
            xLabel12.SetBinding(Label.FontSizeProperty, binding1);
        }

        private void xSlider_ValueChanged(object sender, ValueChangedEventArgs e)
        {
            xLabel01.Padding = (int)xSlider01.Value;
            xLabel02.FontSize = (int)xSlider01.Value;
        }

        private void InitProperty()
        {
            xLabel01.Padding = (int)xSlider01.Value;
            xLabel02.FontSize = (int)xSlider01.Value;
        }
    }
}