Replace a FlexLayout with a StackLayout - xaml

I have a Grid with two rows in Auto within a CollectionView. In one I have a FlexLayout, in the other a Label. For some strange problem, with these two controls the Label is not displayed and the only way I have found so far is to replace the FlexLayout with a StackLayout.
<DataTemplate>
<yummy:PancakeView CornerRadius="15">
<yummy:PancakeView.Shadow>
<yummy:DropShadow Color="LightBlue" Offset="10,10"/>
</yummy:PancakeView.Shadow>
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27"/>
<RowDefinition Height="27"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="32"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Margin="4,4,4,7" Source="{Binding Umore}" VerticalOptions="Center"/>
<Label Grid.Row="0" FontFamily="FontM" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center" />
<Label Grid.Row="1" FontFamily="FontM" Grid.Column="1" Text="{Binding Orario}" FontSize="16" TextColor="{DynamicResource TextColor}" Opacity="0.6" VerticalOptions="Center"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="LightGray" HeightRequest="10" Progress="1" VerticalOptions="End"/>
<ProgressBar Grid.Row="1" Grid.Column="0" ProgressColor="{Binding ColoreUmore}" HeightRequest="10" Progress="{Binding ProgValore}" VerticalOptions="End"/>
<FlexLayout
Grid.Row="2"
Margin="0,5,10,0"
Grid.Column="1"
BindableLayout.ItemsSource="{Binding IconDiaries}"
Wrap="Wrap"
JustifyContent="Start"
Direction="Row"
AlignItems="Start"
AlignContent="Start">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid Padding="0,2,3,0">
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<controls:TintedImage Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="2" TintColor="{Binding ColoreUmore}"/>
<Label Grid.Row="0" Grid.Column="1" FontFamily="FontM" Text="{Binding id}" TextColor="{DynamicResource TextColor}" Opacity="0.9" FontSize="13" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<Label Grid.Row="3" Grid.Column="1" FontFamily="FontM" TextColor="{DynamicResource TextColor}" FontSize="16" Text="{Binding Nota}"/>
Result
Is there any way to turn this FlexLayout into a StackLayout and be able to visualize in the same way?

Use * instead of Auto for your FlexLayout row.
<Grid BackgroundColor="{DynamicResource SfondoElemDiario}" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="27" />
<RowDefinition Height="27" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- elements -->
</Grid>

Related

How to set controls in Xamarin Form to get a similar and relative UI in every phone screen sizes?

I want to make a UI like this:
This UI should correspond to different phone screen sizes.
I started to write this XAML code:
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame BackgroundColor="Transparent"/>
</Grid>
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10"/>
</Grid>
<Grid Grid.Row="1" Padding="0,40,0,0">
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10"/>
</Grid>
</Grid>
<Entry Grid.Row="0" Grid.Column="1" MaxLength="30" Placeholder="User Name:" ClearButtonVisibility="WhileEditing"/>
<Entry Grid.Row="1" Grid.Column="1" MaxLength="30" Placeholder="Password:" ClearButtonVisibility="WhileEditing" IsPassword="True"/>
<Image Source="User.png" Scale="0.6"/>
<Image Source="Lock.png" Scale="0.6"/>
<Button Text="Login"/>
</StackLayout>
I know that Those images must be in the Grid node above. But I cannot set those Entry and user/pass logos correctly. Those buttons are images in the resource folder.
Please help me to set a UI similar to this image.
One grid is enough, you can remove one.
You can refer to the following code:
<StackLayout BackgroundColor="#1E90FF" Orientation="Vertical">
<Grid Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="0" Grid.ColumnSpan="2" />
<Entry Grid.Row="0" Grid.Column="0" MaxLength="30" Placeholder="User Name:" ClearButtonVisibility="WhileEditing" />
<Image Source="head.png" Scale="0.6" Grid.Row="0" Grid.Column="1"/>
<Frame HeightRequest="30" BackgroundColor="White" CornerRadius="10" Grid.Row="1" Grid.ColumnSpan="2"/>
<Entry Grid.Row="1" Grid.Column="0" MaxLength="30" Placeholder="Password:" ClearButtonVisibility="WhileEditing" IsPassword="True"/>
<Image Source="Lock.png" Scale="0.6" Grid.Row="1" Grid.Column="1"/>
</Grid>
<Button Text="Login"/>
</StackLayout>
The result is:

xamarin forms - ios - listview header - showing bold border?

Please see below image
please see below code
//PopUp.Xaml
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="Product"
HorizontalOptions="Center"/>
<Label Grid.Column="1" Grid.Row="0"
Text="Quantity"
HorizontalOptions="Center"/>
<Label Grid.Column="2" Grid.Row="0"
Text="Price"
HorizontalOptions="Center"/>
<Label Grid.Column="3" Grid.Row="0"
Text="Sub"
HorizontalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="4"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="24*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>
<Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>
<Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>
<Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>
<Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</pages:PopupPage>
My Q being why does the popUp header of the listview...appear with a bold border below it? only on ios...not on android...I would like to remove it please. does anyone know how?

Xamarin Forms Center Grid horizontal

I have a problem. I am trying to achieve the following Grid:
To do that, I thought that I should set both the ColumnWidth to Auto and set the HorizontalOptions of the Grid to Center, so the Grid is centred in the middle of the screen creating equal spaces at the left and right side, but no matter what I try, I can't seem to move the columns from the right side. Here is what I have now:
And here is my code:
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0" HorizontalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" TextColor="White" FontSize="18"/>
<Label Grid.RowSpan="2" Grid.Column="2" Text="-$476.22 (-4.77%)" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Red" FontSize="18" Margin="15,0,0,0"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>
How can I create my wanted result?
Can you try this?
<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical">
<CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
<CarouselView.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="1" Grid.Column="1" Text="9762.33" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
<Label Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" Text="-$476.22 (-4.77%)" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
</Grid>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</StackLayout>
</Frame>

Both Label in Grid (same column, diff row) move when text changed. Why?

Video showing the simulator: https://youtu.be/3ajany0iaCw
The codes:
<Grid HorizontalOptions="Center" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Switch Grid.Column="0"
HorizontalOptions="Center"
IsToggled="{Binding SwitchToggled}"/>
<Label Grid.Column="1"
HorizontalOptions="Center"
Text="{Binding SwitchToggled,
Converter={StaticResource Key=boolToStrConv}}"/>
<Switch Grid.Column="0" Grid.Row="1"
HorizontalOptions="Center"
x:Name="switch2"/>
<Label Grid.Column="1" Grid.Row="1"
HorizontalOptions="Center"
Text="{Binding Source={x:Reference switch2},
Path=IsToggled,
Converter={StaticResource Key=boolToStrConv}}"/>
</Grid>
My expectation is that no matter how the Label's text length is changed, it would both be centered - considering that both of them has a HorizontalOptions Center.
Why did this happened and how do I fix this?
You need to look at the container that is grid is within and the fact that you are centering (floating) your grid within that container.
Assign a background color to your grid and a different one to its container and you will see that its size depends upon what it is contains since you are * (star) its size and the grid itself is "floating" in the center of its container, change the contents of the grid, the size of the grid changes:
<Grid VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
<Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
<Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>
Lock the grid to fill its parent's width (via StartAndExpand in my example) and changing your label's text content will not cause your toggle's start position to move...
<Grid VerticalOptions="StartAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Gray">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Switch Grid.Column="0" HorizontalOptions="Center" BackgroundColor="Red" x:Name="switch1" />
<Label Grid.Column="1" HorizontalOptions="Center" BackgroundColor="Red" Text="False" x:Name="label1" />
<Switch Grid.Column="0" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" x:Name="switch2" />
<Label Grid.Column="1" Grid.Row="1" HorizontalOptions="Center" BackgroundColor="Green" Text="False" x:Name="label2" />
</Grid>

XAML Grid layout

I am developing a XAML based app and I have a spacing/layout issue. I currently have my main page as a 1 column grid. I have a ListBox though in which I need my data template to be displayed over 2 columns. The first data element should take up 75% of the screen and the second data element should take up the rest. When I run my app, the data from my listbox items are bunched on the left hand side of the screen. How can I change this behavior?
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="9*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<!--My Section-->
<Grid Grid.Row="3" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
<Line Grid.Row="1" Grid.Column="0" Stroke="White" StrokeThickness="1" />
<ListBox Grid.Row="2" ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
<Rectangle Fill="Orange" />
<Rectangle Fill="Blue" />
</StackPanel>
</Grid>
Why use a Grid to center the content?
I currently have my main page as a 1 column grid
Why use a grid if it has just 1 column? Use margin on the stackpanel items.
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical">
<TextBlock Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
<Line Stroke="White" StrokeThickness="1" />
<ListBox ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
<Rectangle Fill="Orange" />
<Rectangle Fill="Blue" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>