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 }
};
}
