Xamarin 表单绑定上下文

Question

我正在创建一个类似于 Youtube 的应用程序。当用户单击主页上的一个视单元时，它将打开另一个页面，其中包含视频和有关视频的详细信息。我不知道如何将视图单元的详细信息数据传递到下一页！ （我希望具体到视频的细节）

主页：

Homepage.xaml.cs：

public partial class Homepage : ContentPage
{
    List<Video> Videos = new List<Video>
        {
            new Video
            {
                Title = "apples",
                Author = "connor",
                Views = 322,
                Upload_DateTime = new DateTime(1996, 8, 26),
                ImageURL = "icon.png",

            },
            new Video
            {
                Title = "Video 2",
                Author = "FedEx",
                Views = 554,
                Upload_DateTime = new DateTime(2017, 1, 23),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "bananas",
                Author = "meeks",
                Views = 23,
                Upload_DateTime = new DateTime(2012, 3, 11),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "grapes",
                Author = "fedex",
                Views = 211,
                Upload_DateTime = new DateTime(2013, 4, 13),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "Video 5",
                Author = "Mike",
                Views = 12,
                Upload_DateTime = new DateTime(2010, 7, 11),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "PeARs",
                Author = "JJEORF",
                Views = 2231,
                Upload_DateTime = new DateTime(2009, 5, 14),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "pears",
                Author = "FedEx",
                Views = 12345,
                Upload_DateTime = new DateTime(2000, 1, 23),
                ImageURL = "icon.png",
            },
        };


    public Homepage()
    {
        InitializeComponent();

        VideoListView.ItemsSource = Videos; //allows for binding
    }


        private void ViewCellItem_Clicked(object sender, EventArgs e) //this is for when items in the view cells are clicked
    {

        var Video_Play_Page = new Video_Play_Page();
        NavigationPage.SetHasNavigationBar(Video_Play_Page, false); //removes the Navigation bar at top of page
        Navigation.PushAsync(Video_Play_Page);


    }

Homepage.xaml：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App2.Homepage"
         Title="Homepage">

<ListView x:Name="VideoListView" HasUnevenRows="True" ItemTapped="ViewCellItem_Clicked">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <ViewCell.View>
                        <Grid RowSpacing="0" ColumnSpacing="10" Padding="10, 10, 10, 10"> <!-- "left, top, right, bottom" -->
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                                <RowDefinition Height="auto"/>
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/> <!-- 1/3 of total column width -->
                                <ColumnDefinition Width="2*"/> <!-- 2/3 of total column width -->
                            </Grid.ColumnDefinitions>

                            <Image 
                                Source="{Binding ImageURL}" 
                                Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" 
                                Aspect="AspectFill"/>
                            <Label 
                                Text="{Binding Title}" 
                                Font="Bold" 
                                Grid.Row="0" Grid.Column="1" 
                                VerticalTextAlignment="Center"
                                x:Name="Bind_Title"/>
                            <Label 
                                Text="{Binding Author_Views}" 
                                TextColor="LightGray" 
                                Grid.Row="1" Grid.Column="1" 
                                VerticalTextAlignment="Center"/>
                            <Label 
                                Text="{Binding Uploaded}" 
                                TextColor="LightGray" 
                                Grid.Row="2" Grid.Column="1" 
                                VerticalTextAlignment="Center"/>
                        </Grid>
                    </ViewCell.View>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

详情页：

Video_Play_Page.xaml.cs：

public partial class Video_Play_Page : ContentPage
{

    List<Video> Videos = new List<Video>
        {
            new Video
            {
                Title = "apples",
                Author = "connor",
                Views = 322,
                Upload_DateTime = new DateTime(1996, 8, 26),
                ImageURL = "icon.png",

            },
            new Video
            {
                Title = "Video 2",
                Author = "FedEx",
                Views = 554,
                Upload_DateTime = new DateTime(2017, 1, 23),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "bananas",
                Author = "meeks",
                Views = 23,
                Upload_DateTime = new DateTime(2012, 3, 11),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "grapes",
                Author = "fedex",
                Views = 211,
                Upload_DateTime = new DateTime(2013, 4, 13),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "Video 5",
                Author = "Mike",
                Views = 12,
                Upload_DateTime = new DateTime(2010, 7, 11),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "PeARs",
                Author = "JJEORF",
                Views = 2231,
                Upload_DateTime = new DateTime(2009, 5, 14),
                ImageURL = "icon.png",
            },
            new Video
            {
                Title = "pears",
                Author = "FedEx",
                Views = 12345,
                Upload_DateTime = new DateTime(2000, 1, 23),
                ImageURL = "icon.png",
            },
        };

    public Video_Play_Page()
    {
        InitializeComponent();

        VideoListView.ItemsSource = Videos;

    }

    private void VideoBackButton_Clicked(object sender, EventArgs e)
    { 

        var Homepage = new Homepage();
        NavigationPage.SetHasNavigationBar(Homepage, false); //removes the Navigation bar at top of page
        Navigation.PushAsync(Homepage);
    }

    private void ViewCellItem_Clicked(object sender, EventArgs e) //this is for when items in the view cells are clicked
    {

        var Video_Play_Page = new Video_Play_Page();
        NavigationPage.SetHasNavigationBar(Video_Play_Page, false); //removes the Navigation bar at top of page
        Navigation.PushAsync(Video_Play_Page);


    }


}

Video_Play_Page.xaml：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App2.Video_Play_Page"
         Title="Video_Play_Page"

         xmlns:roxv="clr-namespace:Rox;assembly=Rox.Xamarin.Video.Portable"
         BackgroundColor="#4B1388"
         >
                <!--detail -->
                <StackLayout x:Name="VideoDetail" BackgroundColor="Red" Grid.Row="0" Grid.Column="0">

                    <Label Text ="Detail goes here!"/>

                </StackLayout>


                <!--related videos listview -->
                <ListView x:Name="VideoListView" HasUnevenRows="True" ItemTapped="ViewCellItem_Clicked" BackgroundColor="Green" Grid.Row="1" Grid.Column="0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <ViewCell.View>
                                    <Grid RowSpacing="0" ColumnSpacing="10" Padding="10, 10, 10, 10">
                                        <!-- "left, top, right, bottom" -->
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto"/>
                                            <RowDefinition Height="auto"/>
                                            <RowDefinition Height="auto"/>
                                        </Grid.RowDefinitions>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="1*"/>
                                            <!-- 1/3 of total column width -->
                                            <ColumnDefinition Width="2*"/>
                                            <!-- 2/3 of total column width -->
                                        </Grid.ColumnDefinitions>

                                        <Image 
                                Source="{Binding ImageURL}" 
                                Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" 
                                Aspect="AspectFill"/>
                                        <Label 
                                Text="{Binding Title}" 
                                Font="Bold" 
                                Grid.Row="0" Grid.Column="1" 
                                VerticalTextAlignment="Center"/>
                                        <Label 
                                Text="{Binding Author_Views}" 
                                TextColor="LightGray" 
                                Grid.Row="1" Grid.Column="1" 
                                VerticalTextAlignment="Center"/>
                                        <Label 
                                Text="{Binding Uploaded}" 
                                TextColor="LightGray" 
                                Grid.Row="2" Grid.Column="1" 
                                VerticalTextAlignment="Center"/>
                                    </Grid>
                                </ViewCell.View>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
   </ContentPage>

视频.cs：

class Video
{
    public string Title { get; set; }

    //possibly implement tags?

    public string Author { get; set; }
    public int Views { get; set; }
    public DateTime Upload_DateTime { get; set; }
    public string ImageURL { get; set; }

    public string Author_Views
    {

        get
        {
            return string.Format("{0} - {1} Views", Author, Views); //format for viewcell details
        }
    }

    public string Uploaded
    {

        get
        {
            return string.Format("Uploaded: {0} ", Upload_DateTime); //format for viewcell details
        }
    }


}

Answer 1

private void ViewCellItem_Clicked(object sender, EventArgs e) //this is for when items in the view cells are clicked
{
    var item = ((Video)VideoListView.SelectedItem);
    var Video_Play_Page = new Video_Play_Page(item);
    NavigationPage.SetHasNavigationBar(Video_Play_Page, false); 
    //removes the Navigation bar at top of page
    Navigation.PushAsync(Video_Play_Page);
}

在页面的构造函数中，您需要接受一个参数

public Video_Play_Page(Video selected) {

  this.BindingContext = selected;

  // other constructor tasks
}