Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dynamic layout Orientation and scroll to element using Collection View #23

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Dynamic layout Orientation and scroll to element using Collection View #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1c50257
Update CollectionViewChallengePage.xaml
Harshitha12S Apr 23, 2019
555faf9
Update CollectionViewChallengePage.xaml.cs
Harshitha12S Apr 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 53 additions & 17 deletions CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<?xml version="1.0" encoding="utf-8" ?>
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
Expand All @@ -7,26 +7,62 @@
x:Class="CollectionViewChallenge.Views.CollectionViewChallengePage">
<ContentPage.Content>
<StackLayout>
<!-- Use your own layout and functionality here! -->
<CollectionView>
<CollectionView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>This is a CollectionView!</x:String>
<x:String>Your feedback on the experience of converting a ListView to a CollectionView is incredibly appreciated.</x:String>
<x:String>Here are three general questions:</x:String>
<x:String>1. How was the experience of converting your existing ListView to a CollectionView?</x:String>
<x:String>2. How is the performance compared to the ListView?</x:String>
<x:String>3. Is there a specific piece of functionality that you'd like to see?</x:String>
</x:Array>
</CollectionView.ItemsSource>
<StackLayout Orientation="Horizontal">
<Picker Title="Select Listtype" x:Name="CVPicker" SelectedIndexChanged="CVPicker_SelectedIndexChanged" HorizontalOptions="FillAndExpand"/>
<Picker Title="Select Layout" x:Name="CVPickerLayout" SelectedIndexChanged="CVPickerLayout_SelectedIndexChanged" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Picker Title="Select Enabling" x:Name="CVPickerEnabled" SelectedIndexChanged="CVPickedEnabled_SelectedIndexChanged" HorizontalOptions="FillAndExpand"/>
<Picker Title="Scroll To" x:Name="ScrollToPicker" SelectedIndexChanged="ScrollToPicker_SelectedIndexChanged" HorizontalOptions="FillAndExpand"/>
</StackLayout>
<CollectionView x:Name="CollectionListViewV" IsVisible="True" BackgroundColor="Transparent" SelectionMode="Single" SelectionChanged="CollectionListViewV_SelectionChanged">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5">
<Label Text="{Binding .}" d:Text="Design Time Data" FontSize="10"/>
</StackLayout>
<Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" Margin="2,2,2,2">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding LVImage}" Aspect="Fill" VerticalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LVName}" FontSize="Default" TextColor="Black" VerticalOptions="Center"/>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
<CollectionView x:Name="CollectionListViewH" IsVisible="False" BackgroundColor="Transparent" SelectionMode="Multiple" SelectionChanged="CollectionListViewH_SelectionChanged">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal" Span="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame BorderColor="LightGray" CornerRadius="3" HasShadow="False">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Horizontal" Margin="2,2,2,2">
<Image Grid.Row="0" Grid.Column="0" Source="{Binding LVImage}" Aspect="Fill" VerticalOptions="Center"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding LVName}" FontSize="Default" TextColor="Black" VerticalOptions="Center"/>
</StackLayout>
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
</ContentPage>
222 changes: 218 additions & 4 deletions CollectionViewChallenge/CollectionViewChallenge/Views/CollectionViewChallengePage.xaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
using System;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;

Expand All @@ -10,11 +12,223 @@
namespace CollectionViewChallenge.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CollectionViewChallengePage : ContentPage
public partial class CollectionViewChallengePage : ContentPage, INotifyPropertyChanged
{
List<string> oCollectionViewPicker = new List<string> { "Empty List", "Filled List" };
List<string> oCollectionViewEnabled = new List<string> { "Enable", "Disable" };
List<string> oCollectionViewLayout = new List<string> { "Horizontal", "Vertical" };
Dictionary<string, string> oCollectionViewDic;
private ItemsLayoutOrientation _myProperty;

public CollectionViewChallengePage()
{
InitializeComponent();
try
{
InitializeComponent();
CVPickerEnabled.ItemsSource = oCollectionViewEnabled;
CVPickerLayout.ItemsSource = oCollectionViewLayout;
CVPicker.ItemsSource = oCollectionViewPicker;
AddItemsToList();
FillCollectionView();
AddItemsToScrollToPicker();
}
catch(Exception oExp)
{

}
}

public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged([CallerMemberName] string name = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}

public ItemsLayoutOrientation GILOrientation
{
get
{
return _myProperty;
}
set
{
if (_myProperty != value)
{
_myProperty = value;
OnPropertyChanged();
}
}
}

private void AddItemsToScrollToPicker()
{
try
{
List<string> oItems = new List<string>();
oItems.Add("First Element");
oItems.Add("Second Element");
oItems.Add("Third Element");
oItems.Add("Fourth Element");
oItems.Add("Fifth Element");
oItems.Add("Sixth Element");
oItems.Add("Seventh Element");
oItems.Add("Eigth Element");
oItems.Add("Nineth Element");
oItems.Add("Tenth Element");
ScrollToPicker.ItemsSource = oItems;
}
catch(Exception oExp)
{

}
}
private void AddItemsToList()
{
try
{
oCollectionViewDic = new Dictionary<string, string>();
oCollectionViewDic.Add("First Element", "tab_about.png");
oCollectionViewDic.Add("Second Element", "tab_about.png");
oCollectionViewDic.Add("Third Element", "tab_about.png");
oCollectionViewDic.Add("Fourth Element", "tab_about.png");
oCollectionViewDic.Add("Fifth Element", "tab_about.png");
oCollectionViewDic.Add("Sixth Element", "tab_about.png");
oCollectionViewDic.Add("Seventh Element", "tab_about.png");
oCollectionViewDic.Add("Eigth Element", "tab_about.png");
oCollectionViewDic.Add("Nineth Element", "tab_about.png");
oCollectionViewDic.Add("Tenth Element", "tab_about.png");
}
catch(Exception oExp)
{

}
}
private void FillCollectionView()
{
try
{
List<ListViewElements> oElements = new List<ListViewElements>();
foreach (var items in oCollectionViewDic)
{
ListViewElements NewSectionItem =
new ListViewElements()
{
LVName = items.Key,
LVImage = items.Value
};
oElements.Add(NewSectionItem);
}

CollectionListViewH.ItemsSource = oElements;
CollectionListViewV.ItemsSource = oElements;
}
catch(Exception oExp)
{

}
}
private void CVPicker_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
if (CollectionListViewH.ItemsSource != null && CVPicker.SelectedIndex == 0)
{
CollectionListViewH.ItemsSource = null;
CollectionListViewV.ItemsSource = null;
}
else if (CVPicker.SelectedIndex == 1)
{
AddItemsToList();
FillCollectionView();
}
}
catch(Exception oExp)
{

}
}

private void CVPickerLayout_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
if (CollectionListViewH.ItemsSource != null)
{
if (CVPickerLayout.SelectedIndex == 0)
{
CollectionListViewH.IsVisible = true;
CollectionListViewV.IsVisible = false;
ScrollToPicker.SelectedItem = null;
CVPickerEnabled.SelectedItem = null;
}
else if(CVPickerLayout.SelectedIndex == 1)
{
CollectionListViewH.IsVisible = false;
CollectionListViewV.IsVisible = true;
ScrollToPicker.SelectedItem = null;
CVPickerEnabled.SelectedItem = null;
}
}
}
catch(Exception oExp)
{

}
}

private void CVPickedEnabled_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
if (CollectionListViewH.ItemsSource != null)
{
if (CVPickerEnabled.SelectedIndex == 0)
{
CollectionListViewH.IsEnabled = true;
CollectionListViewV.IsEnabled = true;
}
else if (CVPickerEnabled.SelectedIndex == 1)
{
CollectionListViewH.IsEnabled = false;
CollectionListViewV.IsEnabled = false;
}
}
}
catch(Exception oExp)
{

}
}

private void CollectionListViewV_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

}

private void CollectionListViewH_SelectionChanged(object sender, SelectionChangedEventArgs e)
{

}

private void ScrollToPicker_SelectedIndexChanged(object sender, EventArgs e)
{
if (CollectionListViewH.ItemsSource != null && CollectionListViewH.IsVisible)
{
List<ListViewElements> Items = (List<ListViewElements>)CollectionListViewH.ItemsSource;
ListViewElements Selecteditem = Items.Select(x => x).Where(y => y.LVName == ScrollToPicker.SelectedItem.ToString()).FirstOrDefault();
CollectionListViewH.ScrollTo(Selecteditem);
}
else if (CollectionListViewV.ItemsSource != null && CollectionListViewV.IsVisible)
{
List<ListViewElements> Items = (List<ListViewElements>)CollectionListViewV.ItemsSource;
ListViewElements Selecteditem = Items.Select(x => x).Where(y => y.LVName == ScrollToPicker.SelectedItem.ToString()).FirstOrDefault();
CollectionListViewV.ScrollTo(Selecteditem);
}
}
}
public class ListViewElements
{
public string LVName { get; set; }
public string LVImage { get; set; }
}
}
}