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/
Related
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
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 have four rows and two columns.I need to display the background image to full grid.Please provide me solution.I had referred this creating background image in content page link:Xamarin Forms - how to add background image to a content page
.But how to set background image to grid layout.
Just add the Image to the first row and column, set ColumnSpan and RowSpan to cover your entire grid and set the Aspect to AdjustFit.
Then you add the other items you want to add to the grid.
A grid cell can hold more than just one element, however keep in mind that the last item in a cell will end up on top of the items having been added earlier.
For example:
<Grid>
<Image>
<Button>
</Grid>
The button is the last item in the order, so it will become the topmost item and be clickable. If you had the button first and the image last, the image would cover the button, which therefore would not be clickable.
You will have to do some AbsoluteLayout trickery here:
<AbsoluteLayout>
<Image AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" AbsoluteLayout.LayoutFlags="All" InputTransparent="true" Source="Your_Image" Aspect="AspectFill" />
<!--Your Grid Here-->
<Grid AbsoluteLayout.LayoutFlags="All" BackgroundColor="Transparent" AbsoluteLayout.LayoutBounds="0, 0, 1.0, 1.0" />
<AbsoluteLayout>
See to it that you place the image first in absolute layout so that it goes in the back,
and set its input transparent so it does not take any click events.
i have a issues with default margin of a button on xamarin forms. i need to take off the margin. some thought how i can make this ?? i need to use custom renderer?
I really need this to join two elements without leaving space, a label and a button.
i already try with
<Button
BackgroundColor="Fuchsia"
BorderRadius="0"
BorderWidth="0"
Text="Test"
HeightRequest="50"
WidthRequest="60"
TextColor="#333333"
x:Name="btnBack"
Margin="0"
VerticalOptions="Start"
HorizontalOptions="Start" />
but this not work for me, nothing happened.
other guys says that making a custom renderer maybe will work.
What are you using to lay out the label and the button? If StackLayout you may need to set the StackLayout Spacing property to 0 to remove the gap between the label and the button. If Grid look at RowSpacing and ColumnSpacing properties.
If you want to change margins dynamically, you would write something like this in C#
button.margin = new thickness(0,0,0,0);
This would make the margins of the button 0.
You would potentially do this for all elements with a thickness to change that issue.
So I'm playing around with Windows Phone 8, thinking about porting our iOS app over to that platform and so I have all the assets I want to work with but one thing I couldn't figure out is if theres someway to change the tint color of an image. For example in iOS I could simply just do something like [UIButton appearance] setTintColor:[UIColor redColor]] and then all the of the buttons will have a red tint over the image that I use. I'm just not sure if there's something like that for Windows Phone of if I need to update the assets for windows phone to have the exact tint color I want to use for this platform.
You could accomplish this in a few ways. One is to create a style that defines a red tint overlay for your button. In Visual Studio you create your button and right click on it (within the designer) and select Edit Template -> Edit a Copy...
When you do this you will get the default Style for a Button. Scroll down to where the Border element is which contains the ContentControl. A Border can only have one Child so you will need to wrap the ContentControl with a Grid. Under the ContentControl add another Grid and give it a Background of Red and a low Opacity so you can see through it.
Here is just the Border part of the style
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<Grid>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Grid Background="Red" Opacity=".4"></Grid>
</Grid>
</Border>
Another way (and more advanced) is to create a custom control that would allow you to set a tint color on it. This solution is very similar to the one above and would use the same style but instead of setting the background to red as above the Background would bind (using TemplateBinding) to a DependencyProperty that is on your new control (which would derive from Button).