목록 데이터를 ListView와 ComboBox에서 사용하기 Part2

Part1에서는 ViewModel에 리스트(IList<Code>)를 만들고, ItemsSource에 직접 바인딩을 해서 사용했습니다.

그렇다면, Codes 목록을 2개 이상 화면에서 사용한다고 할때도 동일한 방법을 사용할까요?

각 ViewModel 내부에 Codes 프로퍼티를 만들어서 바인딩을 한다고 하면, 매우 불편할 것입니다.

그래서, 이때 사용할 수 있는 방법이 UWP에서는 XamlExtension을 사용하거나, Converter를 이용할 수도 있는데, Uno에서 사용 가능한 방법은 Behavior를 이용하는 방법이 유일한 것 같습니다.

 

2021.10.08 - [Uno Platform] - 목록 데이터를 ListView와 ComboBox에서 사용하기 Part1

목록 데이터를 ListView와 ComboBox에서 사용하기 Part1

1. NuGet packages

UWP 

Microsoft.Toolkit.Uwp.UI.Behaviors v7.0.0

Microsoft.Toolkit.Mvvm v7.0.0

다른 프로젝트

Uno.Microsoft.Toolkit.Uwp.UI.Behaviros v7.0.0

Microsoft.Toolkit.Mvvm v7.0.0

Unload 프로젝트

iOS, macOS, Skia.Gtk, Skia.Tizen

 

2. SelectorBehavior.cs

아래 소스에서는 _codes를 생성하면서 만들어 주고 있습니다. 실제 개발시에는 Service를 통해서 코드들을 불러와서 저장 하고 있다가, 사용이 사용이될 때 해당 코드들을 사용하도록 합니다.

 

    public class SelectorBehavior : Behavior<Selector>
    {
        private IList<Code> _codes = new List<Code>
            {
                new Code{ CodeId = "CodeId1", Name = "Name1", Value = "Value1"},
                new Code{ CodeId = "CodeId2", Name = "Name2", Value = "Value2"},
                new Code { CodeId = "CodeId3", Name = "Name3", Value = "Value3" },
                new Code { CodeId = "CodeId4", Name = "Name4", Value = "Value4" },
                new Code { CodeId = "CodeId5", Name = "Name5", Value = "Value5" },
            };

        public SelectorBehavior()
        {
        }

        protected override void OnAttached()
        {
            AssociatedObject.Loaded += AssociatedObject_Loaded;
        }

        private void AssociatedObject_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            AssociatedObject.ItemsSource = _codes;
        }

        protected override void OnDetaching()
        {
            AssociatedObject.Loaded -= AssociatedObject_Loaded;
        }
    }

Behavior<Selector> : ListView와 ComboBox 둘다 내부적으로 Selector 클래스를 이용하기 때문에 공통되는 부분을 이용합니다.

 

3. AView.xaml (BView.xaml에도 아래와 같은 코드를 이용해서 컨트롤에 목록을 출력합니다.)

<UserControl
    x:Class="ListToItemsSourceByBehavior.Views.AView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:behaviors="using:ListToItemsSourceByBehavior.Behaviors"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:local="using:ListToItemsSourceByBehavior.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="400"
    mc:Ignorable="d">

    <Grid>
        <StackPanel>
            <TextBlock FontSize="20" Text="A View" />
            <ListView ItemTemplate="{StaticResource CodeItemTemplate}">
                <i:Interaction.Behaviors>
                    <behaviors:SelectorBehavior />
                </i:Interaction.Behaviors>
            </ListView>
            <ComboBox
                x:Name="CodeComboBox"
                DisplayMemberPath="Name"
                SelectedValuePath="CodeId">
                <i:Interaction.Behaviors>
                    <behaviors:SelectorBehavior />
                </i:Interaction.Behaviors>
            </ComboBox>
            <TextBlock>
                Selected ComboBox value is<LineBreak />
                <Run Text="{Binding ElementName=CodeComboBox, Path=SelectedValue}" />
            </TextBlock>
        </StackPanel>
    </Grid>
</UserControl>

4. 결과 화면

Wpf

안드로이드

UWP

Wasm은 현재 개발환경에서 실행이 불가능해서 스샷을 첨부하지 못했습니다.

5. 소스

UnoSampleUI/ListToItemsSourceByBehavior at master · kaki104/UnoSampleUI (github.com)

GitHub - kaki104/UnoSampleUI: Uno Platform Sample UI Project - Mvvmlight

2021.10.08 - [Uno Platform] - 목록 데이터를 ListView와 ComboBox에서 사용하기 Part1