Grid rowspacing does not seem to work in PancakeView - xaml

I have the following XAML file:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
x:Class="BottomSlider.TestView">
<yummy:PancakeView BackgroundColor="White"
Border="{yummy:BorderMarkup Color=Red, Thickness='1'} "
VerticalOptions="EndAndExpand"
x:Name="MyDraggableView"
CornerRadius="60,60,0,0"
HorizontalOptions="FillAndExpand"
HeightRequest="600" >
<Grid>
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
<BoxView BackgroundColor="Red" Grid.Row="0"/>
<BoxView BackgroundColor="YellowGreen" Grid.Row="1"/>
<BoxView BackgroundColor="Aqua" Grid.Row="2"/>
<BoxView BackgroundColor="Bisque" Grid.Row="3"/>
<BoxView BackgroundColor="BlanchedAlmond" Grid.Row="4"/>
<BoxView BackgroundColor="Blue" Grid.Row="5"/>
<BoxView BackgroundColor="DimGray" Grid.Row="6"/>
<BoxView BackgroundColor= "HotPink" Grid.Row="7"/>
<BoxView BackgroundColor="Gold" Grid.Row="8"/>
</Grid>
</yummy:PancakeView>
</ContentPage>
It seems by setting RowSpacing="0" this does not seem to be working.
The image that follows is what the xaml looks like after running it on the emulator.


You are defining two nested Grid, but setting RowSpacing="0" only in the inner one which is empty and does not contains your Boxview. To answer your question keep only one Grid:
<Grid RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<BoxView BackgroundColor="Red" Grid.Row="0"/>
<BoxView BackgroundColor="YellowGreen" Grid.Row="1"/>
<BoxView BackgroundColor="Aqua" Grid.Row="2"/>
<BoxView BackgroundColor="Bisque" Grid.Row="3"/>
<BoxView BackgroundColor="BlanchedAlmond" Grid.Row="4"/>
<BoxView BackgroundColor="Blue" Grid.Row="5"/>
<BoxView BackgroundColor="DimGray" Grid.Row="6"/>
<BoxView BackgroundColor= "HotPink" Grid.Row="7"/>
<BoxView BackgroundColor="Gold" Grid.Row="8"/>
</Grid>
Or if for some reasons you want to keep both (at least in the code you shared, for me it doesn't make sens to have both), then you need to set it in the outter Grid 'the one that contains your BoxView:
<Grid RowSpacing="0">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
....

Related

How to collapse a grid row in XAML?

I would like to know if it is possible to collapse a row in a grid ?
I already collapsed the controls inside my row (using Visibility = "Collapsed" + Height = "Auto").
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Test 1"/>
<ProgressBar Grid.Column="1" Value="90"/>
<Label Content="Test 2" Grid.Row="1" Visibility="Collapsed"/>
<ProgressBar Grid.Column="1" Grid.Row="1" Value="50" Visibility="Collapsed"/>
<Label Content="Test 3" Grid.Row="2"/>
<ProgressBar Grid.Column="1" Grid.Row="2" Value="20"/>
</Grid>
But I would like to collapse all the row, whitout doing it for each control in the row, like that :
<RowDefinition Height="Auto" Visibility="Collapsed"/>
Is it possible ? Or should I use something other than a grid ?
Thanks.

Unnecessary strip in xamarin forms

When compiling on mobile, an empty line appears that is not in the code. Everything is fine in the studio in the designer, but on the phone everything is different. Where could the error be?
<Grid.RowDefinitions>
<RowDefinition Height="2*"/>
<RowDefinition Height="3*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="10*"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<Grid Row="0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Column="0">
<SearchBar x:Name="SearchNickname"
BackgroundColor="{Binding BackColor}"
CancelButtonColor="{Binding TextColor}"
PlaceholderColor="{Binding TextColor}"
TextColor="{Binding TextColor}"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
Placeholder="Введите свой ник"
SearchCommand="{Binding SearchCmd}"
Text="{Binding SearchText, Mode=TwoWay, UpdateSourceEventName=TextChanged}"
MaxLength="100"/>
</Grid>
<Grid Column="1" BackgroundColor="{Binding BackColor}">
<Button ImageSource="https://assets.laut.fm/f69a3423e545055c32430e0a77ebe148?t=_120x120"
BackgroundColor="{Binding BackColor}"
Command="{Binding SettingsCmd}"/>
</Grid>
</Grid>
Where does this strip come from? enter image description here
Image in the designer studio enter image description here

That strip along the top is the Header/Navigation Bar, which you get by default in Xamarin Forms Pages. You can modify it or suppress it.

Not let Scroll View Appear Larger when made Larger But Instead Make the Overflow Text Appear if you Scroll More, Xamarin

Here is the code I have so far in XAML
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding EquationString}" />
<Entry Grid.Row="1" x:Name="entry" Placeholder="Put Answer Here" />
<Button Grid.Row="2" x:Name="btnCheck" Text="Check Answer"/>
<Label Grid.Row="3" Text="{Binding CheckMessageString}"/>
<BoxView Grid.Row="4" Color="Black" HeightRequest="1" HorizontalOptions="FillAndExpand"/>
<Grid Grid.Row="5" BackgroundColor="White">
<skia:SKCanvasView x:Name="canvasView"
PaintSurface="OnCanvasViewPaintSurface"
BackgroundColor="White"/>
<Grid.Effects>
<tt:TouchEffect Capture="True"
TouchAction="OnTouchEffectAction" />
</Grid.Effects>
</Grid>
<BoxView Grid.Row="6" Color="Black" HeightRequest="1" HorizontalOptions="FillAndExpand"/>
<Grid Grid.Row="7">
<Button Grid.Column="0" x:Name="btnClear" Text="Clear"/>
<Button Grid.Column="1" x:Name="btnAnalyze" Text="Analyze"/>
</Grid>
<ScrollView Grid.Row="8">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Text="{Binding ResultString}"/>
<Label Grid.Row="1" Text= "{Binding WorkString}"/>
</Grid>
</ScrollView>
</Grid>
Here is what the view originally looks like
When I press the button Analyze the Text WorkString changes be 4 \n. However I do not want the size of the drawing canvas to change.
Instead what I want to happen is that the size of everything stays the same as before I pressed the button except that the overflow text is now scrollable. In which you have to scroll in order to see that text. Can you guys please assist me with how to do this? Thank you.

If you want fix size on scrollview ,just hard code the last height of RowDefinition, do not use Auto .
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="30"/> //this line
</Grid.RowDefinitions>

How to change whole Grid's background color for specific row

Something similar to this:
<Grid Background="Yellow" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
</Grid>
But this would change the whole Grid. I just want to change the background color of specific row. How?

Add another Grid inside the Grid like this:
<Grid Background="Yellow" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid Background="Blue" Grid.RowSpan="2" Grid.Column="0"/>
</Grid>

How to make textbox in continuing the label?

I do not understand why textbox is not in the label extension.
What did I do wrong?
This is the code:
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<Label>Text here:</Label>
<TextBox></TextBox>
</StackPanel>
</Grid>