async void hscroll1And2_ItemSelected(object sender, HScrollEventArgs e) { HorizontalScrollLayout layout = (HorizontalScrollLayout)sender; ContentView view = e.Template; if (layout.Id.ToString() == HScroll1.Id.ToString()) { HScrollViewCell1Data record = (HScrollViewCell1Data)e.Data; if (record.shortSelectionTime) { await Task.Delay(250); // Unselect item by record layout.UnselectItem(record); // Alternate possibility: unselect the view itself //layout.UnselectItem(view); } } else { HScrollViewCell2Data record = (HScrollViewCell2Data)e.Data; if (record.resetSelection) { await Task.Delay(250); foreach (object selectedRecord in layout.SelectedItems) { if (layout.ItemIsSelected(selectedRecord)) { layout.UnselectItem(selectedRecord); } } } } }
async void hscroll1And2_ItemSelected(object sender, HScrollEventArgs e) { HorizontalScrollLayout layout = (HorizontalScrollLayout)sender; if (layout.Id.ToString() == this.hscroll1.Id.ToString()) { HScrollViewCell1Data record = (HScrollViewCell1Data)e.Data; if (record.shortSelectionTime) { await Task.Delay(250); layout.UnselectItem(record); } } if (layout.Id.ToString() == this.hscroll2.Id.ToString()) { HScrollViewCell2Data record = (HScrollViewCell2Data)e.Data; if (record.resetSelection) { await Task.Delay(250); foreach (object selectedRecord in layout.SelectedItems) { layout.UnselectItem(selectedRecord); } } } }
void hscroll1And2_ItemUnSelected(object sender, HScrollEventArgs e) { HorizontalScrollLayout layout = (HorizontalScrollLayout)sender; if (layout.Id.ToString() == HScroll1.Id.ToString()) { HScrollViewCell1Data record = (HScrollViewCell1Data)e.Data; } if (layout.Id.ToString() == HScroll2.Id.ToString()) { HScrollViewCell2Data record = (HScrollViewCell2Data)e.Data; } }
async void hscroll3_ItemSelected(object sender, HScrollEventArgs e) { HorizontalScrollLayout layout = (HorizontalScrollLayout)sender; HScrollViewCell2Data record = (HScrollViewCell2Data)e.Data; await Task.Delay(250); layout.RemoveItem(record); await Task.Delay(100); if (layout.Id.ToString() == this.hscroll3.Id.ToString()) { this.hscroll4.AddItem(record); this.hscroll4.SelectItem(record); } else { this.hscroll3.AddItem(record); this.hscroll3.SelectItem(record); } }
protected override View CreateContent() { var searchBarHeight = MainPage.PageHeight * 0.07; var peopleListHeight = MainPage.PageHeight * 0.15; var currentLocationHeight = MainPage.PageHeight * 0.06; var placesHeight = MainPage.PageHeight * 0.20; var morePlacesHeight = MainPage.PageHeight * 0.34; var searchImageSize = MainPage.PageHeight / 25.001; var searchContentleftOffset = MainPage.PageHeight / 68.342; var searchContenttopOffset = MainPage.PageHeight / 17.855; var addPeopleLabelFontSize = MainPage.PageHeight / 60.6364; var addPeopleImageWidthHeight = MainPage.PageHeight / 18.5; var addPeopleConytentWidth = MainPage.PageHeight / 6.8342; // var peopleListHeight = 130; var currentLocationImageWidthHeight = MainPage.PageHeight / 30.171; var currentLocationLabelSize = MainPage.PageHeight / 45.636; var currentLocationContentDetailLeftOffset = MainPage.PageHeight / 38.342; var currentLocationContentLeftRightOffset = MainPage.PageHeight / 68.342; var placesLabelFontSize = MainPage.PageHeight / 45.636; var placesImageWidth = MainPage.PageHeight / 30.171; var placesImageHeight = MainPage.PageHeight / 30.171; var placesOffset = MainPage.PageHeight / 38.342; var placesContentOffset = MainPage.PageHeight / 68.342; var searchImageWidth = MainPage.PageHeight / 30.171; var searchImageHeight = MainPage.PageHeight / 30.171; var searchOffset = MainPage.PageHeight / 68.342; var morePlacesSearchOffset = MainPage.PageHeight / 32.345; #region Page Background this.BackgroundColor = Color.LightGray; this.Opacity = 1.0; #endregion #region Сontent #region SearchBar var searchEntry = new AppSearchEntryEditor { ImageSize = searchImageSize, HorizontalOptions = LayoutOptions.FillAndExpand, Placeholder = "Search People and Places", WidthRequest = 280, VerticalOptions = LayoutOptions.CenterAndExpand, }; searchPeopleContent = new StackLayout { Margin = new Thickness(searchContentleftOffset, searchContenttopOffset, 10, 0), BackgroundColor = Color.White, HeightRequest = searchBarHeight, Children = { searchEntry } }; #endregion #region People List var addPeopleLabel = new AppLabel { FontSize = addPeopleLabelFontSize, Text = "Add People", HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.End, }; var addPeopleImage = new AppImageCommand { Source = "plus_gray", WidthRequest = addPeopleImageWidthHeight, HeightRequest = addPeopleImageWidthHeight, }; addPeopleImage.SetBinding(AppImageCommand.CommandProperty, "AddPeopleCommand"); var addPeopleContent = new StackLayout { HorizontalOptions = LayoutOptions.Start, VerticalOptions = LayoutOptions.Center, WidthRequest = addPeopleConytentWidth, Children = { addPeopleImage, addPeopleLabel } }; var dataHScroll2 = new HScrollViewCell2Data[] { new HScrollViewCell2Data { name = "jamie luna", profileImage = "default_user", strokeColor = Color.Red }, new HScrollViewCell2Data { name = "barde luna", profileImage = "default_user", strokeColor = Color.Yellow }, new HScrollViewCell2Data { name = "gerald luna", profileImage = "default_user" }, new HScrollViewCell2Data { name = "jamie luna", profileImage = "default_user" }, new HScrollViewCell2Data { name = "gerald luna", profileImage = "default_user" }, new HScrollViewCell2Data { name = "barde luna", profileImage = "default_user" }, }; HorizontalScrollLayout peopleList = new HorizontalScrollLayout { ItemSource = dataHScroll2, ItemTemplate = new DataTemplate(typeof(HScrollViewCell2)), HeightRequest = 130, //WidthRequest = 170, SelectionBackGroundColor = Color.FromHex("#0040FF"), MultiSelection = false, }; peopleListContent = new StackLayout { BackgroundColor = Color.White, HeightRequest = peopleListHeight, Orientation = StackOrientation.Horizontal, Children = { addPeopleContent, peopleList } }; #endregion #region CurrentLocation currentLocationImage = new AppImageCommand { Source = "map_gray", HeightRequest = currentLocationImageWidthHeight, WidthRequest = currentLocationImageWidthHeight, }; currentLocationImage.SetBinding(AppImageCommand.CommandProperty, "CurrentLocationCommand"); currentLocationLabel = new AppLabel { Text = "Current Location", VerticalTextAlignment = TextAlignment.Center, FontSize = currentLocationLabelSize, }; currentLocationContentDetails = new StackLayout { Orientation = StackOrientation.Horizontal, VerticalOptions = LayoutOptions.CenterAndExpand, Padding = new Thickness(currentLocationContentDetailLeftOffset, 0, 0, 0), Children = { currentLocationImage, currentLocationLabel } }; currentLocationContent = new StackLayout { Margin = new Thickness(currentLocationContentLeftRightOffset, 0, currentLocationContentLeftRightOffset, 0), BackgroundColor = Color.White, HeightRequest = currentLocationHeight, Children = { currentLocationContentDetails } }; #endregion #region Places schoolImage = new AppImage { Source = "star_gray", HeightRequest = placesImageHeight, WidthRequest = placesImageHeight, }; schoolLabel = new AppLabel { Text = "School", VerticalTextAlignment = TextAlignment.Center, FontSize = placesLabelFontSize, }; schoolContent = new StackLayout { Orientation = StackOrientation.Horizontal, Children = { schoolImage, schoolLabel } }; homeLabel = new AppLabel { Text = "Home", VerticalTextAlignment = TextAlignment.Center, FontSize = placesLabelFontSize, }; homeImage = new AppImage { Source = "star_gray", HeightRequest = placesImageHeight, WidthRequest = placesImageWidth, }; homeContent = new StackLayout { Orientation = StackOrientation.Horizontal, Children = { homeImage, homeLabel } }; workLabel = new AppLabel { Text = "Work", VerticalTextAlignment = TextAlignment.Center, FontSize = placesLabelFontSize, }; workImage = new AppImage { Source = "star_gray", HeightRequest = placesImageHeight, WidthRequest = placesImageWidth, }; workContent = new StackLayout { Orientation = StackOrientation.Horizontal, Children = { workImage, workLabel } }; moreStarredPlacesLabel = new AppTextCommand { Text = "More Starred Places", VerticalTextAlignment = TextAlignment.Center, FontSize = placesLabelFontSize, }; moreStarredPlacesLabel.SetBinding(AppCommand.TextProperty, new Binding("MoreStarredPlaces", BindingMode.OneWay, null, null, null, AppLanguages.CurrentLanguage)); moreStarredPlacesLabel.SetBinding(AppTextCommand.CommandProperty, "MoreStarredPlacesCommand"); moreStarredPlacesImage = new AppImage { Source = "star_gray", HeightRequest = placesImageHeight, WidthRequest = placesImageWidth, }; moreStarredPlacesContent = new StackLayout { Orientation = StackOrientation.Horizontal, Children = { moreStarredPlacesImage, moreStarredPlacesLabel } }; placesWrapperContent = new StackLayout { Padding = new Thickness(placesOffset, placesContentOffset, 0, 0), Children = { schoolContent, homeContent, workContent, moreStarredPlacesContent } }; placesContent = new StackLayout { Margin = new Thickness(placesContentOffset, 0, placesContentOffset, 0), BackgroundColor = Color.White, HeightRequest = placesHeight, Children = { placesWrapperContent } }; #endregion #region Search searchListView = new ListView { Margin = new Thickness(searchOffset, 0, searchOffset, 0), HasUnevenRows = true, ItemTemplate = new DataTemplate(typeof(SearchesTemplate)), ItemsSource = SearchData.GetData(), SeparatorColor = Color.White, }; searchListView.HasUnevenRows = true; morePreviousSerchesImage = new AppImage { Source = "clock_gray", WidthRequest = searchImageWidth, HeightRequest = searchImageHeight, }; morePreviousSearchesLabel = new AppTextCommand { Text = "More Previous Searches" }; morePreviousSearchesLabel.SetBinding(AppTextCommand.CommandProperty, "MoreStarredPlacesCommand"); morePreviousSearchesContent = new StackLayout { Padding = new Thickness(morePlacesSearchOffset, 0, 0, searchOffset), Orientation = StackOrientation.Horizontal, Children = { morePreviousSerchesImage, morePreviousSearchesLabel } }; searchContent = new StackLayout { Margin = new Thickness(searchOffset, 0, searchOffset, 0), BackgroundColor = Color.White, HeightRequest = morePlacesHeight, Children = { searchListView, morePreviousSearchesContent } }; #endregion finalContent = new StackLayout { Spacing = searchOffset, Children = { searchPeopleContent, peopleListContent, currentLocationContent, placesContent, searchContent } }; #endregion _scroll = new ScrollView { HorizontalOptions = LayoutOptions.Fill, VerticalOptions = LayoutOptions.Fill, Content = finalContent }; return(_scroll); }
public FormsPage() { this.Padding = new Thickness(30); var dataHScroll1 = new HScrollViewCell1Data[] { new HScrollViewCell1Data { id = 1, name = "Item 1", shortSelectionTime = false }, new HScrollViewCell1Data { id = 2, name = "Item 2", shortSelectionTime = false }, new HScrollViewCell1Data { id = 3, name = "Item 3", shortSelectionTime = false }, new HScrollViewCell1Data { id = 4, name = "Item 4", shortSelectionTime = true }, new HScrollViewCell1Data { id = 5, name = "Item 5", shortSelectionTime = false }, new HScrollViewCell1Data { id = 6, name = "Item 6", shortSelectionTime = false }, new HScrollViewCell1Data { id = 7, name = "Item 7", shortSelectionTime = true }, new HScrollViewCell1Data { id = 8, name = "Item 8", shortSelectionTime = false }, new HScrollViewCell1Data { id = 9, name = "Item 9", shortSelectionTime = false }, new HScrollViewCell1Data { id = 10, name = "Item 10", shortSelectionTime = false }, new HScrollViewCell1Data { id = 11, name = "Item 11", shortSelectionTime = false }, new HScrollViewCell1Data { id = 12, name = "Item 12", shortSelectionTime = false }, new HScrollViewCell1Data { id = 13, name = "Item 13", shortSelectionTime = false }, new HScrollViewCell1Data { id = 14, name = "Item 14", shortSelectionTime = true }, new HScrollViewCell1Data { id = 15, name = "Item 15", shortSelectionTime = false }, new HScrollViewCell1Data { id = 16, name = "Item 16", shortSelectionTime = false }, new HScrollViewCell1Data { id = 17, name = "Item 17", shortSelectionTime = true }, new HScrollViewCell1Data { id = 18, name = "Item 18", shortSelectionTime = false }, new HScrollViewCell1Data { id = 19, name = "Item 19", shortSelectionTime = false }, new HScrollViewCell1Data { id = 20, name = "Item 20", shortSelectionTime = false } }; this.hscroll1 = new HorizontalScrollLayout { ItemSource = dataHScroll1, ItemTemplate = new DataTemplate(typeof(HScrollViewCell1)), HeightRequest = 35, SelectionBackGroundColor = Color.Fuchsia, MultiSelection = false }; this.hscroll1.ItemSelected += hscroll1And2_ItemSelected; this.hscroll1.ItemUnSelected += hscroll1And2_ItemUnSelected; Label hScroll1Label = new Label { Text = "Horizontal scrollbar with unique selection" }; StackLayout slHScroll1 = new StackLayout { Spacing = 5, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.Start, Children = { this.hscroll1, hScroll1Label } }; var dataHScroll2 = new HScrollViewCell2Data[] { new HScrollViewCell2Data { id = 1, name = "Item 1", resetSelection = false, icon = "icon1.png" }, new HScrollViewCell2Data { id = 2, name = "Item 2", resetSelection = false, icon = "icon2.png" }, new HScrollViewCell2Data { id = 3, name = "Item 3", resetSelection = false, icon = "icon3.png" }, new HScrollViewCell2Data { id = 4, name = "Item 4", resetSelection = true, icon = "icon4.png" }, new HScrollViewCell2Data { id = 5, name = "Item 5", resetSelection = false, icon = "icon5.png" }, new HScrollViewCell2Data { id = 6, name = "Item 6", resetSelection = false, icon = "icon6.png" }, new HScrollViewCell2Data { id = 7, name = "Item 7", resetSelection = true, icon = "icon7.png" }, new HScrollViewCell2Data { id = 8, name = "Item 8", resetSelection = false, icon = "icon8.png" }, new HScrollViewCell2Data { id = 9, name = "Item 9", resetSelection = false, icon = "icon9.png" }, new HScrollViewCell2Data { id = 10, name = "Item 10", resetSelection = false, icon = "icon0.png" }, new HScrollViewCell2Data { id = 11, name = "Item 11", resetSelection = false, icon = "icon1.png" }, new HScrollViewCell2Data { id = 12, name = "Item 12", resetSelection = false, icon = "icon2.png" }, new HScrollViewCell2Data { id = 13, name = "Item 13", resetSelection = false, icon = "icon3.png" }, new HScrollViewCell2Data { id = 14, name = "Item 14", resetSelection = true, icon = "icon4.png" }, new HScrollViewCell2Data { id = 15, name = "Item 15", resetSelection = false, icon = "icon5.png" }, new HScrollViewCell2Data { id = 16, name = "Item 16", resetSelection = false, icon = "icon6.png" }, new HScrollViewCell2Data { id = 17, name = "Item 17", resetSelection = true, icon = "icon7.png" }, new HScrollViewCell2Data { id = 18, name = "Item 18", resetSelection = false, icon = "icon8.png" }, new HScrollViewCell2Data { id = 19, name = "Item 19", resetSelection = false, icon = "icon9.png" }, new HScrollViewCell2Data { id = 20, name = "Item 20", resetSelection = false, icon = "icon0.png" } }; this.hscroll2 = new HorizontalScrollLayout { ItemSource = dataHScroll2, ItemTemplate = new DataTemplate(typeof(HScrollViewCell2)), HeightRequest = 60, SelectionBackGroundColor = Color.Lime, MultiSelection = true }; this.hscroll2.ItemSelected += hscroll1And2_ItemSelected; this.hscroll2.ItemUnSelected += hscroll1And2_ItemUnSelected; Label hScroll2Label = new Label { Text = "Horizontal scrollbar with multiple selection" }; StackLayout slHScroll2 = new StackLayout { Spacing = 5, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.Start, Children = { this.hscroll2, hScroll2Label } }; hscroll3 = new HorizontalScrollLayout { ItemSource = dataHScroll2, ItemTemplate = new DataTemplate(typeof(HScrollViewCell2)), HeightRequest = 60, SelectionBackGroundColor = Color.Teal, MultiSelection = false }; hscroll3.ItemSelected += hscroll3_ItemSelected; hscroll3.ItemUnSelected += hscroll3_ItemUnSelected; Label hScroll3Label = new Label { Text = "Tapped items here will go into the list below" }; StackLayout slHScroll3 = new StackLayout { Spacing = 5, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.Start, Children = { this.hscroll3, hScroll3Label } }; hscroll4 = new HorizontalScrollLayout { ItemTemplate = new DataTemplate(typeof(HScrollViewCell2)), HeightRequest = 60, SelectionBackGroundColor = Color.Teal, MultiSelection = false }; hscroll4.ItemSelected += hscroll3_ItemSelected; hscroll4.ItemUnSelected += hscroll3_ItemUnSelected; Label hScroll4Label = new Label { Text = "Tapped items here will go into the list above" }; StackLayout slHScroll4 = new StackLayout { Spacing = 5, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.Start, Children = { this.hscroll4, hScroll4Label } }; Content = new StackLayout { Spacing = 10, VerticalOptions = LayoutOptions.FillAndExpand, HorizontalOptions = LayoutOptions.Start, Children = { slHScroll1, slHScroll2, slHScroll3, slHScroll4 } }; }