MVVM 데이터 바인딩을 사용하여 TabControl을 ViewModel 컬렉션에 바인딩하는 방법은 무엇입니까?

MVVM 데이터 바인딩: ViewModel 컬렉션을 사용하여 TabControl 바인딩

MVVM(Model-View-ViewModel) 아키텍처에서는 ViewModel이 UI 요소를 직접 생성해서는 안 됩니다. 대신 데이터 모델을 노출하고 뷰에 대한 바인딩을 제공해야 합니다. TabControl을 ViewModel 컬렉션에 바인딩하려면 다른 접근 방식이 필요합니다.

탭 페이지 모형 만들기

제목 및 콘텐츠 속성을 포함하여 각 탭 페이지를 나타내는 모델 클래스를 구현합니다. 예:

<code class="language-csharp">public sealed class TabItem
{
    public string Header { get; set; }
    public string Content { get; set; }
}</code>

ObservableCollection을 포함하는 ViewModel

TabItem 개체의 ObservableCollection에 대한 ViewModel 속성을 만듭니다. 생성자에서 이 컬렉션을 초기 탭으로 채웁니다.

<code class="language-csharp">public sealed class ViewModel
{
    public ObservableCollection<TabItem> Tabs { get; set; }
    public ViewModel()
    {
        Tabs = new ObservableCollection<TabItem>();
        Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
        Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
    }
}</code>

XAML에서 바인딩

XAML 창에서 TabControl의 ItemsSource를 ViewModel의 Tabs 속성으로 설정합니다.

<code class="language-xml"><Window ... x:Class="WpfApplication12.MainWindow">
    <Window.DataContext>
        <viewmodel:ViewModel xmlns:viewmodel="clr-namespace:WpfApplication12"/>
    </Window.DataContext>
    <TabControl ... ItemsSource="{Binding Tabs}"/>
</Window></code>

탭 콘텐츠용 데이터 템플릿

각 탭에 서로 다른 콘텐츠를 표시하려면 TabControl의 ContentTemplate 속성의 데이터 템플릿을 사용하세요.

<code class="language-xml"><TabControl ...>
    <TabControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate>
            <myusercontrol:MyUserControl xmlns:myusercontrol="clr-namespace:WpfApplication12"/>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl></code>

이 접근 방식을 사용하면 MVVM 원칙을 유지하면서 TabControl을 동적으로 생성하고 이를 ViewModel 컬렉션에 바인딩할 수 있습니다.

위 내용은 MVVM 데이터 바인딩을 사용하여 TabControl을 ViewModel 컬렉션에 바인딩하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!