I want to format text and the image like the image attached.
How can I center the text and put the image with a little padding on the left side to the side?
<Button StyleClass="btnFAF" Text="Field Activity" Image="icon.png" Grid.Row="0" Grid.Column="0" x:Name="btnFAF" Clicked="btnFAF_Clicked" BorderRadius="6">
<Button.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="Android" Value="OpenSans-Regular.ttf#OpenSans-Regular"/>
</OnPlatform>
</Button.FontFamily>
</Button>
Format I want
instead of a button, I would just compose the layout you want using a Layout control and attach a TapGestureRecognizer to it
I'll illustrate with nested StackLayouts, but this may be better suited to using a Grid instead
<StackLayout Orientation="Horizontal" >
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="MyTappedHandler" />
<StackLayout.GestureRecognizers>
<Image ... />
<StackLayout>
<Label ... />
<Label ... />
</StackLayout>
</StackLayout>
Related
I tried recreating David Orinaus example of a bottom drawer on Xamarin Forms with DotNet Maui.
Implementation of bottom drawer:
<Grid>
<!-- Backdrop -->
<BoxView Color="#4B000000"
Opacity="0"
InputTransparent="True"
x:Name="Backdrop">
<BoxView.GestureRecognizers>
<TapGestureRecognizer
Tapped="TapGestureRecognizer_Tapped"/>
</BoxView.GestureRecognizers>
</BoxView>
<!-- Bottom Drawer -->
<Frame
x:Name="BottomToolbar"
HeightRequest="200"
VerticalOptions="End"
BackgroundColor="#FFFFFF"
CornerRadius="20"
TranslationY="260"
Padding="15,6">
<Frame.GestureRecognizers>
<PanGestureRecognizer
PanUpdated="PanGestureRecognizer_PanUpdated"
/>
</Frame.GestureRecognizers>
<StackLayout Orientation="Vertical" Padding="0,4">
<BoxView CornerRadius="2" HeightRequest="4" WidthRequest="40"
BackgroundColor="LightGray"
HorizontalOptions="Center"/>
<Label Text="Actions"
HorizontalOptions="Center"
FontSize="18"
FontAttributes="Bold"/>
<TableView Intent="Settings"
VerticalOptions="End"
BackgroundColor="White"
>
<TableSection>
<TextCell
Text="Favorite"/>
<TextCell
Text="Share"/>
</TableSection>
</TableView>
</StackLayout>
</Frame>
</Grid>
Most of the code is the same and this is a sample repository: https://github.com/MaticDiba/MauiAppBottomDrawer
But for some reason, the Bottom drawer is always shown when the page is loaded instead of being hidden until called.
Is there any specific with how DotNet Maui is handling frame views? Any suggestion on how to achieve the same effect with DotNet Maui as this example did with Xamarin?
As i shows in attached images, my grid row is square shaped space before connecting to server and load the images, but when images are loaded it changes it's height and become rectangle shape. how can i avoid it ? i want to keep the square shaped space.
my photos are also squared.
before and after after connecting to server
[1]: https://i.stack.imgur.com/lZj6F.png
[2]: https://i.stack.imgur.com/ZaKQd.png
Code :
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<Image x:Name="imgStation1" Grid.Row="0" Grid.Column="0" BackgroundColor="White" Source="saturday.jpg" Aspect="AspectFill" />
<StackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="StartAndExpand" Spacing="10" Margin="10">
<Label x:Name="lblLiveStation1" Text="" FontSize="Small" TextColor="AntiqueWhite">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="gothic.ttf#gothic"
iOS="Optima-Regular" />
</Label.FontFamily>
</Label>
<Label x:Name="lblDescriptionStation1" Text="Loading..." FontSize="Medium" FontAttributes="Bold" TextColor="FloralWhite">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="gothic.ttf#gothic"
iOS="Optima-Regular" />
</Label.FontFamily>
</Label>
<Label x:Name="lblTimeStation1" Text="" FontSize="Small" FontAttributes="Bold" TextColor="GhostWhite">
<Label.FontFamily>
<OnPlatform
x:TypeArguments="x:String"
Android="gothic.ttf#gothic"
iOS="Optima-Regular" />
</Label.FontFamily>
</Label>
<ImageButton x:Name="imgPlayPause0" Grid.Row="0" VerticalOptions="End" HorizontalOptions="Start" Source="playlogo.png" BackgroundColor="Transparent" Clicked="imgPlayPause0_Clicked"></ImageButton>
</StackLayout>
</StackLayout>
Have you tried giving Aspect="Fill" ?
If you want to have image with height = width(i.e., Square), then give hardcoded width or height to it.
If that is not possible in your case, then try using RelativeSource where WidthHeight ="*" and height will be relative to Width like this WidthRequest="{Binding Source={x:Reference Self}, Path=WidthRequest}}"
In Xamarin.Android it has a class named ViewPager to support "Gestural navigation allows the user to swipe left and right to step through pages of data." (https://learn.microsoft.com/en-us/xamarin/android/user-interface/controls/view-pager/)
But my task is write cross-platform codes for both Android & iOS (without rewrite new code for this gesture). With Xamarin.Form does any library support this ? I have read about Xamarin.Form carousel, but it seem used for slideshow, not appropriate for news list.
I think TabbedPage is more suitable for you. tabbedPage support the Gestural navigation allows the user to swipe left and right to step through pages of data, just set the different pages of data in different tabs.
Here is running GIF.
You can add this Tabbedpage like following code.
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TabbedPageDemo;assembly=TabbedPageDemo"
x:Class="TabbedPageDemo.TabbedPageDemoPage">
<TabbedPage.Resources>
<ResourceDictionary>
<local:NonNullToBooleanConverter x:Key="booleanConverter" />
</ResourceDictionary>
</TabbedPage.Resources>
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title="{Binding Name}" Icon="monkeyicon.png">
<StackLayout Padding="5, 25">
<Label Text="{Binding Name}"
Font="Bold,Large"
HorizontalOptions="Center" />
<Image Source="{Binding PhotoUrl}"
WidthRequest="200"
HeightRequest="200" />
<StackLayout Padding="50, 10">
<StackLayout Orientation="Horizontal">
<Label Text="Family:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Family}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Subfamily,
Converter={StaticResource booleanConverter}}">
<Label Text="Subfamily:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Subfamily}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal"
IsVisible="{Binding Tribe,
Converter={StaticResource booleanConverter}}">
<Label Text="Tribe:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Tribe}"
Font="Bold,Medium" />
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Text="Genus:"
HorizontalOptions="FillAndExpand" />
<Label Text="{Binding Genus}"
Font="Bold,Medium" />
</StackLayout>
</StackLayout>
</StackLayout>
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
You can add different ItemTemplate in the Tabbedpage.
Here is a related link.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
Update: you can add the listview in the tabbpage like following GIF.
I am trying to achieve a layout where the content has an image on background (positioned in bottom left corner, expanding 100% vertically and 60% horizontally)
The whole content is wrapped in an AbsoluteLayout, the main content is then a child to this layout and consists of StackLayout (and some other content inside).
The previewer in Visual Studio (Visual Studio Community 2017) shows the layout correctly - the image is below the content, the content is placed on middle as intended. However, both VS Emulator and Genymotion show the image above the content.
I trimmed the code to be as readable as possible (stripping it of styling)
...
<Frame VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
<Image Source="Graphic_Anna.png" />
</Frame>
<!-- Start: Actual Page Content -->
<StackLayout VerticalOptions="Center" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" x:Name="ApplicationLayoutContentLevel">
<Label Text="This is some text in main content" />
</StackLayout>
<!-- End: Actual Page Content -->
</AbsoluteLayout>
</ContentPage.Content>
...
The expected result is shown on this screenshot (from Previewer): https://i.imgur.com/C8GBMSi.png
However, the result in both emulator seems to do this: https://i.imgur.com/NvJFZan.png
Unfortunately, I don't have the option to test the app on an actual Android phone at this moment
Do you want to achieved like the following screenshot?
I do not know which size that you used, so I cutout the picture from your screenshot.
If so, there is my code.If you want to achieve coveraged effect, I used two stacklayout, the first layout will be covered by the second layout.Notice:If you set the VerticalOptions will affect the AbsoluteLayout.LayoutBounds
<ContentPage.Content>
<AbsoluteLayout>
<StackLayout VerticalOptions="End" AbsoluteLayout.LayoutFlags="All" Margin="0" Padding="0" IsClippedToBounds="True" AbsoluteLayout.LayoutBounds="0,1,0.6,1">
<Image Source="Graphic_Anna.png" />
</StackLayout>
<!-- Start: Actual Page Content -->
<StackLayout AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0.8,0.7,0.5,0.5" x:Name="ApplicationLayoutContentLevel">
<Image Source="start.png" Scale="0.7"/>
<Label Text="10/10" TextColor="Black" FontSize="50" Margin="20,10,0,0"/>
<Label Text="Great job! you got everything" TextColor="Black" Margin="0,10,0,0" />
<Label Text="Back to games" TextColor="red" Margin="25,20,0,0" />
</StackLayout>
<!-- End: Actual Page Content -->
</AbsoluteLayout>
</ContentPage.Content>
It seems that there is a confirmed Bug in Xamarin.Forms in iOS, when you have a content/label with a text too large that needs 2 lines to display it in a StackLayout (lets say layoutA), the others siblings and parent elements takes the width of the layoutA.
Kent Boogaart filled a Bug with the following example to reproduce the error.
<StackLayout Margin="0,20,0,0">
<!-- works (by virtue of no wrapping) -->
<StackLayout Orientation="Horizontal">
<Switch/>
<Label Text="Some text"/>
<Button Text="A Button" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- works (by virtue of no switch) -->
<StackLayout Orientation="Horizontal">
<Label Text="Some longer text that wraps over two lines"/>
<Button Text="A Button" HorizontalOptions="EndAndExpand"/>
</StackLayout>
<!-- does not work -->
<StackLayout Orientation="Horizontal">
<Switch/>
<Label Text="Some longer text that wraps over two lines"/>
<Button Text="A Button" HorizontalOptions="EndAndExpand"/>
</StackLayout>
</StackLayout>
Is there a solution/fix/workaround for this problem?
EDIT
Here is the code used:
<ListView HasUnevenRows="True" SeparatorVisibility="None" HorizontalOptions="StartAndExpand" CachingStrategy="RecycleElement">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#eee" Padding="5" Margin="5" >
<ffimageloading:CachedImage HorizontalOptions="Start" VerticalOptions="Start" HeightRequest="75" Source="{Binding ID, StringFormat='https://example/api/{0}'}" CacheDuration="15">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<Label Text="{Binding Name}" TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
<Label Text="{Binding Description}" HorizontalOptions="FillAndExpand" TextColor="#503026" />
<Label Text="{Binding ID}" x:Name="ID" IsVisible="False"></Label>
<Button Text="Ver productos" TextColor="#FF5F6D" HorizontalOptions="End" BackgroundColor="Transparent"></Button>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
These are actual screenshots of the app in iOS, in Android it just work great.
As you can see, in the Image1 the first card is OK, the button ("Agregar al carrito" or "Ver Productos") is at the end.
But in the second card as the text is too large, the button gets down out of the card.
And in the second image, the text in the middle needs 2 lines, and the StackLayout that wraps the content (the 2 labels and the button) gets just as wide as the label with the large text.
I draw a red square in the large text, and a red line so you can see that because of that large text, the StackLayout gets narrow.
This is a known issue that when setting the padding on stacklayout inside Cell , the row height displays incorrectly.
Solution: Use StackLayout to wrap the content under the Cell.
<ViewCell>
<StackLayout > //add this
<StackLayout Orientation="Horizontal" Padding="5" Margin="5" >
</ffimageloading:CachedImage>
<StackLayout BackgroundColor="Brown" Orientation="Vertical">
<Label TextColor="#f35e20" HorizontalOptions="FillAndExpand"/>
<Label/>
<Label Text="fff" x:Name="ID" IsVisible="False"></Label>
<Button Text="Ver productos" TextColor="#FF5F6D" BackgroundColor="Yellow"></Button>
</StackLayout>
</StackLayout>
</StackLayout>
</ViewCell>