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 ?
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 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/
Some Frames in Listview have sharp edges and some are round (Xamarin forms)
I have a Xamarin forms app with a list view. The horizontal row has a couple different frames (boxes with text).
The issue is some of the frames have sharp edges and others are rounded. I can't see any pattern (size of text, etc).
I tried updating the padding but it did not have any effect on this issue.
What could cause the border/edges to be different?
How can I explicitly set them?
I am testing in the Android Simulator at the moment if it matters.
Wrap your box views within a frame so that all the boxviews will have the rounded corners.
<Frame OutlineColor="Black" HasShadow="False" Padding="0" VerticalOptions="FillAndExpand">
<BoxView x:Name="boxViewSeparator" HeightRequest="15" WidthRequest="10000" BackgroundColor="Green" />
</Frame>
I had to move the listview around some.
I would like to explicitly set this property (borders).
Example of straight edges
Straight and round
Round in the middle
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.
I've got a back button in row 0, col 0 of a grid.
It places itself up at the top of the cell; I want it in the center. I tried setting VerticalAlignment="Center" and that didn't work. Neither did setting it to "Bottom":
<Button x:Name="buttonBack" VerticalAlignment="Bottom" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"></Button>
...It doesn't budge a bit. How can I pull it down a scosh?
Make sure you are not setting your row height to Auto sizing. If use Auto, the BackButtonStyle sets a bottom margin to 36 which make it appear that your button is "pinned" to the top of the row. It looks like you should be able to "move" it because with the bottom margin space, but you can't because the row is auto sized.
I placed your exact markup with the BackButtonStyle into a grid and I can position it however I want as long as I am using pixel or star sizing on my row.