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.

.NET MAUI 7 - Button in AbsoluteLayout not working in Android

As shown below, I created a button in the lower right corner with an absolute layout. The thing is, it doesn't work on Android. It shows up but instead presses the recipe below. On Windows App everything is working as expected.
Here is the code:
<FlexLayout>
<RefreshView IsRefreshing="{Binding IsRefreshing}" Command="{Binding RefreshRecipes}">
<CollectionView >
...
</CollectionView>
</RefreshView>
<AbsoluteLayout MaximumWidthRequest="0" >
<Button AbsoluteLayout.LayoutBounds="1, 1, 100, 100"
AbsoluteLayout.LayoutFlags="PositionProportional"
Text="+"
Command="{Binding AddRecipeCommand}"
FontSize="Large"
BackgroundColor="DodgerBlue"
TextColor="White"
CornerRadius="25"
HeightRequest="50"
WidthRequest="50"
ZIndex="100"/>
</AbsoluteLayout>
</FlexLayout>
I'm aware the MaximumWidthRequest="0" might cause a problem, but I don't know what else to do.

Change the FlexLayout to a Grid. Then you delete the AbsoluteLayout and set the VerticalOptions and the HorizontalOptions to End.
That is the way how I do it.
If this doesn't work, you have to show your xaml.cs code and the ViewModel code.

Flex Layout in Xamarin

I user flex in my every project on html and css.
I find in XAML <flexlayout work same kind of so I try
<ContentPage.Content>
<StackLayout>
<FlexLayout>
<FlexLayout>
<Label Text="It don't work"></Label>
</FlexLayout>
<Label Text="Is it work"></Label>
</FlexLayout>
</StackLayout>
</ContentPage.Content>
which don't show any flex inside flex so nothing in it but i can see it work stuff. What is i am doing wrong here kind of still new in xarmarin/xaml
Microsoft doc are kind of basic also https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout

I find one thread at github to discuss about nested FlexLayout is not visible:
https://github.com/xamarin/Xamarin.Forms/issues/9537.
I also find one workaround that you can place your child flex layout inside it will work:
<StackLayout>
<FlexLayout>
<StackLayout WidthRequest="100">
<FlexLayout>
<Label Text="It don't work" />
</FlexLayout>
</StackLayout>
<Label FlexLayout.AlignSelf="Center" Text="Is it work" />
</FlexLayout>
</StackLayout>

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.

Xamarin (XAML) how to place 2 labels side by side

I have 2 labels that need to use different fonts to make single label this
"My Company (c)" (copywrite symbol). "My Company " will be a Large font and the '(c)' a small font. I can't get them to appear as 1 single label. There seems to be spacing issues. I have tried the following.
<StackLayout Grid.Row="1" Orientation="Horizontal">
<Label
x:Name="lbCo"
Text="My Company"
Style="{DynamicResource LargeLabel}"/>
<Label
x:Name="lbcopywrite"
Text="©"
Margin="0,-7,0,0"
Style="{DynamicResource SmallLabel}"/>
</StackLayout>
But it appears like "My Company (spaces) (c)"
Any ideas how can make it look like "My Company(c)", always on the same line and together?

There is another way, but you can't assign a Style directly to the text, but you can choose numerous font options. You can still set a Style to the main label though.
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="Company" FontAttributes="Bold"/>
<Span Text=" ©" FontSize="Micro" />
</FormattedString>
</Label.FormattedText>
</Label>
If you want binding, you need to create a Converter, that returns a FormattedString, and assign to FormattedText. You could create a Converter with Parameters if you want to reuse it, with different styles.
<Label FormattedText="{Binding Text, Converter={StaticResource FormattedStringConverter}}" />

You can specify the Spacing property on the StackLayout:
<StackLayout Grid.Row="1" Orientation="Horizontal" Spacing="0">
<Label x:Name="lbCo"
Text="My Company"
Style="{DynamicResource LargeLabel}"/>
<Label x:Name="lbcopywrite"
Text="©"
Margin="0,-7,0,0"
Style="{DynamicResource SmallLabel}"/>
</StackLayout>
By default, the value is 6.

You should use the VerticalTextAlignment property and set it to center. You should also set the label margin to 0 for both.
<StackLayout Grid.Row="1" Orientation="Horizontal">
<Label
x:Name="lbCo"
Text="My Company"
VerticalTextAlignment="Center"
Style="{DynamicResource LargeLabel}"/>
<Label
x:Name="lbcopywrite"
Text="©"
VerticalTextAlignment="Center"
Style="{DynamicResource SmallLabel}"/>
</StackLayout>