首页 > 解决方案 > 将 ContentView 绑定到 ContentPage

问题描述

我正在尝试实现一个 xamarin 应用程序,该应用程序将有一个 MainPage 像一个容器,它将托管我的其余页面(作为内容视图?)。

主页.xaml

<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:views="clr-namespace:TalosLib"
         mc:Ignorable="d"
         x:Class="TalosLib.MainPage">


<ContentPage.Content>
    <StackLayout >

        <StackLayout.Resources>
            <DataTemplate x:Key="login">
                <views:LoginPage />
            </DataTemplate>
        </StackLayout.Resources>
        
        <ContentView Content="{Binding CurrentView}" ControlTemplate="{StaticResource login}"/>
    <!--<CollectionView ItemsSource="{Binding CurrentView}" ItemTemplate="{StaticResource login}"/>-->
    </StackLayout>
</ContentPage.Content>

MainPageModel.cs

public class MainPageModel : FreshBasePageModel
{
    //private ObservableCollection<LoginPageModel> _currentView;

    //public ObservableCollection<LoginPageModel> CurrentView
    //{
    //    get { return _currentView; }
    //    set { _currentView = value; RaisePropertyChanged("CurrentView"); }
    //}

    private LoginPageModel _currentView;

    public LoginPageModel CurrentView
    {
        get { return _currentView; }
        set { _currentView = value; RaisePropertyChanged("CurrentView"); }
    }

    public override void Init(object initData)
    {
        base.Init(initData);
        //CurrentView = new ObservableCollection<LoginPageModel>();
        //CurrentView.Add(new LoginPageModel());
        CurrentView = new LoginPageModel();
        RaisePropertyChanged(nameof(CurrentView));
    }


}

现在我只是想显示 LoginPage 但它没有出现。如果我使用代码的注释部分,我设法使它工作。我正在使用 FreshMVVM。有什么想法吗?

标签: c#xamlxamarinmvvmbinding

解决方案


控制模板可帮助您定义所有页面中的导航栏或标题等根视图。如果要使用静态资源,我不确定为什么要绑定内容属性。如果您要更改内容,那么我们可以使用数据模板并使用转换器将 ViewModel 转换为视图。

如果您有兴趣更改 ContentView 的内容,那么您可以使用如下数据模板:

    <ResourceDictionary>
        <views:DataTemplateToViewConverter x:Key="dataTemplateToViewConverter" />

        <DataTemplate x:Key="Login">
            <views:LoginView />
        </DataTemplate>
        <DataTemplate x:Key="Demo">
            <views:DemoView />
        </DataTemplate>
    </ResourceDictionary>


     <ContentView x:Name="contentview" Content="{Binding MyTemplate, Converter={StaticResource dataTemplateToViewConverter}}" />
        <Button
            Command="{Binding Clicked1}"
            Text="1" />
        <Button
            Command="{Binding Clicked2}"
            Text="2" />

在您的 ViewModel 中,您可以使用命令界面并在单击的命令上设置模板。不要忘记创建 MyTemplate 可绑定属性。

    private void Clicked2Called(object obj)
    {
        MyTemplate = "DemoView";
    }

    private void Clicked1Called(object obj)
    {
        MyTemplate = "Login";
    }

在您的转换器中,您可以执行以下操作:

  public class DataTemplateToViewConverter : IValueConverter
  {
    public DataTemplateToViewConverter()
    {
    }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value.ToString() == "Login")
            return new LoginView();
        else
            return new DemoView();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
  }

有很多方法可以更好地做到这一点...我使用按钮来更改内容,我不确定您希望在选择菜单项时如何更改视图。希望它可以帮助您解决您的问题。


推荐阅读