Xamarin.Forms: Tiny icons are getting cut ever so slightly when size is set with grid value - xaml

this is a simple grid with a tiny button in it:
<!--ReverseButton-->
<Grid Grid.Row="1" RowSpacing="0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton
Source="btn_reversed_unpressed"
x:Name="btn_reverse_list_mainmenu"
BackgroundColor="#00000000"
Grid.Column="1"
Clicked="ReverseListForSwipeView"
/>
</Grid>
The size of this Row (row 1) is set here:
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.17*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I set the value to 0.17* to have the button always be very tiny. If i would set the row to "auto" the icon would become much bigger (since the source image is bigger in size)
If I make the size to, lets say 0.25* instead of 0.17* the row and therefore the button both get bigger and everything is fine. (Except now it is too big)
But with size 0.17* it is just about right... Well except for this:
It is quite hard to see, but the icon at the bottom is cut of slightly. The border is not as big as it is on the top.
This I have noticed quite some time now.
I tried setting the rowspacing to 0 or even negative values, but nothing worked.
Why is the icon cut off.
The top part isnt cut and both parts (top and bottom) touch the row end and beginning pixel perfect.

An answer based on my comment above. I suggest setting the HeightRequest of the ImageButton to the size you want the icon to be and then just set the row height to Auto and let the layout manager do the rest. See my example where I create a Grid with 3 rows set to Auto size and then just use the HeightRequest property to have it draw at the correct size. I left the grey background of the button in so you can see how the row sizes dynamically.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="0" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="75"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="1" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="100"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="2" />
</Grid>
</ContentPage.Content>
Gives the following:

Related

Xamarin forms vertically center text over image

I'm learning Xamarin and I want to display an image as background with some texto over this image...
Just that, I manage to acomplish, but the text is displayed at the top left corner of the image.
I'd like the text to be placed at the vertical center of the image, but stick to the left side of it.
My code so far XAML:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*" ></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<RelativeLayout Grid.Row="0">
<Image Source="login.png" Aspect="Fill" />
<Label Text="Bem vindo" TextColor="White" FontSize="22"></Label>
</RelativeLayout>
<Label Grid.Row="1" Text="linha 2" BackgroundColor="Coral"></Label>
<Button Grid.Row="2" Text="linha 3" BackgroundColor="DarkRed"></Button>
</Grid>
I've tried verticalOptions and such, but with no effect.
One thing that kind of worked is settin a Maring property to the label, but that way, the label would be centered only to the device I'm testing on. Other devices, smaller or greater, the label could (and probably would) be placed at the wrong place.
Any help?
You don't need a RelativeLayout inside the Grid. The Grid itself already is able to handle views overlay besides let your code clearer.
It may works:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="20*"></RowDefinition>
<RowDefinition Height="65*"></RowDefinition>
<RowDefinition Height="15*"></RowDefinition>
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column="0"
Source="login.png"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Aspect="Fill" />
<Label Grid.Row="0" Grid.Column="0"
Text="Bem vindo"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center"
TextColor="White"
FontSize="22"/>
<Label Grid.Row="1"
Text="linha 2"
BackgroundColor="Coral"/>
<Button Grid.Row="2"
Text="linha 3"
BackgroundColor="DarkRed"/>
</Grid>

Why is the circle getting cut off?

Steps:
Make a brand new "Blank App (Universal Windows)"
Set Target and Minimum Version: "Windows 10 Creators Update (10.0; Build 15063)"
Add the code below to MainPage.xaml and run the app.
MainPage.xaml
<Grid Width="128" Height="120">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="1" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
Should see this:
Why is the green circle getting cut off? Further to that, if you set ChangeHeightRow.Height to 0, it looks like this:
What is going on? I would expect the circle to never be cut off...maybe I'm wrong?
TL;DR: You are clipping of the Ellipse by having an empty row of 1 pixel in your Grid.
The problem is on multiple levels. Your outer Grid has a Width and Height set. Next your RowDefinition has a Height set and your Ellipse is of a bigger size than both heights.
<Grid Width="128" Height="120">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="1" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
By setting these sizes, you are allowing other controls to come closer to the inner controls than they would if you would use Auto as sizing for the rows and nothing (=auto) as Grid size.
In your initial code, you have a Grid row with the Ellipse and an empty row of 1 pixel high. By default XAML controls have a Z-axis with items declared at the bottom of your XAML file being the topmost control in the visual layers. So for your Grid, your second row is on top of your first row in case of overlap. Since the Ellipse leaks outside of the row, the second row is drawn over it and clips your Ellipse.
By setting the height to 0, the second row is no longer drawn and can't clip your control.
To make this more clear, I have tweaked your XAML a bit, adding another StackPanel outside your grid and adding a Button. As you can see, the Button is drawn on top of the Ellipse, as it's defined below in XAML and thus getting a higher visual layer on the Z-axis.
<StackPanel Width="130">
<Grid Width="128" Height="120">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="0" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
<Button Background="Black" Foreground="White">Test</Button>
</StackPanel>
If we change the StackPanel to a Grid, we have the same behavior. However moving the Button to the top in the XAML declaration (and keeping Grid.Row on 1 so it's below the Ellipse), you'll notice that it's now behind the Ellipse because of the Z-layers ordered differently.
<Grid Width="130">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Background="Black" Foreground="White" Grid.Row="1">Test</Button>
<Grid Width="128" Height="120" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="0" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
</Grid>

RichTextBlock overflow is missing the first line of text

I've got a Grid that is dynamically sized based on the size of the window it is in. The grid has three children: an Image, a RichTextBlock, and a RichTextBlockOverflow. When the window is sized down enough to ensure that the height of the RichTextBlock becomes 0, the overflow content does not include the first line (which the RichTextBlock couldn't visibly render.
In the sample code below (reduced to just show the essentials), I only see "World" in my overflow.
<Grid MinHeight="200" MinWidth="400">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image />
<RichTextBlock x:Name="Text" Grid.Row="1" OverflowContentTarget="{Binding ElementName=OverflowText}">
<Paragraph>Hello<LineBreak />World</Paragraph>
</RichTextBlock>
<RichTextBlockOverflow Name="OverflowText" Grid.RowSpan="2" Grid.Column="1" />
</Grid>
Is there any way to ensure that the overflow would have all the text in case the RichTextBlock doesn't have enough space to render the first line?

Dynamically expanding Grid also expands fixed height Rows and Columns

I have a dynamically expanding Grid inside another Grid which is separated onto 4 rows and 4 columns.
My main content grid spans 4 rows and 2 columns and dynamically loads different Views, and sometimes expands in height. My problem is, the other rows are also expanded although they have a fixed height, which makes the layout appear weird.
I want to keep all the rows' heights to 36, but just expand the lowest row so all content of my grid is shown.
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="45" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="70" />
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="36" />
<RowDefinition Height="36" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
FontSize="14"
Content="X">
</Button>
<Grid x:Name="MainPaymentContentRoot"
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="20,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollMode="Auto">
</Grid>
<TextBlock Text="MyField" Grid.Row="0" Grid.Column="3" Margin="10,0,0,0" VerticalAlignment="Center" />
<Button Grid.Row="1" Grid.Column="3" Margin="10,0,0,0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Right"
Content="AnotherButton">
</Button>
</Grid>
This is for a Win 8 Development.
Currently, your RowDefinition is set to Auto. This means that the row will calculate the content size, and adjust it's height accordingly.
You need to change it to Height="*".
<RowDefinition Height="*" />
This will force the RowDefinition to expand to the height of the parent. In other words, it will take up all available space.

ScrollViewer not to scroll when content does not exceed parent's height

In this XAML I can scroll Contents grid up and down a bit even though it does not exceed the ScrollViewer height.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="Controller" Grid.Row="0">
<controls:SearchField x:Name="Searcher" />
</Grid>
<ScrollViewer x:Name="Scroller" Grid.Row="1">
<ScrollViewer.Content>
<Grid x:Name="Contents">
<TextBlock Text="HI" />
</Grid>
</ScrollViewer.Content>
</ScrollViewer>
</Grid>
I guess it is a standard behavior of some kind but I don't like it too much. It it possible to make ScrollViewer not to scroll it's contents if they don't exceed ScrollViewer's height?