Hi PallelaNaveen-9346,
Welcome to our Microsoft Q&A platform!
Don't know what kind of control the "lisst view" you mentioned is. And since Listview has no property for setting ItemsLayout, here I provide a CollectionView Demo.
Here is the xaml.
<StackLayout VerticalOptions="Start">
<CollectionView x:Name="collectionView"
ItemsSource="{Binding ItemSource}"
ItemsLayout="HorizontalList"
HorizontalScrollBarVisibility="Always"
HeightRequest="100">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="Test"/>
<Label Text="{Binding .}"/>
<Button Text="click"
Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.ScrollToEndCommand}"
CommandParameter="{Binding .}"/>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
Also, we decalre a public property "CollectionView Cview", so that in ViewModel we can access the collectionView.
class MainPageViewModel
{
public CollectionView Cview { get; set; }
public List<string> ItemSource { get; set; }
public ICommand ScrollToEndCommand { get; }
public MainPageViewModel()
{
ItemSource = new List<string>() { "A", "B", "C", "D", "E", "F", "G", "H", "I" };
ScrollToEndCommand = new Command<string>(ScrollToEnd);
}
void ScrollToEnd(string str)
{
if (ItemSource.IndexOf(str) == 1)
Cview.ScrollTo(ItemSource.Last(), position: ScrollToPosition.End);
}
}
Now set the BindingContext and assign value to property "Cview".
public MainPage()
{
InitializeComponent();
MainPageViewModel mainPageViewModel = new MainPageViewModel();
mainPageViewModel.Cview = collectionView;
BindingContext = mainPageViewModel;
}
Update
To achieve "expand", we can set two different "column groups", and then decide whether to display this "colmun group" by setting its "IsVisible" property.
<ScrollView Orientation="Horizontal" BackgroundColor="Green">
<StackLayout>
<Grid WidthRequest="{Binding ColumnWidth}">
<Grid ColumnDefinitions="150,150,150,150">
<Label Text="Sno" IsVisible="{Binding ColumnGroup1IsVisible}"/>
<Label Grid.Column="1" Text="Name" IsVisible="{Binding ColumnGroup1IsVisible}"/>
<Label Grid.Column="2" Text="QTY" IsVisible="{Binding ColumnGroup1IsVisible}"/>
<Label Grid.Column="3" Text="Expand" IsVisible="{Binding ColumnGroup1IsVisible}"/>
</Grid>
<Grid ColumnDefinitions="150,150,150,150,150,150">
<Label Text="Code" IsVisible="{Binding ColumnGroup2IsVisible}"/>
<Label Grid.Column="1" Text="Address" IsVisible="{Binding ColumnGroup2IsVisible}"/>
<Label Grid.Column="2" Text="Order" IsVisible="{Binding ColumnGroup2IsVisible}"/>
<Label Grid.Column="3" Text="QTY" IsVisible="{Binding ColumnGroup2IsVisible}"/>
<Label Grid.Column="4" Text="UM" IsVisible="{Binding ColumnGroup2IsVisible}"/>
<Label Grid.Column="5" Text="Expand" IsVisible="{Binding ColumnGroup2IsVisible}"/>
</Grid>
</Grid>
<CollectionView x:Name="collectionView"
ItemsSource="{Binding ItemSource}"
HorizontalScrollBarVisibility="Always"
HeightRequest="100"
WidthRequest="{Binding ColumnWidth}"
BackgroundColor="Red">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid ColumnDefinitions="150,150,150,150"
IsVisible="{Binding Source={x:Reference collectionView}, Path=BindingContext.ColumnGroup1IsVisible}">
<Label Text="{Binding Sno}"/>
<Label Grid.Column="1" Text="{Binding Name}"/>
<Label Grid.Column="2" Text="{Binding QTY}"/>
<Button Grid.Column="3" Text="Expand" Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.ExpandCommand}"/>
</Grid>
<Grid ColumnDefinitions="150,150,150,150,150,150"
IsVisible="{Binding Source={x:Reference collectionView}, Path=BindingContext.ColumnGroup2IsVisible}">
<Label Text="{Binding Code}"/>
<Label Grid.Column="1" Text="{Binding Address}"/>
<Label Grid.Column="2" Text="{Binding Order}"/>
<Label Grid.Column="3" Text="{Binding QTY}"/>
<Label Grid.Column="4" Text="{Binding UM}"/>
<Button Grid.Column="5" Text="Expand" Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.ExpandCommand}"/>
</Grid>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</ScrollView>
And define the corresponding properties and Command "ExpandCommand" in ViewModel.
public ICommand ExpandCommand { get; }
bool columnGroup1IsVisible;
public bool ColumnGroup1IsVisible
{
get => columnGroup1IsVisible;
set
{
columnGroup1IsVisible = value;
OnPropertyChanged("ColumnGroup1IsVisible");
}
}
bool columnGroup2IsVisible;
public bool ColumnGroup2IsVisible
{
get => columnGroup2IsVisible;
set
{
columnGroup2IsVisible = value;
OnPropertyChanged("ColumnGroup2IsVisible");
}
}
int columnWidth;
public int ColumnWidth
{
get => columnWidth;
set
{
columnWidth = value;
OnPropertyChanged("ColumnWidth");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
public MainPageViewModel()
{
// ...
ExpandCommand = new Command(Expand);
ColumnGroup1IsVisible = true;
ColumnGroup2IsVisible = false;
ColumnWidth = 600;
}
void Expand()
{
ColumnGroup1IsVisible = !columnGroup1IsVisible;
ColumnGroup2IsVisible = !columnGroup2IsVisible;
ColumnWidth = columnGroup1IsVisible == true ? 600 : 900;
}
Regards,
Kyle
If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Hi sir,
Thank you for your inputs and the code for sharing. I need some thing like this below. As per the above code Header view is not displaying as expected.
As per the requirement the above can be implemented using collection view?
Let me drw the requirement here
Sno Location Name Location QTY
1 "XYDLJFL" 10 -->
2 "jhkfkdg" 23 -->
3 "lkjglkdf" 25 -->
Now when user clicks on the expnand for more details on --> it should come like below
Code Address Order QTY UM
8989 "XYDLJFL" 10 pm <--
98698 "jhkfkdg" 23 hn <--
98793 "lkjglkdf" 25 fg <--
When User click on <-- its should come to the original state
Thanks,
Naveen.
@Pallela, Naveen I have updated the answer, and you can check it now. Besides, please note that one thread only disscusses about one issue. If the original issue has been solved, you can closed this thread and post the new issue on another new thread.
Thank you for the inputs.
Hi KyleWang,
Thnk you for the inputs. Can we freeze the first column.
@Pallela, Naveen Please note: one thread only discusses one issue. So post the new issue or requirement on another new thread.
Sign in to comment