locked
[UWP][C#] How does Microsoft's weather app accomplish the display of pivot like daily forecasts shown below the current forecast? RRS feed

  • Question

  • Do they use the pivot control with each header being the daily forecast item? Can this be accomplished with the standard pivot control and an ObservableCollection for the headers? I know how to create the ObservableCollection of items I want but not sure how to link it to get a similar appearance to the horizontal display of daily forecasts with the flippers.

    Before I discovered the pivot control, I was implementing my own display of items with chevrons for displaying next item. But didn't like the displayed items changing position with the removal of previous and next chevrons at either end of the displayed items in the ListView.

    Thursday, March 2, 2017 7:12 PM

All replies

  • Hello,

    It seems that the daily forecast is not the Pivot because of if you click on right or left header buttons on Pivot then Item content also changing. I think it is an FlipView with stretched HorizontalAlignment and the Items have fixed MaxWidth. You can achieve this  by implementing master detail with FlipView.

    Master/details pattern   Master/detail sample


    Make the community better together


    Friday, March 3, 2017 7:32 AM
  • Hi OnTheBeach2,

    The daily forecast is more like a ListView with ScrollViewer.HorizontalScrollMode enabled while the left and right button are using ListView.ScrollIntoView method.. You could refer to the following thread to write your own one. 
    http://stackoverflow.com/questions/30576212/xaml-universal-app-how-to-make-a-horizontal-scrolling-listview

    <ListView
              ScrollViewer.HorizontalScrollMode="Enabled"
              ScrollViewer.HorizontalScrollBarVisibility="Hiden"
              ScrollViewer.VerticalScrollMode="Disabled">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>
    
    Best Regards,
    David

     

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    • Proposed as answer by David_FF Wednesday, March 8, 2017 12:39 PM
    Friday, March 3, 2017 2:45 PM