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.
Related
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>
I am trying to make my Stacklayout's background rounded (only right and left bottom sides). I looked for how to search but couldn't make sure. How can I do it?
You can use Xamarin.Forms.PancakeView package:
1- Install it in your shared as in your platform projects (latest version require Xamarin.Forms 4.8.0.1451 and upper).
2- Include the namespace for that package in your xaml:
xmlns:pancake="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
3- Create a PancakeView which will host your controls inside:
<pancake:PancakeView Padding="10"
BackgroundColor="Blue"
CornerRadius="0,0,40,40">
<StackLayout Padding="0"
HorizontalOptions="FillAndExpand">
<Label Text="hello World"
FontSize="Medium"
TextColor="White"
HorizontalOptions="Center"/>
<Button Text="More Details"/>
</StackLayout>
</pancake:PancakeView>
you can play on it shape with the CornerRadius propety.
Edit:
Just wanted to show the usage of Gradients as the question screenshots includes one.
For more details on this package you can consult their Wiki page.
<StackLayout>
<pancake:PancakeView Padding="10"
BackgroundGradientStartPoint="1,0"
BackgroundGradientEndPoint="1,1"
HeightRequest="300"
VerticalOptions="Start"
CornerRadius="0,0,40,40">
<pancake:PancakeView.BackgroundGradientStops>
<pancake:GradientStopCollection>
<pancake:GradientStop Color="#44F3FF"
Offset="0"/>
<pancake:GradientStop Color="#46ACDC"
Offset="0.4"/>
<pancake:GradientStop Color="#0057CB"
Offset="1"/>
</pancake:GradientStopCollection>
</pancake:PancakeView.BackgroundGradientStops>
<StackLayout VerticalOptions="FillAndExpand">
<Label Text="Hello World"
HorizontalOptions="Center"
FontSize="Large"
TextColor="Black"/>
<Button Text="More Details"
BackgroundColor="#0057CB"
BorderWidth="2"
BorderColor="#44F3FF"
VerticalOptions="CenterAndExpand"
CornerRadius="25"/>
</StackLayout>
</pancake:PancakeView>
<Label Text="What are you doing today?"
FontSize="Title"
Margin="30,0,0,0"
TextColor="Black"/>
</StackLayout>
I have a sample page that has an outer grid with 3 rows. first and last (top and bottom) are my Header and Footer sections and in the middle, I have a StackLayout which then has a Frame (for color) which then has a ScrollView and inside of it another StackLayout.
The most inner StackLayout has many items that need to be scrolled, however, my challenge is that the inner items inside a ScrollView->StackLayout are not being constrained by the bounds of its parent and just overflow on top of my header and footer.
Strangely enough, this has just started happening, it used to work just fine and I don't know what changed. Code wise, it's identical... I'm at a loss, please help... Below is my XAML
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Pro4Soft.MobileDevice.Plumbing.Screens.TestPage"
VerticalOptions="FillAndExpand">
<ContentView.Content>
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label x:Name="Title" Grid.Row="0" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" FontAttributes="Bold" FontSize="Large">TEST PAGE</Label>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
<Frame BackgroundColor="LightYellow" BorderColor="LightYellow" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="5">
<ScrollView x:Name="Scroller">
<StackLayout x:Name="Container" Orientation="Vertical" Padding="1">
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
<Label Text="SUMMY TEXT"></Label>
</StackLayout>
</ScrollView>
</Frame>
</StackLayout>
<StackLayout x:Name="ControlsContainer" Orientation="Horizontal" Grid.Row="2" HeightRequest="50" HorizontalOptions="FillAndExpand">
<Button Text="Some btn"/>
</StackLayout>
</Grid>
</ContentView.Content>
</ContentView>
And here is a screenshot of what's going on
I checked your code and it's working fine. ScrollView is working fine. Please see below screenshot.
Clean the project and delete bin/obj folder and try again.
I ended up building a brand new project and migrating old code over. Then it worked. I suspect an old Nuget, of unupdated Xamarin.Essentials package or something along those lines...
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.
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.