Xamarin.forms: Xamarin Forms ์ฝ˜ํ…์ธ  ๋ณด๊ธฐ(์‚ฌ์šฉ์ž ์ปจํŠธ๋กค)๊ฐ€ ListView ๋‚ด์—์„œ ๋ฐ”์ธ๋”ฉ๋˜์ง€ ์•Š์Œ

์— ๋งŒ๋“  2018๋…„ 05์›” 15์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: xamarin/Xamarin.Forms

์„ค๋ช…

๋ฌธ์ž์—ด์˜ ObservableCollection์— ๋ฐ”์ธ๋”ฉ๋œ ListView๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. Listview์—๋Š” ํ•˜๋‚˜์˜ ๋ ˆ์ด๋ธ”๊ณผ ํ•˜๋‚˜์˜ ContentView(๋ ˆ์ด๋ธ”๋งŒ ํฌํ•จ)๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘˜ ๋‹ค ๋™์ผํ•œ ์ปฌ๋ ‰์…˜์— ๋ฐ”์ธ๋”ฉ๋ฉ๋‹ˆ๋‹ค.

๋˜ํ•œ ์ปฌ๋ ‰์…˜์— ๋Œ€ํ•œ ์ž„์˜์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฒ„ํŠผ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌธ์ œ๋Š” ์•ฑ์„ ์‹คํ–‰ํ•˜๊ณ  ๋ฐ์ดํ„ฐ ์ƒ์„ฑ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด ๋ ˆ์ด๋ธ”์ด ์—…๋ฐ์ดํŠธ๋˜์ง€๋งŒ ContentView๋Š” ์—…๋ฐ์ดํŠธ๋˜์ง€ ์•Š๋Š”๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ฒˆ์‹ ๋‹จ๊ณ„

  1. VS 2017์„ ์—ด๊ณ  ์ƒˆ Xamarin Forms ๋นˆ ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ(ํ‘œ์ค€)
  2. MainPage.xaml์—์„œ ๋ฒ„ํŠผ๊ณผ Listview๊ฐ€ ์žˆ๋Š” StackLayout ๋ฐฐ์น˜
  3. Listview์˜ DataTemplate์„ ํ•˜๋‚˜์˜ Label๊ณผ ํ•˜๋‚˜์˜ ContentView๋ฅผ ํฌํ•จํ•˜๋Š” ViewCell๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค(์•„๋ž˜์—์„œ ์ƒ์„ฑํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค). Text ์†์„ฑ์„ ObservableCollection ํ•ญ๋ชฉ์— ๋ฐ”์ธ๋”ฉํ•ฉ๋‹ˆ๋‹ค.
  4. MainPage.xaml.cs์—์„œ Observalbe๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.์žฌ์‚ฐ
  5. ์ƒ์„ฑ์ž์—์„œ ์ž„์˜์˜ ๊ฐ’์œผ๋กœ Observable ์ปฌ๋ ‰์…˜์„ ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ๋ฐ”์ธ๋”ฉ ์ปจํ…์ŠคํŠธ๋ฅผ this๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
  6. ๋ฒ„ํŠผ ํด๋ฆญ์„ ๊ตฌ๋…ํ•˜๊ณ  ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค Observable Collection์— ์ž„์˜์˜ ๊ฐ’์„ ํ• ๋‹นํ•˜์‹ญ์‹œ์˜ค.
  7. ์œ„์—์„œ ์‚ฌ์šฉํ•œ ์ƒˆ ContentView(xaml)๋ฅผ ๋งŒ๋“ค๊ณ  ๊ทธ ์•ˆ์— ๋ ˆ์ด๋ธ”์„ Text ์†์„ฑ์— ๋ฐ”์ธ๋”ฉํ•˜์—ฌ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๋‹ค.
  8. xaml.cs์—์„œ ๋ฐ”์ธ๋”ฉ ๊ฐ€๋Šฅํ•œ ์†์„ฑ ํ…์ŠคํŠธ๋ฅผ ๋งŒ๋“ญ๋‹ˆ๋‹ค.
  9. ๋˜๋Š” VS 2017(15.7.1)์—์„œ ์ฒจ๋ถ€๋œ ์†”๋ฃจ์…˜์˜ ์••์ถ•์„ ํ’€๊ณ  ์—ด ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    ํ…Œ์ŠคํŠธ์ƒ˜ํ”Œ.zip
  10. Android์—์„œ ์‹คํ–‰ํ•˜๊ณ  ์ƒ์„ฑ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•ฉ๋‹ˆ๋‹ค.
  11. ๋ ˆ์ด๋ธ”์— ๋ฐ”์ธ๋”ฉ๋œ ํ…์ŠคํŠธ๋Š” ๋ณ€๊ฒฝ๋˜์ง€๋งŒ ContentView์— ๋ฐ”์ธ๋”ฉ๋œ ํ…์ŠคํŠธ๋Š” ๋ณ€๊ฒฝ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์˜ˆ์ƒ๋˜๋Š” ๋™์ž‘

์ฝ˜ํ…์ธ  ๋ณด๊ธฐ ๋‚ด๋ถ€์˜ ๋ ˆ์ด๋ธ”๋„ ๋ณ€๊ฒฝ๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ ํ–‰๋™

์ฝ˜ํ…์ธ  ๋ณด๊ธฐ ๋‚ด๋ถ€์˜ ๋ ˆ์ด๋ธ”์€ ๋™์ผํ•˜๊ฒŒ ์œ ์ง€๋ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ์ •๋ณด

  • ๋ฌธ์ œ๊ฐ€ ์žˆ๋Š” ๋ฒ„์ „: 4.10.0.442
  • ๋งˆ์ง€๋ง‰์œผ๋กœ ์•Œ๋ ค์ง„ ์–‘ํ˜ธํ•œ ๋ฒ„์ „:
  • IDE: VS 2017(15.7.1)
  • ํ”Œ๋žซํผ ๋Œ€์ƒ ํ”„๋ ˆ์ž„์›Œํฌ:

    • iOS:

    • ์•ˆ๋“œ๋กœ์ด๋“œ: 8.3.0.19

    • UWP:

  • Android ์ง€์› ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฒ„์ „:
  • ๋„ˆ๊ฒŸ ํŒจํ‚ค์ง€:
    Xamarin.Forms
    NETStandard.Library

  • ์˜ํ–ฅ์„ ๋ฐ›๋Š” ์žฅ์น˜:

์Šคํฌ๋ฆฐ์ƒท

์žฌ์ƒ์‚ฐ ๋งํฌ

https://github.com/AppGrate/ListViewBindingIssue

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ–‰์œ„

this.BindingContext = this;

MagicBox.xaml.cs์—์„œ BindingContext๋ฅผ ํ˜„์žฌ ๊ฐœ์ฒด๋กœ ๊ฐ•์ œ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ถ€๋ชจ์˜ BindingContext๊ฐ€ ๋” ์ด์ƒ ์ƒ์†๋˜์ง€ ์•Š์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ž‘๋™ํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด ์ฝ”๋“œ๋ฅผ ๋‹ค์Œ์œผ๋กœ ๋ณ€๊ฒฝํ•˜์‹ญ์‹œ์˜ค.

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MagicBox : ContentView
    {

        public static readonly BindableProperty TextProperty =
            BindableProperty.Create("Text", typeof(string), typeof(MagicBox), default(string));

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public MagicBox ()
        {
            InitializeComponent ();
        }
    }

๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์˜ xaml์€

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestSample.Controls.MagicBox"
             x:Name="box">
  <ContentView.Content>
      <Grid>
          <Label Text="{Binding Text, Source={x:Reference box}}" />
      </Grid>
  </ContentView.Content>
</ContentView>

๋ชจ๋“  3 ๋Œ“๊ธ€

์ผ์ฃผ์ผ ์ „์— stackoverflow์— ๋Œ€ํ•œ ์งˆ๋ฌธ - https://stackoverflow.com/questions/50211197/xamarin-forms-user-control-binding-inside-listview

ํ–‰์œ„

this.BindingContext = this;

MagicBox.xaml.cs์—์„œ BindingContext๋ฅผ ํ˜„์žฌ ๊ฐœ์ฒด๋กœ ๊ฐ•์ œ ์ ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ๋ถ€๋ชจ์˜ BindingContext๊ฐ€ ๋” ์ด์ƒ ์ƒ์†๋˜์ง€ ์•Š์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ž‘๋™ํ•˜๊ฒŒ ํ•˜๋ ค๋ฉด ์ฝ”๋“œ๋ฅผ ๋‹ค์Œ์œผ๋กœ ๋ณ€๊ฒฝํ•˜์‹ญ์‹œ์˜ค.

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MagicBox : ContentView
    {

        public static readonly BindableProperty TextProperty =
            BindableProperty.Create("Text", typeof(string), typeof(MagicBox), default(string));

        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set { SetValue(TextProperty, value); }
        }

        public MagicBox ()
        {
            InitializeComponent ();
        }
    }

๊ทธ๋ฆฌ๊ณ  ๋‹น์‹ ์˜ xaml์€

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestSample.Controls.MagicBox"
             x:Name="box">
  <ContentView.Content>
      <Grid>
          <Label Text="{Binding Text, Source={x:Reference box}}" />
      </Grid>
  </ContentView.Content>
</ContentView>

@StephaneDelcroix ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์ž‘๋™ํ–ˆ์Šต๋‹ˆ๋‹ค :)

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰