Connor Meeks
Reputation: 501
Xamarin Forms Binding Context
I am creating an app similar to Youtube. When the user clicks an viewcell on the homepage, it will open another page with the video and details about the video. I cannot figure out how to pass the details data of the viewcell to the next page! (I want the details to be specific to the video)
Homepage:
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>
Detail Page:
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>
Video.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
}
}
}
Upvotes: 0
Views: 884
Answers (1)
Jason
Reputation: 89204
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);
}
in your page's constructor, you will need to accept an argument
public Video_Play_Page(Video selected) {
this.BindingContext = selected;
// other constructor tasks
}
Upvotes: 1
Related Questions
- Binding in Xamarin.Forms
- Xamarin Forms Data Binding
- Xamarin Forms data binding from xaml
- Binding data Xamarin Forms
- Xamarin.Forms Binding inside Binding
- Binding help XAML Xamarin Forms .net2.0 app
- Xamarin Forms Binding Context and Bindings
- Xamarin Forms Binding
- Xamarin.Forms: How to set BindingContext inside XAML?
- Basic data binding (Xamarin Forms)