I cannot get both platforms to exhibit the same behaviour
I want to show multiple items on screen at the same time
iOS appears to allow PeekAreaInserts to work like Margin, in that you can specify top, right, bottom, and left
Android only seems to acknowledge one value
This means as soon as I set a PeekAreaInsert value, the Android view renders itself with the first item in the middle of the page, whereas the iOS view can utilise this value but still be aligned to the left of the page
Is there a way to achieve consistent look and feel by having Android align with the start, or left, of the view when using the PeekAreaInserts value?
The following example left aligns a carousel view on iOS but the same code on Android centers the first item always
<CarouselView.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="5, 0, 0, 0" />
<On Platform="Android" Value="0, 0, 0, 0" />
</OnPlatform>
</CarouselView.Margin>
<CarouselView.PeekAreaInsets>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0, 0, 200, 0" />
<On Platform="Android" Value="200,0,0,0" />
</OnPlatform>
</CarouselView.PeekAreaInsets>
Cause: We have a different behavior when using PeekAreaInsets on Android and iOS.
In iOS we always position each element in the center. For that reason, we leave space to the left of the first element or to the right of the last in some cases.
In Android, PeekAreaInsets is not adding that space to the beginning or the end.
Workaround: If you do want to achieve the same effect on iOS and Android , you would better use CollectionView with Snap options (set it as Start) .
Related
is it possible to round the corners of the XCT popup?
I tried to set the BackgroundColor to transparent, and to set the body in a frame with the option CornerRadius - but this does not work as desired.
Does anyone have a tip on how to round the corners?
<xct:Popup xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="CashTracker.Views.ImagePopup"
xmlns:viewmodels="clr-namespace:CashTracker.ViewModels"
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,400"
BackgroundColor="Transparent">
<Frame CornerRadius="20" HasShadow="True">
<StackLayout>
<Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
<Image x:Name="PopupImageSource"/>
</StackLayout>
</Frame>
</xct:Popup>
Xamarin XCT Popup
The popup should look like this - only without the white corners.
Xamarin Popup Frame
Somehow BackgroundColor was not working for Popup. Hence use the Color propperty for setting color of the Popup.
If you are using Frame in your layout, you can use Frame's CornerRadius for rounded corners (only if you are using Frame).
If you are not using Frame then you can use Xamarin Community Toolkit's CornerRadiusEffect.CornerRadius to set CornerRadius for any Layout, View or Control.
Hence for your question, it can be done by setting Popup's color as Transparent and your content's parent element must have property for corner radius and must have BackgroundColor set to White or any other Color as your Popup`s color is Transparent.
Here's the XAML
<xct:Popup ...
xmlns:xct="clr-namespace:Xamarin.CommunityToolkit.UI.Views;assembly=Xamarin.CommunityToolkit"
Size="300,400"
Color="Transparent">
<Frame CornerRadius="20" HasShadow="True">
<StackLayout>
<Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
//OR, if you don't need Frame then,
<StackLayout BackgroundColor="White" xct:CornerRadiusEffect.CornerRadius="10">
<Label Text="Aufgenommenes Foto" FontSize="Medium" HorizontalOptions="Center"/>
</StackLayout>
</xct:Popup>
There are lot of bugs in Xamarin Community Toolkit controls and views, we need to have some work-around for every control. Be it XCT's Popup, TabView, or extensions such as CornerRadius, ShadowEffect, TouchEffects, NativeAnimations, etc. The Community can't provide a single control without any bugs. But still, there are lots of useful features in XCT, hence we can only hope that the bugs are fixed, although the focus of fixing bugs if moved on to MAUI's Community Toolkit, until then we can use some work-arounds till stable and useful version of MAUI is released (considering its current status while writing this answer).
I'm using "Sharpnado Tabs" and having problem in firing tap event in middle "BottomTabItems".
I have 5 bottom tabs as you can see the attached photo and the areas outlined with black is firing tap event and changing the views accordingly. However, the areas marked with white, is not doing anything.
EDIT
The 5 tabs are spread evenly across the bottom panel. I have set the middle tabs' background to red to see the area they cover and where the touch is working. Setting InputTransparent="true" removes the touch event from the whole area of the tab.
<sho:ViewSwitcher x:Name="Switcher"
Grid.Row="0"
Grid.RowSpan="3"
Animate="False"
SelectedIndex="{Binding SelectedViewModelIndex}">
<sho:LazyView x:TypeArguments="pages:ProfilePage" BindingContext="{Binding ProfilePageViewModel}" />
</sho:ViewSwitcher>
<Image Source="navigationbackground.png" Grid.Row="3" TranslationY="5" />
<sho:TabHostView x:Name="TabHostLogo"
Grid.Row="3"
WidthRequest="200"
HeightRequest="60"
Margin="0"
Padding="0,20,0,0"
HorizontalOptions="Fill"
VerticalOptions="Start"
BackgroundColor="Transparent"
IsSegmented="False"
Orientation="Horizontal"
TabType="Fixed"
SelectedTabIndexChanged="TabHostLogo_SelectedTabIndexChanged"
SelectedIndex="{Binding Source={x:Reference Switcher}, Path=SelectedIndex, Mode=TwoWay}">
<sho:TabHostView.Tabs>
<sho:BottomTabItem IconImageSource="homeiconselected.png" IconSize="20" />
<sho:BottomTabItem IconImageSource="profileicon.png" IconSize="20"/>
<sho:TabButton x:Name="TabButton"
IsVisible="True"
ButtonBackgroundColor="Transparent"
ButtonCircleSize="40"
CornerRadius="40"
IconImageSource="navigationaddbutton.png"
TapCommand="{Binding ProfileViewCommand}"
Scale="2.5"
Margin="0,0,0,15"
TranslationY="-20" />
<sho:BottomTabItem IconImageSource="chaticon.png" IconSize="20"/>
<sho:BottomTabItem IconImageSource="moreicon.png" IconSize="20"/>
</sho:TabHostView.Tabs>
</sho:TabHostView>
The problem is caused by Scale attribute. Unfortunately, that scales the entire tab area, not just the circle button. At Scale=2, half of each of the surrounding buttons are blocked by an invisible expanded tab rectangle (that surrounds the middle tab button).
As you discovered, at Scale=2.5, more than half of the surrounding tabs are invisibly blocked.
I did not find any way to work around this bug. (Other than not using Scale - but then the button is either too small or not a circle, depending on values you use for ButtonCircleSize and CornerRadius.)
I recommend raising this as an issue at github Sharpnado.Tabs issue.
If you do, include a link in that issue to this SO Q&A. And add a link to bottom of your question to that issue - so people can track progress.
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 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
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