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.
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>
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.
im using circleImage
xmlns:ic="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
in my xaml file.
and what i'm trying to do is inserting
<ic:CircleImage
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
this image under the button property.
but if i do this(under)
<Button Clicked="OnUserInfoClicked">
<Button.Image>
<ic:CircleImage
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
</Button.Image>
</Button>
then, i get this error.
No property, bindable property, or event found for 'image'
what am i doing wrong? and how to fix it?
What you are trying to do is not possible. However if all you wanna do is be able to click on the image and perform an action, why don't you just use a TapGesture?
<ic:CircleImage
VerticalOptions="Center"
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
Source="{Binding post.uploader.userProfile.userThumbnail}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="OnUserInfoClicked" />
</Image.GestureRecognizers>
</ic:CircleImage>
Hope this helps!
To those stumbling on this in the future - If you are not required to use the CircleImage object, Xamarin's default buttons have circular support by making the CornerRadius half the height of the image.
<ImageButton
x:Name="userProfileImage"
HeightRequest="50"
WidthRequest="50"
Aspect="AspectFill"
CornerRadius="25"
BackgroundColor="White"
Source="{Binding post.uploader.userProfile.userThumbnail}"
/>
You can also add a BorderColor and BorderRadius to make it pop out a bit more if you need:
I'm building a layout in my Xamarin.Forms app, and I need to display an image with a transparent color overlay. I have a Grid layout that displays the image and stacks a ContentView on top of it with a semitransparent background color. As you can see in the images below, the ContentView (and I suspect the containing Grid) simply refuses to shrink to the size of the image (the largest item in the Grid).
How can I do this?
I've tried all kinds of different VerticalOptions on the different views and nothing I've done so far has worked, but I'm new to Forms so confirm if you think the solution might be basic. :)
Thanks in advance!
Here's the code:
<Grid VerticalOptions="Start">
<Image Source="PlayerBackground.png" />
<ContentView BackgroundColor="#88000000"></ContentView>
<StackLayout VerticalOptions="Center">
<Image/>
<Label/>
</StackLayout>
</Grid>
Here's what it's supposed to look like:
And here's what I'm actually getting:
Aspect property is the key.
<Grid HorizontalOptions="Fill" VerticalOptions="Fill">
<Image HorizontalOptions="Fill" VerticalOptions="Fill" Aspect="AspectFill" Source="PlayerBackground.png" />
<BoxView HorizontalOptions="Fill" VerticalOptions="Fill" BackgroundColor="#000000" Opacity="0.8"/>
</Grid>
Or you could use CachedImage which is Image replacement:
<ffimageloading:CachedImage Source="{Binding ImageUrl}">
<ffimageloading:CachedImage.Transformations>
<!-- First two digits from HexColor = ALPHA channel -->
<fftransformations:TintTransformation HexColor="#60ff0000" EnableSolidColor="true"/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
Disclaimer: I'm an author.
Try setting the HorizontalOptions and Vertical Options on the ContentView.
Also you can use a Grid instead of a ContentView with HorizontalOptions and VerticalOptions set to FillAndExpand
You can try using IconView which is very handy. As per your solution, you can try as follows.
First include IconView.cs in your Xamarin.Forms project.
Then try the following.
<Grid VerticalOptions="Start">
<local:IconView Source="PlayerBackground.png"
VerticalOptions="Fill" HorizontalOptions="Fill"
Foreground="Green"/>
<local:IconView Source="Bird.png"
VerticalOptions="Center" HorizontalOptions="Center"
Foreground="Blue"/>
</Grid>
Change the Foreground value to whatever colour you want. Hope this answers your problem.
if you use FF CachedImage, you can apply color overlay like so:
img_radar.Transformations.Add(new TintTransformation() { HexColor = "ffffff" });
forms:CachedImage Source="img_radar_off" x:Name="img_radar" Grid.Row="1" Grid.Column="1">
<forms:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="tapped_radar"/>
</forms:CachedImage.GestureRecognizers>
</forms:CachedImage>
I am using a ContentPage in a Xamarin.Forms project in Visual Studio 2015 with C# where I have a few text input boxes postioned at the bottom of the screen. I want that the screen reposition itself to show in view the current textbox which has the cursor when the onscreen keypad pops up. When the user cancels the keypad the form should expand back into its original position before the keypad popped up. I am using this link to figure this out, but it is not working. The keypad still covers the textbox. Here is the Xaml of the screen.
<ContentPage>
<ContentPage.Padding>
<OnPlatform x:TypeArguments="Thickness">
<OnPlatform.WinPhone>0, 20, 0, 0</OnPlatform.WinPhone>
</OnPlatform>
</ContentPage.Padding>
<ContentPage.Content>
<ScrollView >
<StackLayout >
<BoxView BackgroundColor="Red" HeightRequest="162" WidthRequest="150" />
<Entry Placeholder="Username" Text="{Binding UserName}"></Entry>
<Entry Placeholder="Password" IsPassword="True" Text="{Binding Pass}"></Entry>
<Button Text="Login" Command="{Binding onClicked}" />
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Is there something that I might have missed in that article?
EDIT: Adding Screenshot