如何在xamarin表单xaml中的listview datatemplate中使用另一个内容页面视图

时间:2015-03-19 11:01:35

标签: c# xaml mvvm xamarin xamarin.forms

您好我正在尝试使用相应视图模型的视图嵌套。我有guideView.xaml我想在另一个页面CampsiteViewPage Listview控件的datatemplate下显示它。另外,我想在listView中将viewmodel guideViewModel应用于它 我的guideView代码如下

<?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:b="clr-namespace:Xamarin.Behaviors;assembly=Xamarin.Behaviors"
         x:Class="InspectionApp.Views.GuideView"
 x:Name="GuideViewPage">  
 <StackLayout Orientation="Horizontal" MinimumHeightRequest="50" Padding="10,0,10,0">
<Label Text="{Binding GuideName}" VerticalOptions="Center"  WidthRequest="100" HorizontalOptions="Center"/>
<ListView  RowHeight="100" HorizontalOptions="End" ItemsSource="{Binding GuidePrices, Mode=TwoWay}" >
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <StackLayout  Orientation="Horizontal">
            <controls:BindablePicker ItemsSource="{Binding Prices}" WidthRequest="150" SelectedItem="{Binding SelectedProduct, Mode=TwoWay}" />
</StackLayout>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

我希望上方视图的主页面与其viewmodel一起呈现

  <?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:i18n="clr-namespace:InspectionApp.MarkupExtensions;assembly=InspectionApp"
         xmlns:cview="clr-namespace:InspectionApp.Views;assembly=InspectionApp"
         x:Class="InspectionApp.Views.CampsiteView"
         Title="{Binding Name, StringFormat='Order form: {0}'}"
         x:Name="CampsiteViewPage">
  <StackLayout VerticalOptions="FillAndExpand" >
<Label Text=" Guides" Font="30"/>
<ListView  RowHeight="100"  ItemsSource="{Binding GuideView}">
  <ListView.ItemTemplate>
    <DataTemplate>
    <ViewCell>
<!-- Here I want guideView content get loded along with command and properties -->
      <cview:GuideView></cview:GuideView>
   </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

我需要你的帮助来实现这个目标,还是有其他正确的方法来实现相同的请在这里回复。提前谢谢。

1 个答案:

答案 0 :(得分:1)

您可以将GuideView创建为View而不是Page

<强> GuideView:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:b="clr-namespace:Xamarin.Behaviors;assembly=Xamarin.Behaviors"
             x:Class="InspectionApp.Views.GuideView"
             x:Name="GuideView">
  <ContentView.Content>
      <!--Your guide design goes here-->
  </ContentView.Content>
</ContentView>

<强> GuidePage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:b="clr-namespace:Xamarin.Behaviors;assembly=Xamarin.Behaviors"
             xmlns:cview="clr-namespace:InspectionApp.Views;assembly=InspectionApp.Views"
             x:Class="InspectionApp.Views.GuideView"
             x:Name="GuidePage">
  <ContentPage.Content>
    <cview:GuideView />
  </ContentPage.Content>
</ContentPage>

<强>的MainPage:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:i18n="clr-namespace:InspectionApp.MarkupExtensions;assembly=InspectionApp"
        xmlns:cview="clr-namespace:InspectionApp.Views;assembly=InspectionApp"
        x:Class="InspectionApp.Views.CampsiteView"
        Title="{Binding Name, StringFormat='Order form: {0}'}"
        x:Name="CampsiteViewPage">
  <StackLayout VerticalOptions="FillAndExpand" >
    <Label Text=" Guides" Font="30"/>
    <ListView  RowHeight="100"  ItemsSource="{Binding GuideView}">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
             <cview:GuideView/>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
    .
    .
    .