Hi!
I have an idea for a design based on your beautiful Ticket Scroll example. Which I tore apart, and figured out a way to somewhat use even though it’s not even close to as nice as the example.
This is how I picture it where the white field filled with “Lorem Ipsum” is a scrollview with search results. The idea is that when not search, this field is hidden, which is easy enough. The tricky part is that it should “push” a map out of the view, until the map is visible by n units. Clicking the map should bring it up again and hide the search results. I think this should be done with a Grid, but I can’t figure out how - Any hints?
PS: Uploading the ZIP file cleared the post text
You might want to use a DockPanel here, instead of a Grid. Put the map as Dock="Bottom" and leave the search results to be the main body (alternately you can put the search as Dock=“Top” and the map as the body).
Then in a Tapped trigger you can modify the height of the bottom part, this will expand the map and shrink the search results.
That makes sense. So I implemented the code below. But how would I set the map to either fill the height of it’s parent or just show X% with a minimum height of n?
I think you forgot the code…?
There are lots of options for layout. To get the one you want you need to describe very clearly what you want. Likely you’ll want to use the Limit sizing mode in this case.
I’ve attached the current code implementing your Grid suggestion.
What I want to is pretty much what the picture in the first post illustrates; I want a state to control wether a scrollview of search results are showed. If they aren’t showed, the map should fill the area up to the purple panel. But when the scrollview are showed, I still want the map to have a bit of room at the bottom of the view, so the user can tap it to bring it up again.
I also noticed the ScrollView is filling the screen, also behind the TopBar. How could I prevent that so it’s not taller than the available space beneath the TopBar?
If you can provide some (compact) UX code which reproduces the issue then you might get input from more people. 
Dunno what you mean by compact, but I took the above code which is based on the TicketScroll example and removed everything irrelevant to just leave my try on achieving the above described design.
I was talking specifically about the scrollview-behind-topbar issue (I didn’t realize your other question wasn’t answered yet), so I assumed that could be demonstrated with just some inline UX.
Anyway: the scrollview is behind the top bar (and several other things) because your layout is as follows:
<Page>
<StackPanel>
<!-- Everything in this stack panel will be on top of the DockPanel -->
</StackPanel>
<DockPanel/>
</Page>
Page is just a Panel (with some additional attributes) and it simply layers its contents on top of eachother. You probably need to use other layouts (such as docking things in a dockpanel) to achieve the ordering you want.
As for moving the map up and down to obscure the list, is this something similar to what you’re thinking of?
<App>
<ClientPanel>
<Text Value="Top bar" Height="10%" Dock="Top" Background="#a0a" Color="#fff"/>
<Panel>
<Panel Color="#0f0">
<Text Value="I'm the map"/>
<Clicked>
<Toggle Target="toggle"/>
</Clicked>
<WhileTrue ux:Name="toggle" Value="false">
<Move Y="0.9" RelativeTo="Size" Duration="0.3"/>
</WhileTrue>
</Panel>
<ScrollView>
<StackPanel Color="#ddf">
<Each Count="20">
<Text>foo bar</Text>
</Each>
</StackPanel>
</ScrollView>
</Panel>
</ClientPanel>
</App>
Aah, cool! That really explains a lot.
So to take this a step further, say I want the user to be able to drag the map up again. How would I go about doing that? Would it still be the same markup with a few new parameters?
In that case I’d use a simple navigator instead, since that’ll make it easy to have the map snap to one of 2 states (map at bottom or map on top).
You simply treat the map as a separate page (on top of the stuff it’ll cover) and have a swipenavigation that moves it up/down.
See the docs and examples for ideas of how this can be implemented.
Remi Pedersen wrote:
See the docs and examples for ideas of how this can be implemented.
Do you have a link to documentation showcasing this? I’m not really sure what I’m looking for.
These three examples all (ab)use navigation in ways that should be of interest: https://www.fusetools.com/examples/swipe-gesture-reveal https://www.fusetools.com/examples/navigation-animation https://www.fusetools.com/examples/weather-app
Other than that I recommend you simply dive into the docs on navigation in general.
