We Keep Coding

Maui Community Toolkit - UniformItemsLayout - only first StackLayout showing

I am having issues getting more than one StackLayout to display in my UniformItemsLayout. I haven't changed my code since it was working, the only difference is I updated from some 1.X version to 3.1 and now only first child shows up if it is in a stacklayout.
<toolkit:UniformItemsLayout MaxColumns="2" >
<StackLayout Orientation="Vertical">
<Label Text="Test1"/>
<Button Text="TestA"/>
</StackLayout>
<StackLayout Orientation="Vertical">
<Label Text="Test2"/>
<Button Text="TestB"/>
</StackLayout>
<StackLayout Orientation="Vertical">
<Label Text="Test3"/>
<Button Text="TestC"/>
</StackLayout>
<StackLayout Orientation="Vertical">
<Label Text="Test4"/>
<Button Text="TestD"/>
</StackLayout>
<StackLayout Orientation="Vertical">
<Label Text="Test5"/>
<Button Text="TestE"/>
</StackLayout>
</toolkit:UniformItemsLayout>
When I test with just labels it seems to be fine but as soon as I add multiple stack layouts only the first one shows up.

I have created a new sample to test your code. I have tried the CommunityToolkit.Maui package from the version 1.0.0 to the version 3.1.0. None of the versions can show all the stacklayout in the UniformItemsLayout on the android.
And on the windows, it will show all the stacklayouts but the UI seems strange. But if you delete the StackLayout, all the controls will show. Such as:
<toolkit:UniformItemsLayout MaxColumns="2" >
<Label Text="Test1"/>
<Button Text="TestA"/>
<Label Text="Test2"/>
<Button Text="TestB"/>
<Label Text="Test3"/>
<Button Text="TestC"/>
<Label Text="Test4"/>
<Button Text="TestD"/>
<Label Text="Test5"/>
<Button Text="TestE"/>
</toolkit:UniformItemsLayout>
It should a bug on the android. You can reported it on the github.

Can you surround content with a custom view

I have a bunch of code in a page that I would like to make reusable across multiple pages
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<SwipeView x:Name="MainSwipeView" BackgroundColor="Transparent"
SwipeStarted="SwipeStarted" SwipeEnded="SwipeEnded" VerticalOptions="FillAndExpand">
<SwipeView.LeftItems>
</SwipeView.LeftItems>
<Grid x:Name="swipeContent">
Where I want the rest of the content to be
(This means this would surround the content, similar to <ContentPresenter/> in a ControlTemplate)
</Grid>
</SwipeView>
<StackLayout HeightRequest="50" BackgroundColor="Red">
<Label> Where the Augnito Button will be </Label>
</StackLayout>
</StackLayout>
I wanted to put this in a reusable component so I could use it in other pages as follows:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
.
.
.
.>
<MyReusableComponent>
<StackLayout>
This is where the regular contents of a page would go
</StackLayout>
</MyReusableComponent>
</ContentPage>
I don't think I can use a ControlTemplate because my custom view has code behind it in a xaml.cs file to make it work, so is there another way to do this?

Xamarin.Forms HorizontalTextAlignment not working on iOS

Here is the issue I've been busting my head over for the better part of a day - I've got a very simple page that is comprised of a StackLayout with two elements inside it - an SVG image(FFImageLoading.Svg.Forms) and a Label. The Label needs to have its text aligned to the right - that's just how the design is. On Android I have no issue - HorizontalTextAlignment="End" works right away. On iOS however, it does not. The text is there, the space is there - I've checked by setting the BackgroundColor of the Label - but the text is not aligned to the right. Here are some code snippets below of the XAML:
<StackLayout Spacing="0"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
Margin="50">
<svgImageLib:SvgCachedImage x:Name="Logo"
Source="logo.svg"
VerticalOptions="Start"
HorizontalOptions="EndAndExpand"
AutomationId="Login"
WidthRequest="160" />
<Label VerticalOptions="EndAndExpand"
HorizontalOptions="End"
HorizontalTextAlignment="End"
LineBreakMode="WordWrap">
<Label.FormattedText>
<FormattedString>
<Span Text="SOME VERY BIG APPLICATION TEXT"
FontAttributes="Bold"
TextColor="White">
<Span.LineHeight>
<OnPlatform Android="2.4"
iOS="0.8" />
</Span.LineHeight>
<Span.FontSize>
<OnPlatform Android="45"
iOS="40" />
</Span.FontSize>
</Span>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
Again, this works fine on Android, on iOS it fails. I have not tested on an actual device - only in the Simulator. I'm open to suggestions if anybody has any idea why this is not working only on iOS. Also, if it matters, Center also does not work there.

Custom layout, Xamarin forms. Best approach

I'm new to Xamarin.Forms and Xaml and this. I have made a custom control i would like to utilize as a custom background throughout my app. The custom control is made as a contentview and looks like this.
<ContentView.Content>
<ScrollView>
<StackLayout>
<RelativeLayout Padding="0" BackgroundColor="Teal" VerticalOptions="Start">
<Image Source="TopBG" BackgroundColor="Purple" Aspect="Fill" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.6}" />
</RelativeLayout>
<Frame Padding="0" Margin="0,-25,0,0" CornerRadius="25" BackgroundColor="{StaticResource Key=Charcoal}">
<StackLayout Margin="0,0,0,0" VerticalOptions="StartAndExpand" BackgroundColor="Transparent" x:Name="InnerStack">
<!--I can insert custom controls here, but htat would determine this custom contentView for one purpose only-->
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</ContentView.Content>
The custom control is then implemented on my ContentPage as such:
<ContentPage.Content>
<CustomLayouts:ContentBackground>
<!-- I would instead like to be able to add content here, and have it go into the stacklayout of the custom view.
This way i could utilize the same background but have different content go into it depending on my wishes -->
</CustomLayouts:ContentBackground>
</ContentPage.Content>
If i add a label inside that later example it just overrides everything and places a label, but not as intended inside the designated inner stackview of my ContentBackground.
The only thing i can think of is figuring some way of accesing the InnerStackView of my custom contentBackground, then accesing the children property of that Stacklayout and then Children.add(View) to that stack layout. Allthough this means i will have to do it from code and i would like to achieve this behaviour in XAML since that is more familiar to me.
Is this the only way or is there an alternative to achieve my goal in XAML?

Try use ContentProperty.Simple example:
[ContentProperty("AddContent")]
public class YourView: ContentView
{
protected ContentView ContentContainer;
public View AddContent
{
get => ContentContainer.Content;
set => ContentContainer.Content = value;
}
......
}
//in xaml
<YourView>
<Label Text="Hello world"/>
</YourView>

In case someone still trying this, you can use ControlTemplate to have a view on multiple pages or app wide,
<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.App">
<Application.Resources>
<ResourceDictionary>
<ControlTemplate x:Key="TealTemplate">
<Grid>
...
<BoxView ... />
<Label Text="Control Template Demo App"
TextColor="White"
VerticalOptions="Center" ... />
<ContentPresenter ... />
<BoxView Color="Teal" ... />
<Label Text="(c) Xamarin 2016"
TextColor="White"
VerticalOptions="Center" ... />
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="AquaTemplate">
...
</ControlTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>
The magic here is the ContentPresenter, you can place anything inside it will appear just fine. Then to use the desired template, set it for your ContentView.ControlTemplate like so,
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SimpleTheme.HomePage">
<ContentView x:Name="contentView" Padding="0,20,0,0"
ControlTemplate="{StaticResource TealTemplate}">
<StackLayout VerticalOptions="CenterAndExpand">
<Label Text="Welcome to the app!" HorizontalOptions="Center" />
<Button Text="Change Theme" Clicked="OnButtonClicked" />
</StackLayout>
</ContentView>
</ContentPage>
Checkout the official docs here.
If you want to create a custom control/layout that you can insert on any page, then you can create your own ContentView with ContentPresenter that will hold your views children,
<!-- Content -->
<ContentPresenter Content="{Binding SomeContent}"/>
where SomeContent can be a BindableProperty of type View.
You can also see an example of custom layouts here.

Xamarin forms Entry borders not expanding on some iOS devices

I'm having an issue (particularly on iOS devices such as iPhone 6s, 7, Ipad Pro etc) where my entry field under border are not expanding horizontally to the end of the page.
Full Code
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Image Source="Logo.png" VerticalOptions="EndAndExpand"/>
<Label Text="Welcome" HorizontalTextAlignment="Center" HorizontalOptions="Center" FontSize="Large" />
<Label Text="I don't have an account - Register" freshEssentials:TappedGestureAttached.Command="{Binding GoToRegisterPageCommand}" TextColor="Accent" FontSize="Medium" HorizontalOptions="Center"/>
<StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
<Entry x:Name="EmailEntry" Text="{Binding Email}" Placeholder="Email" Keyboard="Email">
<Entry.Behaviors>
<behaviours:EmailValidatorBehaviour IsValid="{Binding IsEmailValid, Mode=OneWayToSource}"/>
</Entry.Behaviors>
</Entry>
<Entry x:Name="PasswordEntry" Text="{Binding Password}" Placeholder="Password" IsPassword="True" />
<Label Text="{Binding InstructionText}" HorizontalTextAlignment="Center" FontSize="Large" />
</StackLayout>
<Button Text="Login" Command="{Binding LoginCommand}" VerticalOptions="End"/>
</StackLayout>
The same code displays fine on iPhone 5-5s and all Android devices.
Any ideas? i've tried fiddling with 'fillandexpand' etc on the entrys but nothing seems to be working.
My Xamarin version is 2.3.1.114 (i tried upgrading but was left with an unbuildable project with XAMC errors. can try again if that's what people suggest)
Possibly an issue in the iOS entry renderer?
I've noticed my other entry views also have the same error.
Not extending borders
More broken borders

I ended up finding the problem!
Someone in the project had created a custom renderer for all entrys that I was not aware of, and calculating the Frame width incorrectly.