Xaml 基于绑定属性（非ItemTemplate）的xamarin中的切换模板

我有一个包含一些数据的模型和一个可以有三个（enum）值之一的字段

以及显示一些详细信息的视图。
我希望在视图中显示的详细信息根据模型中此属性的值而有所不同

我已经阅读了有关列表和选择器的ItemTemplates的所有内容，我想做一些类似的事情，但只是将单个视图绑定到单个属性

如果

Socket

=>显示此视图 else=>显示另一个视图

两个视图具有相同的viewmodel

看法

...

因此，我开始（默认情况下）显示TCP版本，并希望在枚举值更改时为套接字模板动态切换它。 我做错了什么？

我们可以参考文档了解如何做到这一点

创建一个示例ViewModel模型只包含

model

属性

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private int model;

    public int Model
    {
        set
        {
            if (model != value)
            {
                model = value;
                OnPropertyChanged("Model");
            }
        }
        get
        {
            return model;
        }
    }

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

然后我们可以创建两个示例

ContentView

来替换

SocketServerSocketView

和

SocketServerTcpUdpView

，如下所示： SocketServerTcpUdpView：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppTriggerType.SocketServerTcpUdpView">
  <ContentView.Content>
      <StackLayout BackgroundColor="Azure">
            <Label Text="SocketServer TcpUdpView!"
                   VerticalOptions="Center" />
      </StackLayout>
  </ContentView.Content>
</ContentView>

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="AppTriggerType.SocketServerSocketView">
  <ContentView.Content>
      <StackLayout BackgroundColor="Beige" >
            <Label Text="SocketServer SocketView!" />
      </StackLayout>
  </ContentView.Content>
</ContentView>

ContentPage.xaml.cs中的

MyContentView

的最后一次绑定数据：

public partial class MainPage : ContentPage
{
    ViewModel viewModel = new ViewModel();
    public MainPage()
    {
        InitializeComponent();
        viewModel.Model = 1;
        MyContentView.BindingContext = viewModel;
    }

    private void Button_Clicked_ServerSocket(object sender, EventArgs e)
    {
        viewModel.Model = 1;
    }

    private void Button_Clicked_ServerTcpUdp(object sender, EventArgs e)
    {
        viewModel.Model = 2;
    }
}

现在我们将看到如下效果：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:AppTriggerType"
             mc:Ignorable="d"
             x:Class="AppTriggerType.MainPage">


    <ContentPage.Resources>
            <local:SocketServerSocketView x:Key="ServerSocket" />
            <local:SocketServerTcpUdpView x:Key="ServerTcpUdp" />
    </ContentPage.Resources>
    
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="Start" />
        <Button Text="ServerSocket"
                Clicked="Button_Clicked_ServerSocket"/>
        <Button Text="ServerTcpUdp"
                Clicked="Button_Clicked_ServerTcpUdp"/>
        <ContentView x:Name="MyContentView"
                     Margin="12"
                     VerticalOptions="FillAndExpand">
            <ContentView.Content>
                <ContentView />
            </ContentView.Content>
            <ContentView.Triggers>
                <DataTrigger TargetType="{x:Type ContentView}"
                             Binding="{Binding Source={x:Reference MyContentView}, Path=BindingContext.Model}"
                             Value="1">
                    <Setter Property="Content"
                            Value="{StaticResource ServerSocket}" />
                </DataTrigger>
                <DataTrigger TargetType="{x:Type ContentView}"
                             Binding="{Binding Source={x:Reference MyContentView}, Path=BindingContext.Model}"
                             Value="2">
                   <Setter Property="Content"
                            Value="{StaticResource ServerTcpUdp}" />
                </DataTrigger>
            </ContentView.Triggers>
        </ContentView>
    </StackLayout>
</ContentPage>

---

这是。

您好，

ContentView.Content

似乎需要使用模板视图，然后可以动态更改其内容。您可以尝试一下。谢谢@JuniorJiang MSFT-您可以添加指向某个示例的链接吗？我找不到对TemplateViewHi的任何引用，我已更新了一个答案以供参考。你可以在有时间的时候看一下。：-）

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local="clr-namespace:AppTriggerType"
             mc:Ignorable="d"
             x:Class="AppTriggerType.MainPage">


    <ContentPage.Resources>
            <local:SocketServerSocketView x:Key="ServerSocket" />
            <local:SocketServerTcpUdpView x:Key="ServerTcpUdp" />
    </ContentPage.Resources>
    
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="Start" />
        <Button Text="ServerSocket"
                Clicked="Button_Clicked_ServerSocket"/>
        <Button Text="ServerTcpUdp"
                Clicked="Button_Clicked_ServerTcpUdp"/>
        <ContentView x:Name="MyContentView"
                     Margin="12"
                     VerticalOptions="FillAndExpand">
            <ContentView.Content>
                <ContentView />
            </ContentView.Content>
            <ContentView.Triggers>
                <DataTrigger TargetType="{x:Type ContentView}"
                             Binding="{Binding Source={x:Reference MyContentView}, Path=BindingContext.Model}"
                             Value="1">
                    <Setter Property="Content"
                            Value="{StaticResource ServerSocket}" />
                </DataTrigger>
                <DataTrigger TargetType="{x:Type ContentView}"
                             Binding="{Binding Source={x:Reference MyContentView}, Path=BindingContext.Model}"
                             Value="2">
                   <Setter Property="Content"
                            Value="{StaticResource ServerTcpUdp}" />
                </DataTrigger>
            </ContentView.Triggers>
        </ContentView>
    </StackLayout>
</ContentPage>

public partial class MainPage : ContentPage
{
    ViewModel viewModel = new ViewModel();
    public MainPage()
    {
        InitializeComponent();
        viewModel.Model = 1;
        MyContentView.BindingContext = viewModel;
    }

    private void Button_Clicked_ServerSocket(object sender, EventArgs e)
    {
        viewModel.Model = 1;
    }

    private void Button_Clicked_ServerTcpUdp(object sender, EventArgs e)
    {
        viewModel.Model = 2;
    }
}