Xamarin Forms Binding Context
Connor Meeks
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
}
}
}
Jason
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
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Spring Boot: @Autowired is not working for one of the class
- Next: Button and AJAX not responding
Related
TOP Ranking
- 1
pump.io port in URL
- 2
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 3
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 4
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 5
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 6
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 7
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 8
Using Response.Redirect with Friendly URLS in ASP.NET
- 9
Can a 32-bit antivirus program protect you from 64-bit threats
- 10
Double spacing in rmarkdown pdf
- 11
How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?
- 12
3D Touch Peek Swipe Like Mail
- 13
Bootstrap 5 Static Modal Still Closes when I Click Outside
- 14
Assembly definition can't resolve namespaces from external packages
- 15
Vector input in shiny R and then use it
- 16
Emulator wrong screen resolution in Android Studio 1.3
- 17
Svchost high CPU from Microsoft.BingWeather app errors
- 18
Graphics Context misaligned on first paint
- 19
Python connect to firebird docker database
- 20
Is this docker-for-mac password dialog legit?
- 21
How to save models trained locally in Amazon SageMaker?
Comments