I define a icon in Toolbaritems it show very good in Android on right but in iOS it show icon in ther Center of ther Navigation bar.
How I can put Icon on left same at Android.
Sorry for my poor English.
<ContentPage.ToolbarItems>
<ToolbarItem Text="Back" Order="Primary" IconImageSource="icon_delete_400.png" Clicked="OnBack" />
</ContentPage.ToolbarItems>
Android Show Right (Nice)
enter image description here
iOS show Center (Not good)
enter image description here
Github (Sample Source): https://github.com/westermost/Study-Xamarin
After running your project, I find the cause of your problem is the size of your image is too big(160*160) and it takes half area of the navigationBar, so it looks like stay in the center in your screenshot.
If you give a proper size of the image, it will show at the right side as your expected. I resize the image to 40* 40 and it works well.
Put toolbar item like this
<ContentPage.ToolbarItems>
<ToolbarItem Name="iconexample" Icon="icon_delete_400.png" Priority="0" Order="Primary" Clicked="OnBack" />
</ContentPage.ToolbarItems>
In ios place the image at /mipmap/icon_delete_400.png
In Android place the image at /mipmap/drawable/icon.png
Related
I am using xamarin tool kit pop up in my xamarin app iOS. It works fine in portrait mode. If I change the orientation to landscape mode while the pop up is already opened , the pop up does not show in the centre of the screen. It shows on the left corner of the screen. It works well in android but in iOS it shows on left corner on screen rotation.
Below is my pop up code.
<?xml version="1.0" encoding="utf-8" ?>
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="360,200"
IsLightDismissEnabled="False"
x:Class="Mobile.NewPopup">
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
<Label Text="Sample PopUp"/>
</StackLayout>
</xct:Popup>
I am calling like this from the button click of my page.
await App.Current.MainPage.Navigation.ShowPopupAsync(new NewPopup();
In portrait mode it is opening in the center of the screen.
enter image description here
enter image description here
How can I move this the pop up tot he center of the screen while orientation change ?
Good morning
I am using CarouselView which takes the full screen on my page. The CarouselView is set to be used only vertically:
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="0" SnapPointsType="MandatorySingle" SnapPointsAlignment="Start" />
</CarouselView.ItemsLayout>
On Android each item takes a full screen, however on iOS there is always a margin to the left. Even if I specify Margin="0" the empty space still exists.
I have read there about PeekAreaInsets property. I did specify it also to the zero like margin but the space still exists. I am using CarouselView only vertically and I always Snap into "MandatorySignle".
I added CarouselView.BackgroundColor="Blue" for visualise the problem.
Is is possible to remove the empty space ?
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 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/
I find that with xamarin.forms shell. the scrollview will automatically margin to the top,and I cannot change it.Is there any way to change it?
I have tried many solutions and searched ,but there is no one can solve it .
It seems that It will auto margin for the titlebar(actionbar).I've already hide the navigation bar.
No matter Specify the Height or the x,y position it is not work.
<ContentPage.Content>
<StackLayout>
<ScrollView>
<Image Source="a.png" VerticalOptions="StartAndExpand" />
</ScrollView>
</StackLayout>
</ContentPage.Content>
enter image description here
I want to Make the Image up to the top and do not leave white space.
The part where you have the white space is called the Safe Area
By default, Xamarin Forms does not use the safe area.
But if you want to use it any way it can be done something like this:
On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
Also, add the following using Statement using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
The same can be done via XAML something like this on your ContentPage:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.UseSafeArea="true" >
For a detailed understanding of how this works, you can check this blog by Xamarin