How to create a static header?

AlexRutherfordAlexRutherford GBUniversity ✭✭

Im trying to create a text based game for IOS and Android. This application will always have the same header at the top of every page (stating the level, exp etc of the user). This header will always look the same but refreshes the data whenever the user does an action on the app.

So as the header is always the same I see no reason why I would need to rebuild it for every page + it looks a little silly. Is there anyway to create the header as some sort of static header with the content changing under it? If possible I would like to keep the navigation and the app could contain tabs too.

Only solution I can think off: Creating the header on the application and place the whole "app" into a webview. This isnt really an option as I dont want to do the application in a webview.

I looked into this a fair amount and cant seem to find/think of a way to handle this kind of usability. If you would like a image to help picture this please let me know and I will see what I can come up with.

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭

    I have a header and slideout on all my pages. I use Control Templates
    https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    @lpdavies said:
    I have a header and slideout on all my pages. I use Control Templates
    https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/

    This is kind of what I'm looking for but its not "static", as I'm using tabs it just means when I scroll from left to right you see the header on all of the tab pages. Its not above the tabs static all over the site.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @AlexRutherford said:

    @lpdavies said:
    I have a header and slideout on all my pages. I use Control Templates
    https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/

    This is kind of what I'm looking for but its not "static", as I'm using tabs it just means when I scroll from left to right you see the header on all of the tab pages. Its not above the tabs static all over the site.

    I don't think this is possible with a TabbedPage. When i had to do something similar I built my own tabbed control which shown Views instead of pages.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    @lpdavies said:

    @AlexRutherford said:

    @lpdavies said:
    I have a header and slideout on all my pages. I use Control Templates
    https://developer.xamarin.com/guides/xamarin-forms/templates/control-templates/

    This is kind of what I'm looking for but its not "static", as I'm using tabs it just means when I scroll from left to right you see the header on all of the tab pages. Its not above the tabs static all over the site.

    I don't think this is possible with a TabbedPage. When i had to do something similar I built my own tabbed control which shown Views instead of pages.

    Yeah, Im currently working on something like that. Trying to get my head around how its going to work. Cheers for the help.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited January 2017

    @AlexRutherford said:
    Only solution I can think off: Creating the header on the application and place the whole "app" into a webview. This isnt really an option as I dont want to do the application in a webview.

    I have a similar need: I want a static single instance of a page header and page footer that will be on every page.
    I was thinking about making 1 Page with a CarouselView in the middle. Then every page I would want to go to would really be a ContentView that pushes into the CarouselView. But it does mean creating my own Navigation stack/queue, and instead of Pushing a page I would scroll to a page programmatically. Not sure if that's a design pattern I want to go for yet.

    You mentioned wanting to scroll left-right. Sounds like CarouselView might work for your need.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @ClintStLaurent said:

    @AlexRutherford said:
    Only solution I can think off: Creating the header on the application and place the whole "app" into a webview. This isnt really an option as I dont want to do the application in a webview.

    I have a similar need: I want a static single instance of a page header and page footer that will be on every page.
    I was thinking about making 1 Page with a CarouselView in the middle. Then every page I would want to go to would really be a ContentView that pushes into the CarouselView. But it does mean creating my own Navigation stack/queue, and instead of Pushing a page I would scroll to a page programmatically. Not sure if that's a design pattern I want to go for yet.

    You mentioned wanting to scroll left-right. Sounds like CarouselView might work for your need.

    This is the way to do it if CarouselView was stable :wink: You won't be able to pull off more then 3 views otherwise, its a weird issue with CarouselView. But CarouselView stable is on the roadmap for February I think.

    This solution worked well for me when it came to iOS, But the android performance was so bad I would avoid going down this route again. I was storing way too much in memory. Maybe your pages will be a little more lightweight.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    @lpdavies said:

    @ClintStLaurent said:

    @AlexRutherford said:
    Only solution I can think off: Creating the header on the application and place the whole "app" into a webview. This isnt really an option as I dont want to do the application in a webview.

    I have a similar need: I want a static single instance of a page header and page footer that will be on every page.
    I was thinking about making 1 Page with a CarouselView in the middle. Then every page I would want to go to would really be a ContentView that pushes into the CarouselView. But it does mean creating my own Navigation stack/queue, and instead of Pushing a page I would scroll to a page programmatically. Not sure if that's a design pattern I want to go for yet.

    You mentioned wanting to scroll left-right. Sounds like CarouselView might work for your need.

    This is the way to do it if CarouselView was stable :wink: You won't be able to pull off more then 3 views otherwise, its a weird issue with CarouselView. But CarouselView stable is on the roadmap for February I think.

    This solution worked well for me when it came to iOS, But the android performance was so bad I would avoid going down this route again. I was storing way too much in memory. Maybe your pages will be a little more lightweight.

    I did look into carousel views but like you said its not very stable at the moment. I had a look at the bugs and it don't look great for android (what I'm aiming for at the moment), maybe I will have to wait to try this when the stable release is out.

  • WinterCloudWinterCloud GBMember ✭✭✭

    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    @ClintStLaurent said:

    @AlexRutherford said:
    Only solution I can think off: Creating the header on the application and place the whole "app" into a webview. This isnt really an option as I dont want to do the application in a webview.

    I have a similar need: I want a static single instance of a page header and page footer that will be on every page.
    I was thinking about making 1 Page with a CarouselView in the middle. Then every page I would want to go to would really be a ContentView that pushes into the CarouselView. But it does mean creating my own Navigation stack/queue, and instead of Pushing a page I would scroll to a page programmatically. Not sure if that's a design pattern I want to go for yet.

    You mentioned wanting to scroll left-right. Sounds like CarouselView might work for your need.

    I also was going to try using a scroll view and creating my own tabs for it, now I see that android doesn't have paging as an option for the scrollview. Annoying.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭
    edited January 2017

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

  • WinterCloudWinterCloud GBMember ✭✭✭

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

  • seanydaseanyda GBMember ✭✭✭✭✭

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Without repeating code too I think he means. Which is why I suggested Control Templates. Change it once, changes everywhere. Also a StackLayout would be a bad way of including a header in a page, It should be a grid if anything.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Look at it this way. You have 10 pages all using the exact same header, to navigate to these pages you will push them, scroll (tabs) or something like that. If we do that you will see the same header "load" again and again. There is no need to put the header on every page when it never (ever) changes other then data.

    I would like to load/render it 1 time (ever) and thats it. So the content under it can move, change, navigate but the header will always be visible and never move/navigate.

    I feel that wasn't very well explained but I hope it made some sense.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    @lpdavies said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Without repeating code too I think he means. Which is why I suggested Control Templates. Change it once, changes everywhere. Also a StackLayout would be a bad way of including a header in a page, It should be a grid if anything.

    Ah yes, I have used a control template for this and its great for reusable code but still not what I'm looking for, with the design.

  • JulienRosenJulienRosen CAMember ✭✭✭✭

    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Exactly. It would need to be a Grid with 2 rows. An auto height row and a star row which would contain the view.

  • WinterCloudWinterCloud GBMember ✭✭✭
    edited January 2017

    @AlexRutherford said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Look at it this way. You have 10 pages all using the exact same header, to navigate to these pages you will push them, scroll (tabs) or something like that. If we do that you will see the same header "load" again and again. There is no need to put the header on every page when it never (ever) changes other then data.

    I would like to load/render it 1 time (ever) and thats it. So the content under it can move, change, navigate but the header will always be visible and never move/navigate.

    I feel that wasn't very well explained but I hope it made some sense.

    Right, I think I got what you mean, I think you think too much, Xamarin is not that flexible, not even as flexible as WPF.

    So, if you want only rest of page changes, you are literally suggesting something other than a page, a base page for example.

    So, you can create a base page, with the static header, instead "pushing" a page, you change the content of the page, not header obviously.

    Sorted?

  • seanydaseanyda GBMember ✭✭✭✭✭

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Look at it this way. You have 10 pages all using the exact same header, to navigate to these pages you will push them, scroll (tabs) or something like that. If we do that you will see the same header "load" again and again. There is no need to put the header on every page when it never (ever) changes other then data.

    I would like to load/render it 1 time (ever) and thats it. So the content under it can move, change, navigate but the header will always be visible and never move/navigate.

    I feel that wasn't very well explained but I hope it made some sense.

    Right, I think I got what you mean, I think you think too much, Xamarin is not that flexible, not even as flexible as WPF.

    So, if you want only rest of page changes, you are literally suggesting something other that a page, a base page for example.

    So, you can create a base page, with the static header, instead "pushing" a page, you change the content of the page, not header obviously.

    Sorted?

    Yeah thats what the OP is asking but whats the solution? You can't do that and he can't use control templates because of the swipe.. It's 100% possible in Xamarin but we are thinking of the most efficient way to do it.

  • WinterCloudWinterCloud GBMember ✭✭✭

    @lpdavies said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Without repeating code too I think he means. Which is why I suggested Control Templates. Change it once, changes everywhere. Also a StackLayout would be a bad way of including a header in a page, It should be a grid if anything.

    Why stack layout is bad? performance? I admit I never benchmark views performance before.

    I don't like Grid, just because there are more code to write. lazy... and easier to mange code, due to cleaner code I guess.

  • WinterCloudWinterCloud GBMember ✭✭✭

    @lpdavies said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Look at it this way. You have 10 pages all using the exact same header, to navigate to these pages you will push them, scroll (tabs) or something like that. If we do that you will see the same header "load" again and again. There is no need to put the header on every page when it never (ever) changes other then data.

    I would like to load/render it 1 time (ever) and thats it. So the content under it can move, change, navigate but the header will always be visible and never move/navigate.

    I feel that wasn't very well explained but I hope it made some sense.

    Right, I think I got what you mean, I think you think too much, Xamarin is not that flexible, not even as flexible as WPF.

    So, if you want only rest of page changes, you are literally suggesting something other that a page, a base page for example.

    So, you can create a base page, with the static header, instead "pushing" a page, you change the content of the page, not header obviously.

    Sorted?

    Yeah thats what the OP is asking but whats the solution? You can't do that and he can't use control templates because of the swipe.. It's 100% possible in Xamarin but we are thinking of the most efficient way to do it.

    I thought Xamarin forms doesn't support swipe, you have to write your own anyway, so if you really want that detailed feature, unfortunately I don't think there is anyway around, I think, you have to write that swipe page content not header feature per platform yourself.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Without repeating code too I think he means. Which is why I suggested Control Templates. Change it once, changes everywhere. Also a StackLayout would be a bad way of including a header in a page, It should be a grid if anything.

    Why stack layout is bad? performance? I admit I never benchmark views performance before.

    I don't like Grid, just because there are more code to write. lazy... and easier to mange code, due to cleaner code I guess.

    It can move position. It depends what you want your header to do, Do you want it fixed to the top of the screen all the time? or to scroll with content? Regardless a Grid would allow you to take either of these approaches, StackLayout only allows one which is scrolling with the page.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Look at it this way. You have 10 pages all using the exact same header, to navigate to these pages you will push them, scroll (tabs) or something like that. If we do that you will see the same header "load" again and again. There is no need to put the header on every page when it never (ever) changes other then data.

    I would like to load/render it 1 time (ever) and thats it. So the content under it can move, change, navigate but the header will always be visible and never move/navigate.

    I feel that wasn't very well explained but I hope it made some sense.

    Right, I think I got what you mean, I think you think too much, Xamarin is not that flexible, not even as flexible as WPF.

    So, if you want only rest of page changes, you are literally suggesting something other that a page, a base page for example.

    So, you can create a base page, with the static header, instead "pushing" a page, you change the content of the page, not header obviously.

    Sorted?

    Yeah thats what the OP is asking but whats the solution? You can't do that and he can't use control templates because of the swipe.. It's 100% possible in Xamarin but we are thinking of the most efficient way to do it.

    I thought Xamarin forms doesn't support swipe, you have to write your own anyway, so if you really want that detailed feature, unfortunately I don't think there is anyway around, I think, you have to write that swipe page content not header feature per platform yourself.

    CarouselView supports it. Or you could build on ScrollView.

  • WinterCloudWinterCloud GBMember ✭✭✭

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

  • WinterCloudWinterCloud GBMember ✭✭✭

    @lpdavies said:

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @AlexRutherford said:

    @WinterCloud said:
    stacklayout? am I missing something? All my page have a header, which is first item in stack layout.

    I would like it to be "static", so the content under the header can change/move but the header never moves.

    Yes, that's the definition of header, right? My page header never moves, 1st item in stack layout, where can it go?

    Without repeating code too I think he means. Which is why I suggested Control Templates. Change it once, changes everywhere. Also a StackLayout would be a bad way of including a header in a page, It should be a grid if anything.

    Why stack layout is bad? performance? I admit I never benchmark views performance before.

    I don't like Grid, just because there are more code to write. lazy... and easier to mange code, due to cleaner code I guess.

    It can move position. It depends what you want your header to do, Do you want it fixed to the top of the screen all the time? or to scroll with content? Regardless a Grid would allow you to take either of these approaches, StackLayout only allows one which is scrolling with the page.

    stack layout is the page layout, of course it will change position if you add stack layout to some other containers.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @WinterCloud said:

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

    Yeah I suppose you could, but what happens if you add these items to your scrollview (bare in mind these take up as much room as possible, so your solution will not work)

    HEADER - 200px (this is a grid)
    LISTVIEW - This will attempt to take up as much room as possible
    BUTTON - This will attempt to take up as much room as possible

    So you have a page with a 200px header and then 50% ListView and 50% Button, unless you start setting heights on everything.

  • WinterCloudWinterCloud GBMember ✭✭✭

    @lpdavies said:

    @WinterCloud said:

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

    Yeah I suppose you could, but what happens if you add these items to your scrollview (bare in mind these take up as much room as possible, so your solution will not work)

    HEADER - 200px (this is a grid)
    LISTVIEW - This will attempt to take up as much room as possible
    BUTTON - This will attempt to take up as much room as possible

    So you have a page with a 200px header and then 50% ListView and 50% Button, unless you start setting heights on everything.

    Try think flexible as well. Stacklayout, only has two items in there, header, and page content.

    Regardless what page content you want, put them in a separate container, whatever you want scroll or swipe, no problem.

    Just .... try it, I got multi app running like this. If Stack layout does not have the performance issue. I can't see any easier way to do this.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

    Yeah I suppose you could, but what happens if you add these items to your scrollview (bare in mind these take up as much room as possible, so your solution will not work)

    HEADER - 200px (this is a grid)
    LISTVIEW - This will attempt to take up as much room as possible
    BUTTON - This will attempt to take up as much room as possible

    So you have a page with a 200px header and then 50% ListView and 50% Button, unless you start setting heights on everything.

    Try think flexible as well. Stacklayout, only has two items in there, header, and page content.

    Regardless what page content you want, put them in a separate container, whatever you want scroll or swipe, no problem.

    Just .... try it, I got multi app running like this. If Stack layout does not have the performance issue. I can't see any easier way to do this.

    What if you want something at the very bottom of the page? StackLayout can't support that grid can.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭
    edited January 2017

    @WinterCloud said:
    So, you can create a base page, with the static header, instead "pushing" a page, you change the content of the page, not header obviously.

    Exactly where I was just testing next, when I realized/remembered that ContentView.Content was a bindable property.

    It becomes fairly trivial at that point by just making all your 'Pages' of type ContentView instead of ContentPage.
    Then you just swap out which one is the current binded BoundView or whatever you want to call it.
    How you choose to set BoundView is up to you. Still means having to create your own Navigation scheme. But at this point that can be as simple as a List<> and a couple methods to traverse the index. at least for starters while playing with the idea.

    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage x:Class="App1.MainPage"
                 xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:App1"
                 x:Name="this"
                 BindingContext="{x:Reference this}">
    
        <Grid HorizontalOptions="FillAndExpand"
              VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="*" />
                <RowDefinition Height="24" />
            </Grid.RowDefinitions>
    
            <Grid Grid.Row="0"
                  HorizontalOptions="FillAndExpand"
                  BackgroundColor="Maroon">
                <!--  Basic Header  -->
                <Button HorizontalOptions="Center"
                        Clicked="Button_OnClicked"
                        Text="Switch" />
            </Grid>
    
            <Grid Grid.Row="2"
                  HorizontalOptions="FillAndExpand"
                  BackgroundColor="Blue">
                <!--  Dummy Footer  -->
            </Grid>
    
    
    
            <ContentView Grid.Row="1"
                         HorizontalOptions="Center"
                         VerticalOptions="Center"
                         Content="{Binding BoundView}" />
    
        </Grid>
    
    </ContentPage>
    

  • WinterCloudWinterCloud GBMember ✭✭✭

    @lpdavies said:

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

    Yeah I suppose you could, but what happens if you add these items to your scrollview (bare in mind these take up as much room as possible, so your solution will not work)

    HEADER - 200px (this is a grid)
    LISTVIEW - This will attempt to take up as much room as possible
    BUTTON - This will attempt to take up as much room as possible

    So you have a page with a 200px header and then 50% ListView and 50% Button, unless you start setting heights on everything.

    Try think flexible as well. Stacklayout, only has two items in there, header, and page content.

    Regardless what page content you want, put them in a separate container, whatever you want scroll or swipe, no problem.

    Just .... try it, I got multi app running like this. If Stack layout does not have the performance issue. I can't see any easier way to do this.

    What if you want something at the very bottom of the page? StackLayout can't support that grid can.

    The topic is static header, if you want static header and footer, obviously you need something else like Absolute Layout, I still won't use a Grid. Too much code to write, if there are multi sections and irregular shapes of sections, then fine, I'll use a Grid.

  • seanydaseanyda GBMember ✭✭✭✭✭
    edited January 2017

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

    Yeah I suppose you could, but what happens if you add these items to your scrollview (bare in mind these take up as much room as possible, so your solution will not work)

    HEADER - 200px (this is a grid)
    LISTVIEW - This will attempt to take up as much room as possible
    BUTTON - This will attempt to take up as much room as possible

    So you have a page with a 200px header and then 50% ListView and 50% Button, unless you start setting heights on everything.

    Try think flexible as well. Stacklayout, only has two items in there, header, and page content.

    Regardless what page content you want, put them in a separate container, whatever you want scroll or swipe, no problem.

    Just .... try it, I got multi app running like this. If Stack layout does not have the performance issue. I can't see any easier way to do this.

    What if you want something at the very bottom of the page? StackLayout can't support that grid can.

    The topic is static header, if you want static header and footer, obviously you need something else like Absolute Layout, I still won't use a Grid. Too much code to write, if there are multi sections and irregular shapes of sections, then fine, I'll use a Grid.

    Too much code?
    Grid layout = new Grid
    {
    RowDefinitions = {
    new RowDefinition { Height = new GridLength(1, GridUnitType.Auto)}, // header
    new RowDefinition { Height = new GridLength(1, GridUnitType.Star)} // page
    }
    };

  • WinterCloudWinterCloud GBMember ✭✭✭

    @lpdavies said:

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @lpdavies said:

    @WinterCloud said:

    @JulienRosen said:
    if your header is in a stack layout, wouldn't it be possible to scroll the header off screen? I am assuming the OP wants the header to be frozen in place.

    Why? because you add the stack layout in the scroll view?

    can you add the scroll view in stack layout as 2nd item?

    Yeah I suppose you could, but what happens if you add these items to your scrollview (bare in mind these take up as much room as possible, so your solution will not work)

    HEADER - 200px (this is a grid)
    LISTVIEW - This will attempt to take up as much room as possible
    BUTTON - This will attempt to take up as much room as possible

    So you have a page with a 200px header and then 50% ListView and 50% Button, unless you start setting heights on everything.

    Try think flexible as well. Stacklayout, only has two items in there, header, and page content.

    Regardless what page content you want, put them in a separate container, whatever you want scroll or swipe, no problem.

    Just .... try it, I got multi app running like this. If Stack layout does not have the performance issue. I can't see any easier way to do this.

    What if you want something at the very bottom of the page? StackLayout can't support that grid can.

    The topic is static header, if you want static header and footer, obviously you need something else like Absolute Layout, I still won't use a Grid. Too much code to write, if there are multi sections and irregular shapes of sections, then fine, I'll use a Grid.

    Too much code?
    Grid layout = new Grid
    {
    RowDefinitions = {
    new RowDefinition { Height = new GridLength(1, GridUnitType.Auto)}, // header
    new RowDefinition { Height = new GridLength(1, GridUnitType.Star)} // page
    }
    };

    only personal preference. no need detailed discussion on this.

    Stacklayout:

    new stacklayout{};

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @lpdavies @AlexRutherford

    @WinterCloud said:
    if you want static header and footer, obviously you need something else like Absolute Layout,

    No... You don't. Take a second look at the code posted. Its just 3 grid rows. head, body content, footer.

    You can see it in the screen shots: Red white and blue. Red is the static header, blue is the static footer, white is the content binded to a ContentView property and changing each time I click the Switch button.

  • WinterCloudWinterCloud GBMember ✭✭✭

    @ClintStLaurent said:
    @lpdavies @AlexRutherford

    @WinterCloud said:
    if you want static header and footer, obviously you need something else like Absolute Layout,

    No... You don't. Take a second look at the code posted. Its just 3 grid rows. head, body content, footer.

    You can see it in the screen shots: Red white and blue. Red is the static header, blue is the static footer, white is the content binded to a ContentView property and changing each time I click the Switch button.

    Yes, I understand what you saying, but we were talking something else.

    Personally, I don't like Grid, especially if the goal (static header) can be achieved by just stack layout, and Ip just believes everything should be done in Grid.

  • AlexRutherfordAlexRutherford GBUniversity ✭✭

    I think you guys have gone a little off topic? The static header is used for the whole app, not for a single page (that was the original question).

    One way around the swiping issue is to create a contentpage with the header as a template and have a scroll view on the page. Using the scrollview to hold the different pages (like a tabpage). I'm going to guess doing this will cause performance issues due to having all the pages render in 1 scrollview.

    For me this kinda works due to only having buttons (custom) on each of the pages in the scrollview. When navigating from this main page I will have to reload the header using a template. I think that is the closest I can get to what I want.

    The problem I now face is Android does not have paging for scrollviews, anyway around this? I can see there is some pageviewer or something but how can I wanted this to work on both IOS and Android in a PCL.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @AlexRutherford said:
    I think you guys have gone a little off topic? The static header is used for the whole app, not for a single page (that was the original question).

    One way around the swiping issue is to create a contentpage with the header as a template and have a scroll view on the page. Using the scrollview to hold the different pages (like a tabpage). I'm going to guess doing this will cause performance issues due to having all the pages render in 1 scrollview.

    For me this kinda works due to only having buttons (custom) on each of the pages in the scrollview. When navigating from this main page I will have to reload the header using a template. I think that is the closest I can get to what I want.

    The problem I now face is Android does not have paging for scrollviews, anyway around this? I can see there is some pageviewer or something but how can I wanted this to work on both IOS and Android in a PCL.

    I don't think you'll be able to pull it off with scrollview. Try CarouselView.

Sign In or Register to comment.