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.
Related
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...
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've been developing a game. As such, I need to be able to display information that are group accordingly. I've been using a menu system that allows me to utilize 1 form to display different bits of grouped information using the panel control. Using a timer on the form, it automatically changes in size depending on just how much information is displayed, using the currently visible panel as a guide for dimensions.
I have the form's screen position behavior set to Center Screen. This works great.
However, there is a problem. The form is only truly centered when it is the size of the biggest panel - the log in screen - is active, being that it is the first menu a user sees.
My question is, using code, could I get the form to be re-centered during runtime? If so, how would I go about doing so?
You can call the method Form.CenterToScreen
or follow this answer!
StartPosition is set to CenterPosition but my form is not centered
So I have made an app and set the layout so it appears ok in portrait mode. For the snapped view I created a ListView that contains different instances of the same objects. This ListView is initially collapsed and then when it changes to snapped the listview becomes visible and the portrait mode objects become collapsed.
This works fine, but as they are two different sets of objects it messes up the user experience. If they enter text into the boxes in portrait mode and then switch to snapped view all of their text will have gone (as they put it in the now collapsed text box).
The question is is it possible to just change the position / size of the elements so that they are the same objects just in a different place, depending on if we're in snapped mode or not?
Hope this is clear. Thanks.
Yes, in fact, that functionality is built-in to the LayoutAwarePage class, which is the type of Page you get when you add a Basic Page (vs. Blank Page) to your project. If you started with the Grid or Split App template, the provided pages likewise extend LayoutAwarePage.
These pages have some boilerplate XAML that leverages the VisualStateManager and defines states for the various application layouts. What you can do is design your layout for the full landscape mode and then use the Device window to record changes to your layout (placement, colors, etc.) for Snapped, Filled, and Portrait.
For instance, here's a simple UI in landscape mode:
Then by switching Visual state to Snapped and turning on Enable State Recording, I made changes to the layout:
At runtime, the app looks like the following in each of the two states. No code needed - it's all being handled by LayoutAwarePage switching between VisualStates as the orientation of the app changes.