my goal is get page like from image. controlView in top and in the bottom and i the middle tabbed page.
a image link
Do you have any idea how to do this?
I don't think you can achieve anything like that with the out of the box TabbedPage, as the tabs can only be placed on the bottom of the screen (can't add extra content view between tabs and the edge of the screen).
I would suggest to try the Sharpnado so called "pure" tabs. You can read more about these in here https://www.sharpnado.com/pure-xamarin-forms-tabs/. They also have a test app, that shows the capabilities of the Sharpnado.Presentation.Forms nuget.
EDIT: The above nuget also has a CarouselView layout available. Read more...
Related
In the page of Microsoft, I see the type of menu like the image. Please I want to know how to do pivot menu like this.
I want to make a pivot menu like this image in bottom of page.
There's an issue open for this in the UWP Community Toolkit to provide a style for this type of tab.
I have a branch here with some initial work. Here's my current work on that style.
To get them on the bottom though, you'll need to modify the default pivot style and move the ItemsPresenter above the PivotHeaderPanel in the PivotLayoutElement Grid.
I am facing a strange problem in my UWP application, I have a hamburger button and a text block(the page name) on the top of the main page. At the bottom I have the Split View with a pane and content. The pane showing the navigation buttons and the content with a frame.
Here's the screen-shot of the Application
Now as the frame navigates to the home page, I face a strange problem. The "top" command bar goes at the top of the application (strangely at the place of the title text block on the main page) well I don't have any problem with that as I can adjust its width and make it transparent to show the title and make the hamburger button work, but the actual problem that I am facing is that it leaves a strange empty space on the page top(home page) for no reason, I have tried various ways but I can't seem to fix it. I am adding some pictures of the running application and code, any help will be greatly appreciated :)
Here's the code of the home page
Typically Page.TopAppBar and Page.BottomAppBar is used in the outer page because they will be paced in Top/Bottom of App, not on Page. So you can use CommandBar inside your grid of the inner page.
<Grid>
<CommandBar>
</CommandBar>
</Grid>
In my app i have a SplitView and set the content as Frame for each page. Each page contains its own CommandBar. This works without issue. Now i am creating VisualStates for a mobile view. In it i want to hide the PlitView in the closed state (inline). But now i need a way to add only the "HamburgerButton" (in my case a RadioButton), on the top, for opening the inline SplitView. I have done it also, but the "HamburgerButton" is overlapping each pages Text on the CommandBar. So what is the best solution, create only one CommandBar on the MainPage (where my SplitView is) and bind the content, or create a CommandBar for each Page?
Best regards
I think creating one CommandBar in the MainPage and binding the content may requires more work. Don't forget that you may need to bind the Primary and Secondary Buttons too.
If you want to use a CommandBar in each page and one HamburgerMenu in MainPage, you can try this method.
Create a separate top Row in the Grid for the CommandBar to occupy.
Horizontally stack a transparent Rectangle of width equal to your "HamburgerButton" along with the CommandBar and place it in the above created row.
Create VisualStates to trigger on Phone and set the visibility of the Rectangle accordingly to shift the CommandBar to the right.
Check out Template10 PageHeader Control (Search for "VisualStateNarrow" and "Spacer" in particular). If you are not particular about developing these boilerplate code yourselves, check out Template10. It has many helpful controls developed by the community. Please pardon me if you already knew about this.
You can creat the Page TOP bar and in MainPage use the splitview.
I have implemented a MasterDetailPage with Xamarin Forms. Currently on Windows tablet only.
I see that there is the ToolbarItems that we can add ToolbarItems to. But this disappears and only displays as a popup type slidey piece. What I would like is for the toolbar or stack panel to display at the bottom of the MasterDetailPage all the time.
So the MasterDetailPage.Master(Red) stays put as well as the Toolbar/Other Component(Green)
When you select an item in the red it would load the MasterDetailPage.Detail(Blue) as usual.
The important thing is getting the Green Toolbar/other component to display at the bottom all the time.
Is this possible or do I just need to scrap the MasterDetails and use Stackpanels/grid?
I could get the green bar across the blue but really want it across red and blue sections as in the image provided.
Seeing as using a master page was appropriate for the dashboard view. I chose to add a StackLayout(User Control) at the bottom of the master view and also the Master Details pages.
It was a bit more duplication but only one line if using a user control.
This gave the illusion that the bar ran across the bottom, when in actual fact it was 2 bars one for the master and one on each of the detail pages.
Just a quick reminder. That's what a Panorama look like. All the pages except the last one display a part of the next page.
This is what a Pivot look like. All the pages are "fullscreen"
I would like to create a control that would be a mix between the Pivot and the Panorama control. Here is what I would like to have:
The middle page would be fullscreen, the left and the right page would contain a part of the middle page. But I don't know how to do it. I tried both Panorama and Pivot with some fiddling of the pages margins but without success. Do you know how to do it?
Thanks :)
I just found an answer by digging a lot on the web: http://sviluppomobile.blogspot.fr/2013/08/add-lateral-menus-to-windows-phone.html
This answer suggests to make your own Panorama / Pivot with a canvas and to move left/right the pages with a storyboard.
Hope it can help someone else!
Here's a blog posts that details a behavior based solution:
http://dotnetbyexample.blogspot.nl/2013/09/a-behavior-to-implement-scroll-into.html
And a second that directly references the Facebook UI, and shows how to implement the proper gestures for the dragging and snapping:
http://depblog.weblogs.us/2013/07/30/facebook-like-settings-pane-with-gestures-windows-phone/