จะเชื่อมโยงมุมมองกับ viewmodel หรือ DataTemplates หลายอันสำหรับ ViewModel ได้อย่างไร

เนื่องจากฉันมี GridView และฉันต้องการนำทางไปยังหน้าอื่นโดยคลิกแต่ละรายการ

จะนำทางไปยังมุมมองที่เกี่ยวข้องกับโมเดลมุมมองได้อย่างไร

ใน WPF มีวิธีการตั้งค่า Datatemplates หลายรายการสำหรับ viewmodel

<TabControl Grid.Row="1" Margin="0" ItemsSource="{Binding Tabs}" SelectedIndex="0" SelectedItem="{Binding SelectedTab}">
    <TabControl.Resources>
        <DataTemplate DataType="{x:Type dashboard:DashboardViewModel}">
            <dashboard:DashboardView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type controls:ExchangeViewModel}">
            <controls:ExchangeView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type request:RequestViewModel}">
            <request:RequestView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type addresses:AddressViewModel}">
            <addresses:AddressView/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type settings:ExchangeSettingsViewModel}">
            <settings:ExchangeSettingsView/>
        </DataTemplate>

    </TabControl.Resources>
    <TabControl.ItemTemplate>
        <DataTemplate DataType="vm:ViewModelBase">
            <TextBlock Text="{Binding Header}" FontSize="14"></TextBlock>
        </DataTemplate>
    </TabControl.ItemTemplate>
</TabControl>

นี่คือสิ่งที่ฉันลองใน UWP ในกรณีเฉพาะของฉัน:

<Frame Grid.Row="1" DataContext="{x:Bind ViewModel.Value}">
    <Frame.Resources>
        <DataTemplate x:DataType="viewModels:ExampleViewModel1">
            <views:ExampleView1></views:ExampleView1>
        </DataTemplate>
        <DataTemplate x:DataType="viewModels:ExampleViewModel2">
            <views:ExampleView2></views:ExampleView2>
        </DataTemplate>
    </Frame.Resources>
</Frame>

Frame เป็นส่วนหนึ่งของเพจและฉันต้องการแสดงมุมมองที่เกี่ยวข้องตามค่าของ ViewModel

Visual Studio บอกฉันว่า DataTemplate ต้องมีแอตทริบิวต์ที่สำคัญ แต่ถึงอย่างนั้นมันก็ไม่ทำงานเหมือนใน WPF เนื่องจากไม่ได้สร้างมุมมอง

ฉันรู้ว่า DataType ถูกแทนที่ด้วย x:DataType และ x:Type ดูเหมือนว่าจะหายไป มีวิธีใดที่จะได้ผลลัพธ์ที่คล้ายกันหรือไม่?


person Andre    schedule 21.10.2015    source แหล่งที่มา
comment
คุณเคยพิจารณาใช้ ContentPresenter เพื่อแสดง View Model ของคุณหรือไม่?   -  person Mike Eason    schedule 21.10.2015
comment
ฉันจะเพิ่มข้อมูลเพิ่มเติมเกี่ยวกับสถานการณ์ที่ฉันมีใน UWP เนื่องจาก TabControl เป็นเพียงตัวอย่างเท่านั้น   -  person Andre    schedule 21.10.2015
comment
มีเธรดใน UserVoice สำหรับ ลิงก์   -  person Portikus    schedule 09.05.2017


คำตอบ (1)


ใน WPF DataType เป็นคุณสมบัติการพึ่งพาซึ่งสามารถดึงข้อมูลได้ในรันไทม์

ใน UWP x:DataType เป็นคุณสมบัติเวลาคอมไพล์ คุณไม่สามารถรับค่าในรันไทม์ได้

ฉันสร้างการสาธิตง่ายๆ เกี่ยวกับวิธีการแมปประเภทข้อมูลและเทมเพลตข้อมูลใน UWP ผ่าน DataTemplateSelector

ตัวเลือกเทมเพลตข้อมูล:

namespace UWPApp
{
    public class Template
    {
        public string DataType { get; set; } 

        public DataTemplate DataTemplate { get; set; }
    }

    public class TemplateCollection2 : System.Collections.ObjectModel.Collection<Template>
    {
    }

    public class MyDataTemplateSelector : DataTemplateSelector
    {
        public TemplateCollection2 Templates { get; set; }

        private IList<Template> _templateCache { get; set; }

        public MyDataTemplateSelector()
        {

        }

        private void InitTemplateCollection()
        {
            _templateCache = Templates.ToList();
        }

        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            if (_templateCache == null)
            {
                InitTemplateCollection();
            }

            if(item != null)
            {
                var dataType = item.GetType().ToString();

                var match = _templateCache.Where(m => m.DataType == dataType).FirstOrDefault();

                if(match != null)
                {
                    return match.DataTemplate;
                }
            }

            return base.SelectTemplateCore(item, container);
        }
    }
}

ดูโมเดล:

namespace UWPApp
{
    public class ViewModel1
    {
        public string Text1 { get; set; }
    }

    public class ViewModel2
    {
        public string Text2 { get; set; }
    }
}

XAML:

<Grid 
    x:Name="container"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <local:TemplateCollection2 x:Key="templates">
            <local:Template DataType="UWPApp.ViewModel1">
                <local:Template.DataTemplate>
                    <DataTemplate x:DataType="local:ViewModel1">
                        <StackPanel>
                            <TextBlock Text="{Binding Text1}"></TextBlock>
                            <TextBlock Text="From template1"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </local:Template.DataTemplate>
            </local:Template>
            <local:Template DataType="UWPApp.ViewModel2">
                <local:Template.DataTemplate>
                    <DataTemplate x:DataType="local:ViewModel2">
                        <StackPanel>
                            <TextBlock Text="{Binding Text2}"></TextBlock>
                            <TextBlock Text="From template2"></TextBlock>
                        </StackPanel>
                    </DataTemplate>
                </local:Template.DataTemplate>
            </local:Template>
        </local:TemplateCollection2>
       <local:MyDataTemplateSelector 
        x:Key="myDataTemplateSelector" Templates="{StaticResource templates}">
       </local:MyDataTemplateSelector>
    </Grid.Resources>
    <StackPanel>
        <Button x:Name="button" Click="button_Click">Click Me</Button>
        <ContentControl x:Name="stage" ContentTemplateSelector="{StaticResource myDataTemplateSelector}">

        </ContentControl>
    </StackPanel>
</Grid>
person Jeffrey Chen    schedule 23.10.2015