Xamarin.Forms - Informative app layout suggestions / directions
I am totally fresh to mobile developments and I would appreciate any guideline here. I am doing a simple informative application (texts, images, web links) for Android and iOS, that would look like presented on this image:
Preferred app layout example
Explanation: Top bar with 4 buttons is always there. Buttons 1-3 are switching between 3 standalone pages, where 2 and 3 are simple (maybe with vertical scrolling), but page 1 has fixed header and a few horizontal sliding pages underneath. Button 4 implements a calling function to predefined number, no content.
What I did: After researching for a while I tried to do this the most simple and straightforward way possible. My main page (ContentPage) has buttons in Grid and <ContentView x:Name="PageHolder">) under them. On clicking buttons 1-3 I set PageHolder.Content to desired page (PageHolder.Content = new B2Page().Content), all 3 of them are also ContentPages. In page B1 I use to combine fixead header elements with CarouselView (Xamarin.Forms.CarouselView 2.3.0-pre2), that enables horizontal sliding.
What I don't like: I created sliding pages in CarouselView using <CarouselView.ItemTemplate><DataTemplate> but I would like to have 5 pages with different layout here. I don't know how to achieve that. I also noticed too big heap usage when clicking buttons (I added pictures to each content page for testing), resulting in OOM exception, probably because new BxPage() is called many times. I tried to initialize all 3 pages once under main page but got same results so I'm not sure where this comes from.
I know this is quite long and maybe even a bit messy question but any answer or maybe just pointing into right direction (design-wise) would be greatly appreciated.
xamarin.forms xamarin.ios xamarin.android
asked Nov 14 '18 at 23:05
icperoicpero
1
add a comment |
I am totally fresh to mobile developments and I would appreciate any guideline here. I am doing a simple informative application (texts, images, web links) for Android and iOS, that would look like presented on this image:
Preferred app layout example
Explanation: Top bar with 4 buttons is always there. Buttons 1-3 are switching between 3 standalone pages, where 2 and 3 are simple (maybe with vertical scrolling), but page 1 has fixed header and a few horizontal sliding pages underneath. Button 4 implements a calling function to predefined number, no content.
What I did: After researching for a while I tried to do this the most simple and straightforward way possible. My main page (ContentPage) has buttons in Grid and <ContentView x:Name="PageHolder">) under them. On clicking buttons 1-3 I set PageHolder.Content to desired page (PageHolder.Content = new B2Page().Content), all 3 of them are also ContentPages. In page B1 I use to combine fixead header elements with CarouselView (Xamarin.Forms.CarouselView 2.3.0-pre2), that enables horizontal sliding.
What I don't like: I created sliding pages in CarouselView using <CarouselView.ItemTemplate><DataTemplate> but I would like to have 5 pages with different layout here. I don't know how to achieve that. I also noticed too big heap usage when clicking buttons (I added pictures to each content page for testing), resulting in OOM exception, probably because new BxPage() is called many times. I tried to initialize all 3 pages once under main page but got same results so I'm not sure where this comes from.
I know this is quite long and maybe even a bit messy question but any answer or maybe just pointing into right direction (design-wise) would be greatly appreciated.
xamarin.forms xamarin.ios xamarin.android
asked Nov 14 '18 at 23:05
icperoicpero
1
add a comment |
I am totally fresh to mobile developments and I would appreciate any guideline here. I am doing a simple informative application (texts, images, web links) for Android and iOS, that would look like presented on this image:
Preferred app layout example
Explanation: Top bar with 4 buttons is always there. Buttons 1-3 are switching between 3 standalone pages, where 2 and 3 are simple (maybe with vertical scrolling), but page 1 has fixed header and a few horizontal sliding pages underneath. Button 4 implements a calling function to predefined number, no content.
What I did: After researching for a while I tried to do this the most simple and straightforward way possible. My main page (ContentPage) has buttons in Grid and <ContentView x:Name="PageHolder">) under them. On clicking buttons 1-3 I set PageHolder.Content to desired page (PageHolder.Content = new B2Page().Content), all 3 of them are also ContentPages. In page B1 I use to combine fixead header elements with CarouselView (Xamarin.Forms.CarouselView 2.3.0-pre2), that enables horizontal sliding.
What I don't like: I created sliding pages in CarouselView using <CarouselView.ItemTemplate><DataTemplate> but I would like to have 5 pages with different layout here. I don't know how to achieve that. I also noticed too big heap usage when clicking buttons (I added pictures to each content page for testing), resulting in OOM exception, probably because new BxPage() is called many times. I tried to initialize all 3 pages once under main page but got same results so I'm not sure where this comes from.
I know this is quite long and maybe even a bit messy question but any answer or maybe just pointing into right direction (design-wise) would be greatly appreciated.
xamarin.forms xamarin.ios xamarin.android
asked Nov 14 '18 at 23:05
icperoicpero
1
I am totally fresh to mobile developments and I would appreciate any guideline here. I am doing a simple informative application (texts, images, web links) for Android and iOS, that would look like presented on this image:
Preferred app layout example
Explanation: Top bar with 4 buttons is always there. Buttons 1-3 are switching between 3 standalone pages, where 2 and 3 are simple (maybe with vertical scrolling), but page 1 has fixed header and a few horizontal sliding pages underneath. Button 4 implements a calling function to predefined number, no content.
What I did: After researching for a while I tried to do this the most simple and straightforward way possible. My main page (ContentPage) has buttons in Grid and <ContentView x:Name="PageHolder">) under them. On clicking buttons 1-3 I set PageHolder.Content to desired page (PageHolder.Content = new B2Page().Content), all 3 of them are also ContentPages. In page B1 I use to combine fixead header elements with CarouselView (Xamarin.Forms.CarouselView 2.3.0-pre2), that enables horizontal sliding.
What I don't like: I created sliding pages in CarouselView using <CarouselView.ItemTemplate><DataTemplate> but I would like to have 5 pages with different layout here. I don't know how to achieve that. I also noticed too big heap usage when clicking buttons (I added pictures to each content page for testing), resulting in OOM exception, probably because new BxPage() is called many times. I tried to initialize all 3 pages once under main page but got same results so I'm not sure where this comes from.
I know this is quite long and maybe even a bit messy question but any answer or maybe just pointing into right direction (design-wise) would be greatly appreciated.
xamarin.forms xamarin.ios xamarin.android
xamarin.forms xamarin.ios xamarin.android
asked Nov 14 '18 at 23:05
icperoicpero
1
asked Nov 14 '18 at 23:05
icperoicpero
1
asked Nov 14 '18 at 23:05
icperoicpero
1
asked Nov 14 '18 at 23:05
icperoicpero
1
asked Nov 14 '18 at 23:05
icperoicpero
1
1
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
page 1 has fixed header and a few horizontal sliding pages underneath. I would like to have 5 pages with different layout here.
You could try using Xamarin.Forms TabbedPage, it consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.
where 2 and 3 are simple (maybe with vertical scrolling), button 4 implements a calling function to predefined number, no content.
You could use Button 2,Button3 and Button 4 as ToolbarItem. When you click the ToolbarItem, you can open page or execute the some function.
Here is an example about how to use ToolbarItem.
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310071%2fxamarin-forms-informative-app-layout-suggestions-directions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
page 1 has fixed header and a few horizontal sliding pages underneath. I would like to have 5 pages with different layout here.
You could try using Xamarin.Forms TabbedPage, it consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.
where 2 and 3 are simple (maybe with vertical scrolling), button 4 implements a calling function to predefined number, no content.
You could use Button 2,Button3 and Button 4 as ToolbarItem. When you click the ToolbarItem, you can open page or execute the some function.
Here is an example about how to use ToolbarItem.
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
add a comment |
page 1 has fixed header and a few horizontal sliding pages underneath. I would like to have 5 pages with different layout here.
You could try using Xamarin.Forms TabbedPage, it consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.
where 2 and 3 are simple (maybe with vertical scrolling), button 4 implements a calling function to predefined number, no content.
You could use Button 2,Button3 and Button 4 as ToolbarItem. When you click the ToolbarItem, you can open page or execute the some function.
Here is an example about how to use ToolbarItem.
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
add a comment |
page 1 has fixed header and a few horizontal sliding pages underneath. I would like to have 5 pages with different layout here.
You could try using Xamarin.Forms TabbedPage, it consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.
where 2 and 3 are simple (maybe with vertical scrolling), button 4 implements a calling function to predefined number, no content.
You could use Button 2,Button3 and Button 4 as ToolbarItem. When you click the ToolbarItem, you can open page or execute the some function.
Here is an example about how to use ToolbarItem.
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
page 1 has fixed header and a few horizontal sliding pages underneath. I would like to have 5 pages with different layout here.
You could try using Xamarin.Forms TabbedPage, it consists of a list of tabs and a larger detail area, with each tab loading content into the detail area.
where 2 and 3 are simple (maybe with vertical scrolling), button 4 implements a calling function to predefined number, no content.
You could use Button 2,Button3 and Button 4 as ToolbarItem. When you click the ToolbarItem, you can open page or execute the some function.
Here is an example about how to use ToolbarItem.
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
answered Nov 16 '18 at 6:00
York ShenYork Shen
6,9211325
6,9211325
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53310071%2fxamarin-forms-informative-app-layout-suggestions-directions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
