I have a master detail page that displays from the left. But Id also like this exact feature coming from the other side. so TWO side drawer menus.
It is possible to show the page on the other side by doing:
<MasterDetailPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:Khaled.Views.MainMenu"
Title="Title"
FlowDirection="RightToLeft"
x:Class="Khaled.Views.MainMenu.Page_MainMenu">
But this doesnt copy the page, it just shows it on the other side. I want TWO on each side (with the option to swipe it open)
Anyone got any idea on how to do that?
Like Mina Fawzy said, MasterDetailPage is obsolete as of version 5.0.0. Please use FlyoutPage instead.
You would be better to use the single side. When you set the VisualElement.FlowDirection property to RTL OR LTR, it would change the direction in which the UI elements on the page are scanned by the eye.
Left to Right:
Right to Left:
That's why we could not set both sides at the same time. But we could change the FlowDirection property at runtime through we do not suggest to do that. Changing this value at runtime causes an expensive layout process that will affect performance.
The way used to change the FlowDirection to RightToLeft.
Android:
Xaml:
<FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App1.FlyoutPage1"
FlowDirection="LeftToRight"
xmlns:pages="clr-namespace:App1">
......
</FlyoutPage>
AndroidManifest.xml:
<application android:label="App1.Android" android:theme="#style/MainTheme" android:supportsRtl="true"></application>
iOS:
For ios, refer to the link below. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/localization/right-to-left#ios
you can create icons in the top right and top left (hamburger menu)
and then control them by code.
FlowDirection --> this controls the direction of the menu
IsPresented --> flag to open or close menu by code
when you want to present the right menu
FlowDirection = "RightToLeft";
IsPresented= true;
for the left
FlowDirection = "LeftToRight";
IsPresented= true;
Recommendation
MasterDetails are deprecated use FlyoutPage
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.masterdetailpage?view=xamarin-forms
Related
I found that hiding the status bar (at least on latest iPhones) does not make much sense since the space on top is partially consumed e.g. by the camera.
Similar issue at the bottom: there is a 'swipe bar' where some space should be left for.
Hence my question: what's the correct way to leave the right amount of space for the status bar on top of the iPhone screen and the 'swipe bar' at the bottom of an iPhone screen?
Thanks in advance
Indeed, making sure that app content isn't obscured by the 'notch' or the bottom swipe area on current-generation iPhones (and some newer Android devices as well) is an important consideration.
Uno Platform handles this using the VisibleBoundsPadding behavior. You can attach this behavior to any compatible container (eg a Panel or Border) and the content of the container will be padded such that stays within the 'safe' area of the screen.
In general you should place all 'content' in your application (eg text, images, interactive elements) within the VisibleBoundsPadding area, but some visual elements eg a full-screen backdrop might go outside of it.
You can place VisibleBoundsPadding anywhere you wish in your app (including multiple locations), though generally it makes sense to place it on or near a root element. It will adjust automatically to rotations and other layout updates.
Here's a simple example:
<Page x:Class="UnoTestbed20.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UnoTestbed20"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="using:Uno.UI.Toolkit"
mc:Ignorable="d">
<Grid Background="LightBlue" toolkit:VisibleBoundsPadding.PaddingMask="All">
<Border Background="LightYellow">
<TextBlock Text="Hello, world!"
Margin="20"
FontSize="30" />
</Border>
</Grid>
</Page>
And the resulting display on an iPhone 11:
I've been trying to programmatically scroll a list (accordion) in an Ionic-Angular app and I’ve been having no success at all.
I reproduced it in this stackblitz: https://stackblitz.com/edit/stack-overflow-ionic-scroll-problem?file=src/app/home/home.page.ts
When you click on an item, it expands and I want it to align to the top of the screen (with the title visible). In this example, I am using scrollIntoView() to get it to the top but it disappears behind the toolbar.
I've tried many things to get it to align properly (including setting a "scroll-margin-top" as suggested on many posts) but this hasn't worked for me.
Also, I can't seem to be able to use the scrollBy() or scrollTo() method... they do nothing at all.
Can anybody help me figure this out and get this precise example to work? Thanks in advance!
The problem is in the property [fullscreen]="true" of the <ion-content> tag.
The property fullscreen of ion-content, according to the ionic documentation...
If true, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent.
In ionic when you use the option fullscreen as in <ion-content [fullscreen]="true"> it adds the following style to the ion-content tag:
--offset-top: 56px;
The goal of the [fullscreen]="true" is to create the effect of the content scrolling behind the header.
As a side effect, part of the <ion-content> is hidden behind the <ion-header>.
Fullscreen property and scrollIntoView()
According to w3schools...
The scrollIntoView() method scrolls the specified element into the visible area of the browser window.
So, in your code, when you call scrollIntoView() of a group it is working exactly as expected. The screen is scrolled until the top o the group is into the visible area of the browser. The problem is that the <ion-header> is covering part of the top of this visible area.
Solution:
If you remove the [fullscreen]="true" of the <ion-content>tag the scroll will work as you expect.
But you will loose the effect created by the fullscreen property (content scrolling behing the header).
References
Fullscreen property of ion-content tag:
https://ionicframework.com/docs/api/content
ScrollIntoView:
https://www.w3schools.com/JSREF/met_element_scrollintoview.asp
I understand how to create a ToolbarItem and set it's Order equal to Secondary which will give me an overflow menu like so:
But I'm not sure how I could implement such a menu in other parts of my application. For instance in the app I'm currently working on, I've removed the toolbar and created my own meaning there is no way to set the ToolbarItems property. I can add a ImageButton for the 3 dots overflow menu icon but I cannot get it to display a menu like the out of the box implementation does.
I'd also like to use this in other parts of my app (not just on the toolbar) such as on some sort of CardView.
Has anyone dealt with this problem before?
You can use Absolute layout to achieve this:
<AbsoluteLayout>
<StackLayout RowSpacing="0" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All">
<!--Main Content of the screen-->
</StackLayout>
<BoxView Color="Gray" AbsoluteLayout.LayoutBounds="1,0,250,250" AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
In the above code I have used a BoxView of Gray background for that menu toolbar to just show a demo, you can implement your view and set the width and height accordingly and make that view visible on click of icon which you will add on the toolbar.
Output:
This can be easily achieved using AbsoluteLayout in Xamarin.Forms
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/absolute-layout
https://xamgirl.com/absolutelayout-in-xamarin-made-simple/
In Xcode 5, I've opened a new project and added the following:
A Tab View Controller with two Tabs (thus two View Controllers).
In each Controller View, I've added a CollectionView, with both a Label and a Button under it.
I've applied the Default constraints. No warnings.
... clicked Run.
In the iOS simulator, the first Tab looks ok, all elements in the View are aligned to the bottom of the layout, which is the top of the tab bar. Perfect.
When clicking on the second Tab, instead of aligning to the bottom of the layout, it aligns everything to the bottom of the container. So all the elements in the View drop in height by that much. Clicking back to the first tab will now show this incorrect positioning as well.
Strangely, rotating the device fixes this... showing the correct alignments in both tabs and for both orientations.
Any idea what am I doing wrong?
Thanks,
I now believe this is a bug in XCode 5.
I got around it by replacing the constraint for a pin, like so:
Editor -> Pin -> Bottom Space to Superview.
Some Apps (like Facebook's) have buttons in the middle of the navigation section (instead of text title). How could I support right/left, and add middle button region the navigation menu, in MonoTouch?
You need to create a view or a toolbar or basically what you want that is a subclass of UIView, and add the following code.
(don't forget that you uiviewcontroller should be embedded in uinavigationcontroller)
this.NavigationItem.TitleView = YourTitleView;