안녕하세요. 엑셀 소프트의 타부치입니다.

이 문서는 Xamarin.Forms에서 여러 Switch를 실행하는 Switch를 만들려면 - Xamarin 한국어 정보의 원본 텍스트입니다.

글쎄요. IT 스터디 검색 앱을 만들고 있습니다. 간토 Switch를 토글하면 도쿄, 가나가와~와 같이 간토 전건을 토글한다. 라든가 그런 일이 하고 싶었던 것입니다.

Xamarin.Forms의 데이터 바인딩에 대해입니다. 예를 들면 하나의 원스위치를 토글하면 복수의 앞스위치가 모여 토글되는 것을 하고 싶습니다. 원래 스위치에 복수의 Binding을 설정할 수 없는 것 같습니다만 어떻게 하는 것이 좋습니까? - 타부치 요시토 @ 엑셀 소프트웨어 (@ytabuchi) 2015, 7월 9


중얼거린 곳, 유식자 여러분이 들러보고 싶다고 여러가지 생각해 가르쳐 주세요. 정말 고마워요 눈물 @ 야쿠모모 씨는 Qiita 엔트리까지 써 주셨습니다. 감사합니다!

여러 가지 방법이 있습니다만, 각 Switch 의 값은 ViewModel 에 보존해 두고 싶기 때문에, 프로퍼티의 곳에서 이지하는 것이 좋다고 하는 곳에 침착했습니다.

화면 사진

보기

Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:vm="clr-namespace:XF_ManySwitches;assembly=XF_ManySwitches" 
             x:Class="XF_ManySwitches.SwitchPageXaml"
             Title="SwitchPage Xaml">
  <ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness" 
      iOS="0,20,0,0" 
      Android="0" 
      WinPhone="0" />
  </ContentPage.Padding>
  <ContentPage.BindingContext>
    <vm:SwitchPageViewModel />
  </ContentPage.BindingContext>
  <ContentPage.Content>
    <TableView Intent="Menu">
      <TableRoot>
        <TableSection Title="Toggle all">
          <SwitchCell Text="Toggle sw1 &amp; sw2" 
                      On="{Binding SwAllValue, Mode=OneWayToSource}" />
        </TableSection>
        <TableSection Title="Toggle each">
          <SwitchCell Text="Toggle sw1" 
                      On="{Binding Sw1Value, Mode=TwoWay}" />
          <SwitchCell Text="Toggle sw2" 
                      On="{Binding Sw2Value, Mode=TwoWay}" />
        </TableSection>
        <TableSection Title="Values of ViewModel">
          <TextCell Text="sw1 value" 
                    Detail="{Binding Sw1Value}" />
          <TextCell Text="sw2 value" 
                    Detail="{Binding Sw2Value}" />
        </TableSection>
      </TableRoot>
    </TableView>
  </ContentPage.Content>
</ContentPage>

C#

SwitchPageViewModel vm = new SwitchPageViewModel();
BindingContext = vm;

var sw0 = new SwitchCell { Text = "Toggle sw1 & sw2" };
sw0.SetBinding(SwitchCell.OnProperty, "SwAllValue", BindingMode.OneWayToSource);
var sw1 = new SwitchCell { Text = "Toggle sw1" };
sw1.SetBinding(SwitchCell.OnProperty, "Sw1Value", BindingMode.TwoWay);
var sw2 = new SwitchCell { Text = "Toggle sw2" };
sw2.SetBinding(SwitchCell.OnProperty, "Sw2Value", BindingMode.TwoWay);
var tc1 = new TextCell { Text = "sw1 value" };
tc1.SetBinding(TextCell.DetailProperty, "Sw1Value");
var tc2 = new TextCell { Text = "sw2 value" };
tc2.SetBinding(TextCell.DetailProperty, "Sw2Value");

var tv = new TableView
{
    Intent = TableIntent.Menu,
    Root = new TableRoot
    {
        new TableSection("Toggle all")
        {
            sw0,
        },

        new TableSection("Toggle each")
        {
            sw1,
            sw2,
        },
        new TableSection("Values of ViewModel")
        {
            tc1,
            tc2,
        }
    }
};

Content = new StackLayout
{ 
    Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0),
    Children =
    {
        tv,
    }
};

ViewModel

bool _sw1Value;

public bool Sw1Value
{
    get { return _sw1Value; }
    set
    {
        if (_sw1Value != value)
        {
            _sw1Value = value;
            OnPropertyChanged("Sw1Value");
        }
    }
}

bool _sw2Value;

public bool Sw2Value
{
    get { return _sw2Value; }
    set
    {
        if (_sw2Value != value)
        {
            _sw2Value = value;
            OnPropertyChanged("Sw2Value");
        }
    }
}

bool _swAllValue;

public bool SwAllValue
{
    get { return _swAllValue; }
    set
    {
        if (_swAllValue != value)
        {
            _swAllValue = value;
            OnPropertyChanged("SwAllValue");
        }
        if (_sw1Value != value)
        {
            _sw1Value = value;
            OnPropertyChanged("Sw1Value");
        }
        if (_sw2Value != value)
        {
            _sw2Value = value;
            OnPropertyChanged("Sw2Value");
        }
    }
}

public event PropertyChangedEventHandler PropertyChanged;

protected virtual void OnPropertyChanged(string propertyName)
{
    if (PropertyChanged != null)
    {
        PropertyChanged(this,
            new PropertyChangedEventArgs(propertyName));
    }
}

포인트

ViewModel 의 일괄로 변경하는 「변경원 Switch」측에서 변경하고 싶은 Switch 의 value 를 함께 체크해 변경하도록 합니다.

변경 소스 Switch 에서는 BindingMode 를 OneWayToSource 로서 ViewModel 에 전달할 뿐으로 합니다.

이것으로 「변경처 Switch」를 자유롭게 변경하면서, 변경원 Switch 를 토글했을 때만 일괄로 변경할 수 있습니다.

이번은 Switch 입니다만, 무언가의 힌트가 되면 기쁩니다.

Xamarin.Forms의 Xaml이지만 {Binding 이후의 속성에 IntelliSense가 작동하지 않으며 무엇을 Binding하면 좋을지 잘 모릅니다. 코드는 엄청난 중복이 되어 버립니다만, C# 로 쓰면 IntelliSense 로 무엇을 Binding 하는지 알기 때문에, 먼저 C# 로 써 보는 것이 좋을지도 모릅니다.

Mvvm을 사용할 수있는 Xamarin을 신경 쓰는 사람은

꼭 다운로드 (직접)/다운로드 (당사를 통해) 하고 만져보세요.
학습 리소스 이나 JXUG 링크 페이지 에 참고 자료를 모으고 있으므로 아울러 아무쪼록.

Xamarin의 정보를 원하시는 분은 이 블로그도 구독해 주시면 기쁩니다.

이상입니다.