I'm trying to recreate the windows phone calendar UI in my app. But I have a hard time figuring out which layouts would be best to do so.
No day selected:
Wednesday selected:
Right now I'm only focussing on the fields of the days. So no bar below and no carousel on top.
My basic idea for the items where that the days can be represented by ListView elements, possible with the header or maybe with an extra Label element acting as the header.
Every Day has a bar on top and one in between the columns so those can be represented by boxviews.
I've made a nested stacklayout representing one row of the calendar, so two days. This stacklayout is made up of:
a BoxView to represent the border on top,
another StackLayout in a horizontal direction with ListView of day 1, a BoxView for the border in between and a Listview of day 2
An invisible ListView that I can expand to show the items of the day on the left or the day on the right
If you look at the pictures you can see that after clicking on wednesday all of the previous fields shrink, leaving only the header (label). And the listview of that particular day expands underneath the selected row.
My first instinct was to go for a nice grid but a grid does not seem to be the best option for elements that need to change their size dynamically. Then I tried a relative design but I had a hard time recreating this transition where the days become smaller leaving only their headers and a new listview elements suddenly appearing taking up all of the remaining space.
Could someone please point me in the right direction?