Windowscommunitytoolkit: new control : adaptive train view

[touseefbsb]

ignore the name its weird but I couldn't think of any proper name, basically I want to say a control like adaptivegridView but in this case it will be one row only ( which already exists in adaptiveGridView, but it will have slider buttons on both right and left sides ( like in a normal flipview ) so basically this control can be used on app homepages to scroll through suggestions of items, and scrolling will be possible both with the buttons on each side and also with normal scrolling ( swapping/ scroll bar).

Example : windows store app homepage has this control for recommended apps or new apps.

There maybe already a control closely related to this, if it exists then please let me know how to achieve this functionality, otherwise consider it as a suggestion :)

UserVoice : https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/19537171-horizontal-listview-with-next-and-previous-buttons

Thanks for reading

[Odonno]

I suppose what you suggest refer to the ListView control with Buttons on each side of the list.

[touseefbsb]

yes something like that, it will be usually horizontal with buttons on each side and will act as a listview :)

[skendrot]

As @Odonno suggested, this can already be accomplished with a ListView. A better choice would probably be a FlipView. You could even do it with a Frame. I don't see a need to create a control around this when adding buttons on the left and right of a FlipView is pretty easy to do.

[touseefbsb]

actually flipview shows only 1 element at a time, I want to show multiple elements at a time like Listview

[skendrot]

FlipView can show the previous and next items with a little styling.
In any case I think what you're asking can be accomplished rather easily unless I'm missing something

[touseefbsb]

if that is the case can you please redirect me to a source? where I can see how to achieve this scenario? :)

[skendrot]

If you are having particular questions about UWP I would recommend the Microsoft forums or Stackoverflow

[Vijay-Nirmal]

@touseefbsb @skendrot You can use Carousel XAML Control to achieve this. Just set ItemDepth = 0, ItemRotationX = 0, ItemRotationY = 0, ItemRotationZ = 0, Orientation = Horizontal.

[touseefbsb]

@Vijay-Nirmal How can I add the functionality of scrolling in the side buttons of the carousel?

[Odonno]

@Vijay-Nirmal I think it will not have the same result.

But as @touseefbsb seems to highlight, Windows Store or even some other Microsoft apps have pretty good UI controls and it could be interesting to be able to use them instead of rewriting them. I am not saying it should be included in the Community Toolkit but maybe another library. @skendrot What do you think?

[skendrot]

Maybe I'm misunderstanding the request. Can you give any examples of this being used today?

[touseefbsb]

as I mentioned before it is used on Windows Store Homepage for suggested apps with a "See all" hyperlink to go and explore more apps in gridview on another page.it is also used on homepage of youtube.com as they show suggested videos from channels in this horizontal type of view.

[skendrot]

The store does not have buttons for previous next. It's pretty much an AdaptiveGridView with OneRowMode and scrolling disabled

[Odonno]

I think we talk about Windows Store Anniversary Update, the new one (Windows Insiders) does not have the ListView with Buttons like @skendrot said.

EDIT: Take example of Netflix

[skendrot]

I'm on Creators Update

[Odonno]

@skendrot Sorry, yes, we do not talk of Windows Store of Creators Update or Fall Creators Update but the one before (Anniversary Update).

Or if you want something we can all see no matter what version, please refer to the Netflix app. Each category is a line with right/left arrow Button.

[Vijay-Nirmal]

@touseefbsb You can increase (or decrease) SelectedIndex on each button click.

@Odonno

I think it will not have the same result

I think we can achieve it. Maybe It won't be perfect. I also like to see a dedicated control for this.

[touseefbsb]

yeah there are many media like apps and store which use the same control so it will be a control which will be used a lot just like listview so it would be beneficial if we can have such control

[Vijay-Nirmal]

@touseefbsb Agree, I also like to see a dedicated control for this
@skendrot I think you should reopen this issue

[skendrot]

@touseefbsb please create a user voice for this request. Best to make sure the item is well detailed

[touseefbsb]

I havent created a user voice before, kindly guide me how to do that :)

[Vijay-Nirmal]

@taoyouh

1. Go to wpdev.uservoice.com (Sign Up if you have not yet signed in)
2. Enter your Idea in the "Enter your idea or find an existing suggestion" box
3. Click "Post a new idea..." button
4. Set the category as UWP Community Toolkit
5. Describe your idea in detail in the next box and Click Post
6. Share the Post link in this issue

[touseefbsb]

thnks @Vijay-Nirmal

[touseefbsb]

I have created a user voice and here is the link to it :) https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/19537171-horizontal-listview-with-next-and-previous-buttons

[taoyouh]

@Vijay-Nirmal I know nothing about this issue. Why did you mention me?

[Vijay-Nirmal]

@taoyouh I am very very sorry. I thought of mention "touseefbsb" but when I type "t" without seeing the name I pressed Enter. I thought it will show only the participants of this issue at first.

[Vijay-Nirmal]

Ideas for this control

1. Next and Previous Buttons
2. Vertical and Horizontal mode
3. Single line and multiple lines mode
4. Option to set ItemsPanel. so that we can use LoopItemsPanel #1471
5. Sticky mode (bool) - If this mode is on then after scrolling the first item should be visible completely. In other words, the first item should not be clipped by the border of the control.
6. Smooth scrolling (bool) - If true then changing SelectedItem via code behind should change the view to the SelectedItem through smooth scrolling instead of jumping to it.

[michael-hawker]

@nmetulev this seems related to what you did in the new sample app and the added hover pointer scroll, eh?

[touseefbsb]

@nmetulev any update on this control? will it be coming? I dont see it listed in the milestone

[Odonno]

@touseefbsb Oh, I remember this discussion. I think we can achieve this control without too much effort. I have an example code from a previous project of mine, just need to add previous/next buttons and the according scroll behavior.

Here is the example :

<ListView x:Name="TranslationsCardsList"
          SelectionMode="None"
          HorizontalAlignment="Stretch"
          Height="50"
          ItemsSource="{x:Bind ViewModel.TranslationsCardItems, Mode=OneWay}"
          ItemTemplateSelector="{StaticResource TranslationCardsTemplateSelector}"
          ItemClick="{x:Bind ViewModel.ClickOnCard}" 
          IsItemClickEnabled="True"
          ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.IsVerticalRailEnabled="False"
          ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollMode="Enabled" ScrollViewer.IsHorizontalRailEnabled="True">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>

    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0" />
            <Setter Property="Margin" Value="0" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

[touseefbsb]

@Odonno I also tried to create something like this, it works to some extent but it doesnt fullfill all the requirements discussed, that is why I thought a dedicated control should be created in the toolkit so that its requirements can be closely analyzed by the toolkit team and also we can create more effecient control for this purpose.

[touseefbsb]

@Odonno the most significant feature in this trainview is that when the next button is pressed, the last itemcurrently showing on screen ( on right most ) should scroll/slide on most left side of the control, this is currently not doable with listview easily as far as I reckon. for example currently 5 items are being shown ( 1,2,3,4,5) , when user presses next button or right arrow ( on extreme right side of the control ) now the control will show the next 5 items ( 5,6,7,8,9 ) and so on, only 1 item may overlap each time so that user knows the context of the items.

[skendrot]

Have you tried the ScrollIntoView method?

[touseefbsb]

also @Vijay-Nirmal seems to have some good suggestions abt features as well

[touseefbsb]

@skendrot yes I know abt scrollintoview method, but we have to provide it a specific item, but if the user resizes the window or the developer uses a different size for the datatemplate, then we dnt know which item is the last item currently so that we can scroll it to the start

[touseefbsb]

is there a method in the platform, where we can somehow know that which is the last item currently in the user view? if there is then we can find the last item currently in view and just use ScrollIntoView to scroll it towards the start.

[Vijay-Nirmal]

@touseefbsb Take a look at SmoothScrollNavigation Helper

listViewBase.SmoothScrollNavigation(listViewBase.Width, ScrollNavigationDirection.Left, false);

[touseefbsb]

@Vijay-Nirmal looks like exactly what I need. Thanks a lot :)

[michael-hawker]

So does that mean we have a workaround to support this with a bit of templating and code? Could this just become a good sample for the SmoothScrollNavigation Helper then when we get multi-sample in the sample app?

[Vijay-Nirmal]

@michael-hawker

So does that mean we have a workaround to support this with a bit of templating and code?

Maybe. SmoothScrollNavigation Helper has some problems like it doesn't allow users to hold the button to scroll continuously. As you said, it's just a "workaround".

I like to have a dedicated control for this.

Here is my original idea for this control.

1. Next and Previous Buttons
2. Vertical and Horizontal mode
3. Single line and multiple lines mode
4. Option to set ItemsPanel. so that we can use LoopItemsPanel #1471
5. Sticky mode (bool) - If this mode is on then after scrolling the first item should be visible completely. In other words, the first item should not be clipped by the border of the control.
6. Smooth scrolling (bool) - If true then changing SelectedItem via code behind should change the view to the SelectedItem through smooth scrolling instead of jumping to it.

[touseefbsb]

I agree with @Vijay-Nirmal scroller helper does provide a temporary work around but it still doesnt make a complete dedicated control which can support all use case scenarios for this control. So I still think this control should be taken seriously for adding in the toolkit :)

[touseefbsb]

@nmetulev any thoughts on this one? :)

[nmetulev]

I'm still not convinced we need a whole new control for this. If we can accomplish this with attached properties and extensions, than that's a much better story. From the list above,

• 1 is as easy as adding two buttons
• 2, 3, 4 is just describing a ListView.
• 5 and 6 are possible through a listview or an extension (as @Vijay-Nirmal is already working on)

[Vijay-Nirmal]

If we want to achieve this with properties, extensions and events. Then we need

• SmoothScrollIntoView extension -> to smoothly scroll the items
• SmoothScrollNavigation extension -> to navigate with the buttons. Maybe I can add "Sticky mode" property in this extension but there is no discussion for adding this helper in the toolkit
• LongPress event (fires recursively on long press) -> to scroll the item on long press.

[touseefbsb]

if we can achieve this with extensions and helpers which @Vijay-Nirmal is working on, those helpers will still be helpful if added as extensions within the toolkit, and developers can use them in other scenarios as well to make many new kinds of listviews and gridviews.

[skendrot]

And, you can accomplish this quite easily with one line of code for each button

private void OnLeftButtonClick(object sender, EventArgs e)
{
    ScrollNextSection(myListView.ActualWidth * -1);
}
private void OnRightButtonClick(object sender, EventArgs e)
{
    ScrollNextSection(myListView.ActualWidth);
}

private void ScrollNextSection(double amount)
{
    // assumes you have already gotten the ScrollViewer using the following:
    // listScroller = myListView.FindDescendant<ScrollViewer>();
    listScroller.ChangeView(listScroller.HorizontalOffset + amount, scrollViewer.VerticalOffset, null);
}