Empty space above and under images in grid - xaml

I am working on images in grid layout and i have problem with empty space below and above images. I would like these rows with dates to be exactly below icons without any empty space and to make icons with size just like they are on picture. When i use aspect fit, it makes icons streched vertically. I tried to set fixed size of row but it made a crap view when I rotaded phone.
<Grid
RowSpacing="0"
VerticalOptions="Center"
>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="kafelek_1.png"
Grid.Column="0" Grid.Row="0"
></Image>
<Image Source="kafelek_2.png"
Grid.Column="1" Grid.Row="0"
></Image>
<Image Source="kafelek_3.png"
Grid.Column="2" Grid.Row="0"
></Image>
<StackLayout BackgroundColor="#0078B7"
Grid.Column="0" Grid.Row="1"
Orientation="Horizontal"
HeightRequest="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Image Source="trojkat.png">
</Image>
<Label Text="Temp"
x:Name="DecisionDateLabel"></Label>
</StackLayout>
<StackLayout BackgroundColor="#0078B7"
Grid.Column="1" Grid.Row="1"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Image Source="trojkat.png"></Image>
<Label Text="Temp"
x:Name="KnowledgeDateLabel"></Label>
</StackLayout>
<StackLayout BackgroundColor="#0078B7"
Grid.Column="2" Grid.Row="1"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Image Source="trojkat.png"></Image>
<Label Text="Temp"
x:Name="PollsDateLabel"></Label>
</StackLayout>
</Grid>
Generally, this is what i would like to obtain:

This bug is created in bugzilla https://bugzilla.xamarin.com/show_bug.cgi?id=55294
You can actually try to implement workaround How can I make an image auto-resize so the width is 100% and the height adjusted accordingly?

Related

Xamarin iOS - How to get StackLayout to auto size to nested contents?

I have the following XAML :
<StackLayout>
<Grid IsVisible="{Binding isVisible}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<behaviors:Expander x:Name="MainExpander" CollapseAnimationLength="500" IsExpanded="false" >
<behaviors:Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Center" Margin="20" Padding="0" BackgroundColor="Maroon">
<Label Text="{Binding student_initial}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Frame>
<StackLayout Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="20">
<Label x:Name="StudentName" Text="{Binding student_fullname}"></Label>
<Label x:Name="StudentID" IsVisible="false" Text="{Binding student_unique_id}"></Label>
</StackLayout>
</Grid>
</behaviors:Expander.Header>
<Grid RowSpacing="0" HorizontalOptions="FillAndExpand" HeightRequest="240" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="Messages" Clicked="Button_Clicked"></Button>
<Button x:Name="btnTopUp" Grid.Row="1" Text="Quick Topup" Clicked="Button_Clicked" IsVisible="{Binding topup_product_id, Converter={StaticResource IsNotNullOrEmptyConverter}}"></Button>
<Button Grid.Row="2" Text="Payments" Clicked="Button_Clicked"></Button>
</Grid>
<!--TODO: Look at adding a balance for childrens topups?-->
</behaviors:Expander>
</Grid>
</StackLayout>
I am trying to hide and show the grid as follows :
<Grid IsVisible="{Binding isVisible}" ...
The issue is that nothing shows as it looks like the StackLayout is unable to work out how high it needs to be. I can't explicitly set the height property as it depends if the expander is expanded or not. Is there a way to make the stack layout height auto size ? Thank you.
Replace StackLayout with Grid , set its HorizontalOptions and VerticalOptions as Start .
<Grid BackgroundColor="Red" HorizontalOptions="Start" VerticalOptions="Start">
<Grid IsVisible="false" ...
See the following screen shot in all of the scenarios (red color represents the root Grid)
Gird invisible
Grid visible (none-expanded)
Grid visible (expanded)

Xamarin stacking text below an image

I am trying to figure out how to center the image and text and push the text "Cache 3" directly below the image without the bottom red space. This stacklayout is in a collection so the images are of different heights hence I can't set a HeightRequest per se.
This is my XAML:
<StackLayout>
<Frame
Margin="10"
Padding="0"
BorderColor="{StaticResource Gray-500}"
CornerRadius="5"
HasShadow="False"
HorizontalOptions="Center"
VerticalOptions="FillAndExpand">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Margin="15"
Aspect="AspectFit"
BackgroundColor="Red"
Source="{Binding Image, Converter={StaticResource BytesToImageSource}}" />
<Label
Grid.Row="1"
Padding="15,0,15,15"
FontSize="18"
HorizontalTextAlignment="Center"
Text="{Binding Data}"
TextColor="{StaticResource Gray-900}"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
</StackLayout>

Xamarin Editor Padding

In my xaml I'm trying to put padding between my background and my labels/editor and datepicker, but I can't get it right. I've attempted putting the grid inside a grid and put padding or margin on that one. I've tried putting the labels/editors inside a grid/stacklayout, I've even tried negative padding and margin on them.
This is how it looks like without the padding
https://gyazo.com/3809306e3b5a27a5f10058bbc17c295a
But whenever I try to add padding or margin anywhere the editors gets too small and gets clipped on the inside like this:
https://gyazo.com/46f25b9c44e1717bf1fa124eb2b10068
This is how I want it to look like, but I can't get rid of that damn clipping on the editors, why does the editors get clipped but not the label?
I've tried setting margin 0 and padding 0 on the editors specifically, didn't help either.
<!-- Bottom Command Bar -->
<Grid Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="LightGray" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Padding="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="1.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" BackgroundColor="White" Text="{Binding QuoteNumber}" TextColor="Black" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="1" BackgroundColor="White" Placeholder="PO Number" TextColor="Black" Text="{Binding PoNumber}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<Editor Grid.Row="0" Grid.Column="2" BackgroundColor="White" Placeholder="Drop Date" TextColor="Black" Text="{Binding DropDate}" VerticalOptions="Fill" HorizontalOptions="Fill" />
<DatePicker Grid.Row="0" Grid.Column="2" MinimumDate="{Binding MinimumDate}" MaximumDate="{Binding MaximumDate}" Date="{Binding DropDate}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White"/>
<Editor Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" BackgroundColor="White" Placeholder="Comment" TextColor="Black" Text="{Binding Comment}" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Label Grid.Row="0" Grid.Column="3" VerticalOptions="Center" HorizontalOptions="Center" FontSize="32" Text="{Binding TotalOrderValue, StringFormat='{0:C2}'}"/>
<Button Grid.Row="1" Grid.Column="3" Margin="10,0,10,2" VerticalOptions="Fill" HorizontalOptions="Fill" Text="SUBMIT PART ORDER" Command="{Binding SubmitJourneyCommand}" BackgroundColor="{StaticResource ThemeBkColor}" TextColor="White" />
</Grid>
Within your Change the value from * to AUTO
From there you can use 'padding' or 'margin' on either the main Grid control or the individual Row elements and controls within them.

How to set marging to long text in Label which is divided into two lines

I have a Label in my AbsoluteLayout and when that Label's text is long in puts text into two lines which is okay but is it possible to get a Margin to the second left wrapped line too? I attached image to show better what I mean and in that Image there is Red arrow showing the place what I'm asking.
Thanks for All!
<Grid HorizontalOptions="Center"
VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<AbsoluteLayout HorizontalOptions="Start">
<Image HeightRequest="160"
HorizontalOptions="Start"
WidthRequest="360"
Aspect="AspectFill"
Grid.Row="0"
Source="{Binding EnclosureUrl}"
Margin="0,0,0,15">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TappedItemCommand"
CommandParameter="{Binding Link}"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<Label Grid.Row="0" Grid.Column="0"
HorizontalOptions="Start"
Margin="0,0,0,40"
WidthRequest="250"
Style="{StaticResource BoldBasicText}"
Font="Bold,20"
AbsoluteLayout.LayoutFlags="PositionProportional"
AbsoluteLayout.LayoutBounds="0,1,-1,-1"
BackgroundColor="{x:Static ownStyles:StyleSettings.colCaptionColorFade}"
TextColor="{x:Static StyleSettings:Settings.colRed}"
Text="{Binding Header}">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TappedItemCommand"
CommandParameter="{Binding Link}"
NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>
</AbsoluteLayout>
</Grid>
You can use Line Break Mode available in Xamarin.Forms:-
LineBreakMode="WordWrap"
<Label Text="{Binding Certification, StringFormat='Board Certification:{0:F0}'}" LineBreakMode="WordWrap"/>
Refer Link Below:-
Xamarin Text Line Break Mode
Label wrapping with StackLayout

How to do the image fill the text - the same size always - xamarin.forms

I am trying to do a button with a image, and each button has a text inside...but I don't know so much about xamarin forms, I'm a beginner
And my images is little while the text is bigger than it...
I am using a grid...and inside it one other grid with 1 colunm and 1 row for each button (Image and texts)
I neet the image (that is my button) get the size of the texts that is inside it
My xml at the moment:
<!-- Buttons grid-->
<Grid HorizontalOptions="Center" Margin="20,20,20,20" RowSpacing="30" ColumnSpacing="10" BackgroundColor="Aquamarine" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--One of my buttons grid, there are 4 others as this one-->
<Grid Grid.Column="0" Grid.Row="1" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image Source="comochegarbtn.png" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="MapaClique"/>
</Image.GestureRecognizers>
</Image>
<StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="Location.png" VerticalOptions="FillAndExpand"/>
<Label Text="Como Chegar" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
</StackLayout>
</Grid>
</Grid>
In android I could solve that using wrap_content
But here, in xamarin forms, I don't know how to solve it
The gray part is the grid item size
If you need the exact size of the Text to be the width of your Image then you will have to use RelativeLayout.
In the RelativeLayout for the Image width use RelativeToView.
This is similar to the Relative Layout in Android.
<RelativeLayout>
<Image RelativeLayout.WidthConstraint="{ConstraintExpression Type=Type=RelativeToView, ElementName=myStacklayout,Property=Width,Factor=1}" Source="comochegarbtn.png" HorizontalOptions="FillAndExpand" Grid.Row="0" Grid.Column="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="MapaClique"/>
</Image.GestureRecognizers>
</Image>
<StackLayout x:Name="myStacklayout" HorizontalOptions="Center" VerticalOptions="Center">
<Image Source="Location.png" VerticalOptions="FillAndExpand"/>
<Label Text="Como Chegar" TextColor="White" HorizontalOptions="Center" Style="{Binding labelsfont}"/>
</StackLayout>
</RelativeLayout>
Using one or 2 relative layouts won't affect you much. But if you think it does you can write a custom render and create a complex button in the native layer.