How should I render a static list of content?

BFGBFG USMember
edited November 8 in Xamarin.Forms

I have an array of Steps and each Step has an Instruction field. I want to make each Step to be shown in a list that cannot be scrolled, selected, or have view cell lines between them.

Current:
<ListView ItemsSource="{Binding Steps}"> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <ViewCell.View> <Label Text="{Binding Instruction}" FontSize="Small"/> </ViewCell.View> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView>

A list view does not do what I want as it is designed to be interactive. I would like some way to render a static list. How should I go about this?

(without making 10 labels and a Step 1 through 10 string and bool property on the viewModel.)

Answers

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @BFG

    XLabs has been deprecated but you might use of their repeater view control to bind to your static list. It has the ItemClickCommandProperty you could use behaviors to hook into and set the label's property in the viewmodel.

    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms/Controls/RepeaterView.cs

  • BFGBFG USMember

    @NMackay

    I would rather avoid using something deprecated.

    Thank you for answering. :)

  • NMackayNMackay GBInsider, University ✭✭✭✭✭

    @BFG

    The clues are in there to solve your problem, that's what I meant.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    Hi @BFG ,

    Well if I were you, I will not restrict my users to be interactive with my apps content, I do not know why you intend to display just as non-interactive content, well that depends, on the use case,
    Further how much is the content (instructions) I am sure on smaller devices it is going to be pain for users, when they will not be able to scroll if this instructions aren't visible completely.

    OK , no more words of wisdom, I guess there is no doubt about that you want this to be done programmatically like binding with a ItemsSource property or something.

    I do not prefer this doing in code-behind, however in situations like this, I think I would use the TabbedPages and add the instructions with a label like control withing each individual tab, programmatically using a while/for loop and adding content within. This way I am sure that users can not scroll them vertically, yet they can swipe them from left to right and vice versa.

    However there is a catch, since you have more then 10 pages(tabs i mean) , it would be considered a bad design practice to be implemented, unless your tabs have some icons or short title which fits in the horizontal tab/ scroll-able tabs.

    Just give it a thought, It might help.

    -- Regards,
    N Baua

  • BFGBFG USMember

    Yo @N_Baua,

    You bring up some good points. Our entire page is contained on a scroll view. The rest of page is interactive and only these display instructions values are static. Each instruction is one line of text and we are planning to change the look (via text color) of the current active step so I want hoping to use a ItemsSource property as the xaml would have access to the Instruction Text and some kind of IsActive.

    As for code-behind... This means adding elements inside the Page.xaml.cs file right? I have yet to figure out how to trigger functions in the ContentPage class without giving the ContentPage to the ViewModel. Trying to keep with the MVVM so my Pages know of the VM but the VM just exposes observable properties. If you know of the good tutorial for this please let me know.

  • N_BauaN_Baua INMember ✭✭✭✭✭
    edited November 9

    Hi @BFG,
    Can you please post a mock design of your control/screen. I not able to frequently check XF forum as before, due to my busy project schedule. So it would be nice if I have something visual rather than just me assuming on your requirement.

    Hopefully I can give you something on this lines.
    Labels (may be clickable) within a Grid/StackLayout - with style bindings as used in MVVM.

    Use the PRISM library (I prefer this over MVVMCross and others) for Xamarin it makes MVVM experience much better then using the vanilla XF implementation.

    Regards,
    -- N Baua

  • BFGBFG USMember
    edited November 9

    Something like this. These "Steps" are not interactive there are other controls for the flow. We want a list like this for display purpose to show where the user is in the process.

    us.v-cdn.net/5019960/uploads/editor/gk/c35k4s2coqo5.png
    Note: Forums says I can't post links after I drag & drop the image.

    This post is asking how would one create a list like this? It seems it should be really simple. The simple way might be doing it inside the Page.xaml.cs file but of the tutorials that show creating elements in the .cs file do not tell what is triggering the changes. If I make a method UpdateStep() in the Page.xaml.cs how would I trigger it every time the Steps List changes?

    Edit: Ok, there is some confusion on my use of static list. Static list from my title means it is not interactive. The list itself is loaded from the Web API. There are some that have 1 step and our highest number of steps is 6. The 10 in the original post was exaggeration. Our current (demo) implementation uses six labels on the xaml with 6 instructionText string properties and 6 isVisable bool properties on the view model. Adding another 6 bool properties for which one is active would be over kill.

  • N_BauaN_Baua INMember ✭✭✭✭✭

    This post uses the custom renderer, I am not sure if this is what you want.

    I would rather suggest you to use the Grid/Label combination.

    -- N Baua

Sign In or Register to comment.