I have a view with grid which consists of two stacklayouts positioned vertically.
I would like an effect that second stacklayout has scrollview only because I build its content dynamically on page model side. When content of second stacklayout is built then on screen I see only that second stacklayout. I want to see first and second already built with possibility of scrolling. Any ideas ?
<StackLayout VerticalOptions="StartAndExpand" Spacing="0">
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
<ColumnDefinition Width="0.2*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackLayout Spacing="0" VerticalOptions="StartAndExpand"
Margin="0" Padding="0" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="5">
<Some static content/>
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Spacing="0" Margin="0">
<ScrollView>
<StackLayout x:Name="details">
</StackLayout>
</ScrollView>
</StackLayout>
</Grid>
</StackLayout>
The definition of your Grid rows are wrong. The StackLayout with ScrollView should have * and the other should have Auto Height.
<ScrollView>
<StackLayout x:Name="details">
Layout overflow is required. otherwise, it is not displayed.
Add buttons for example.
</StackLayout>
</ScrollView>
Related
enter image description hereI want to implement the xamarin essentials map, but with a floating search for the pins that will appear on this map. I'm using a grid to divide the grid's rows and thus use the first row for the map and the second to show a cardview related to the selected pin. I put the search control in row 0 so that it seems to float on the map.
I couldn't get the focus of the search control to work. I don't know if I'm implementing the InputTransparent property correctly.
Any ideas?
<Grid InputTransparent="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="140"/>
</Grid.RowDefinitions>
<maps:Map
x:Name="map"
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
MapType="Street"
HasZoomEnabled="True"
IsShowingUser="True"
InputTransparent="False"
MoveToLastRegionOnLayoutChange="false"
>
</maps:Map>
<StackLayout Grid.Row="0" Grid.Column="0" InputTransparent="True">
<Frame
Margin="20,40,20,0"
Padding="0"
BorderColor="{StaticResource BlackColor}"
CornerRadius="8"
HeightRequest="35">
<Grid VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Image
Grid.Row="0"
Grid.Column="0"
HeightRequest="20"
HorizontalOptions="Center"
Source="ic_search_bar"
VerticalOptions="Center"
WidthRequest="20" />
<controls:CustomEntry
x:Name="entrySearch"
Grid.Row="0"
Grid.Column="1"
FontSize="14"
HeightRequest="35"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Keyboard="Text"
Placeholder="¿Qué se te antoja hoy?"
PlaceholderColor="#979797"
ReturnCommand="{Binding SearchCommand}"
InputTransparent="False"
ReturnType="Search"
Text="{Binding SearchText}"
TextChanged="entrySearch_TextChanged"
VerticalOptions="FillAndExpand"
VerticalTextAlignment="Center" />
<Image
Grid.Row="0"
Grid.Column="2"
HeightRequest="15"
HorizontalOptions="Center"
Source="ic_clear_search.png"
VerticalOptions="Center"
WidthRequest="15">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ClearSearchCommand}" NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
</StackLayout>
</Grid>
I try to use the property in many parts of the code
From the docs on InputTransparent
true if neither the element nor its children should receive input and
should, instead, pass inputs to the elements that are visually behind
the current visual element
Your stackLayout is transparent so it’s children, including the Entry, are also transparent
You might be thinking InputTransparent does the opposite of what it actually does. True makes an area effectively invisible to touch; touch goes through it.
If you want an element to be touchable, it has to be "False". BUT all its ancestors must also NOT BLOCK touch.
If you really mean "True", but you have children you want to click on, do this:
<SomeLayoutNameHere InputTransparent="True" CascadeInputTransparent="False" ...>
That allows children to specify whether they can receive touch (InputTransparent=False), or are invisible to touch (=True).
"False" is the default.
When the Label moves to another line, the Grid shifts.
There is a grid with two Columns and two Rows. The left rows are connected. They should have a BoxView with an image, the BoxView creates a border effect. The Image must be centered inside the cell and inside the BoxView, which is also centered. In the right column of the top row, there should be a StackLayout with a Label. When two lines of text are placed in the Label, the left column is shifted from the top. I'm wondering if it's even possible to edit the right part of the grid without affecting the left in any way?
Screenshot
There is no such problem in the video, following the example of which I make.
https://youtu.be/tMdHE4UROFg?t=2631
<ContentPage.Content>
<Grid rainbow:DebugRainbow.ShowColors="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="10" VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
<Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
</Grid>
<Image Source="book_casino" Grid.Row="2"/>
</Grid>
</ContentPage.Content>
Just as Steve implied, if you want to remove the shift when label move to another line, you should set the VerticalOptions of the BoxView to Start.
Code Sample:
<BoxView
x:Name="BookBorderBoxView"
Grid.RowSpan="2"
HeightRequest="218"
HorizontalOptions="Center"
VerticalOptions="Start"
WidthRequest="153"
Color="Red" />
<Image Source="XamarinLogo"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HeightRequest="220"
WidthRequest="133"
HorizontalOptions="Center"
VerticalOptions="Start"
Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAA"
FontSize="18"
FontAttributes="Bold"/>
</StackLayout>
So I dug into the truth, it turns out my problem was the empty bottom row of the grid.
<ContentPage.Content>
<Grid rainbow:DebugRainbow.ShowColors="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="80"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Margin="10" VerticalOptions="Start">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="Red" HeightRequest="218" WidthRequest="153" HorizontalOptions="Center" VerticalOptions="Center" Grid.RowSpan="2"/>
<Image Source="book_casino" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HeightRequest="198" WidthRequest="133" HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFit"/>
<StackLayout Grid.Column="1">
<Label Text="AAAAAAAAAAAAAAAAAAA" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
<Grid>
<StackLayout Grid.Column="1" Grid.Row="1">
<Label Text="aaaaa" FontSize="18" FontAttributes="Bold"/>
</StackLayout>
</Grid>
</Grid>
<Image Source="book_casino" Grid.Row="2"/>
</Grid>
</ContentPage.Content>
I have this code:
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0-->
<StackLayout Grid.Row="0" Grid.Column="0" Padding="0,18,0,0">
<Image Source="male"
WidthRequest ="200"
HeightRequest="165"
TranslationX="5"
TranslationY="10"
HorizontalOptions="LayoutOptions.Center"
VerticalOptions="LayoutOptions.Fill"
Aspect="AspectFit"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Padding="0,15,0,0">
<Image Source="female"
WidthRequest ="160"
HeightRequest="125"
TranslationX="5"
TranslationY="31"
HorizontalOptions="LayoutOptions.Center"
VerticalOptions="LayoutOptions.Fill"
Aspect="AspectFit"/>
</StackLayout>
</Grid>
It looks centered in my designer, but when I run the code in my emulator it does not look centered. This is mostly the answers that I have found when I was searching on how to do it. I dont know If I have missed a certain property.
I am still new in Xamarin and I am still learning on how this works.
If you want to center the image, you could try the code below. Delete padding, TranslationX, TranslationY, add a column, and use the CenterAndExpand for layoutoptions. For better understanding, I use the backgroundcolor of stacklayout to show the results.
You could change the ColumnDefinition to Auto, it works as well.
<Grid Margin="0,0,0,0" VerticalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<!-- EACH IMAGE SHOULD BE CENTERED IN THE GRID 0 AND ROW 0 -->
<StackLayout
Grid.Row="0"
Grid.Column="0"
BackgroundColor="Accent">
<Image
Aspect="AspectFit"
HeightRequest="165"
HorizontalOptions="CenterAndExpand"
Source="dog.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="200" />
</StackLayout>
<StackLayout
Grid.Row="0"
Grid.Column="1"
BackgroundColor="Accent">
<Image
Aspect="AspectFit"
HeightRequest="125"
HorizontalOptions="CenterAndExpand"
Source="pig.jpg"
VerticalOptions="CenterAndExpand"
WidthRequest="160" />
</StackLayout>
</Grid>
I have a problem. I created this ContentPage with the code:
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MyApp.HomePage">
<ContentPage.Content>
<ListView x:Name="ListViewMain" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding EmployeeName}" Grid.Column="1" Grid.Row="0" HorizontalOptions="Start"/>
<Image Source="VoteUp.png" VerticalOptions="End" Grid.Row="1" Grid.Column="0"/>
<Image Source="VoteDown.png" VerticalOptions="Start" Grid.Row="2" Grid.Column="0"/>
<Image Source="{Binding ImageLocation}" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="2" BackgroundColor="AliceBlue" VerticalOptions="Fill" HorizontalOptions="Fill"/>
<Image Source="Favorite.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="Start"/>
<Image Source="Send.png" Grid.Row="3" Grid.Column="1" HorizontalOptions="End"/>
<Image Source="Save.png" Grid.Row="3" Grid.Column="2" HorizontalOptions="End"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
But my result is as following:
However, the result I want to see should look like this:
So just to be clear:
The width of the picture must be 85% of the screen width
The height of the picture must be as large as the picture width, so
that it will be a square
The side next to the picture must be the remaining 15% of the screen
The upper and lower part of the row must be the height of the 15% screen width
Is this somehow possible?
try setting HasUnevenRows property to "True", and binding a list model to the list view, not directly in the Datatemplate
I am trying to create a custom, material-style, card cell in my Xamarin Forms app. I have the appearance pretty much down, but I'm having problems with the image in it. I want it to touch the top and bottom edges, the left hand edge, and be a square sort of shape, while maintaining the aspect ratio. But right now, all I get is this small image that won't play ball:
(I've had to cover the company images with paint, but trust me that they're about that size).
Here's what I actually want (again, please excuse the paint job)
I'm using an image in a grid view, in the 1st column and spanning all 4 rows. I've tried all of the LayoutOptions, which I used to understand but now I'm second guessing myself. I've also tried putting the image in a StackLayout as I thought you can expand children of a Stacklayout, but still no dice. Here is my simplified Xaml right now:
<Frame CornerRadius="10"
Margin="10, 5"
IsClippedToBounds="True"
BackgroundColor="White">
<Grid BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/>
</StackLayout>
<Label Grid.Row="0" Grid.Column="1"
Text="{Binding Favourite.FavKindName}"
FontSize="{DynamicResource InfoLargerTextFontSize}"/>
<Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
VerticalOptions="CenterAndExpand" >
<Image.GestureRecognizers>
<TapGestureRecognizer />
</Image.GestureRecognizers>
</Image>
</Grid>
</Frame>
What's more, you can probably tell I'm pretty clueless about the phone icon on the right. I want that to occupy the centre and be of a decent button size for the card cell.
I've spent hours trying to figure this out. What am I doing wrong?
Frame has a default Padding of 20. That's why you have those margins inside the frame.
<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
CornerRadius="10"
Margin="10, 5"
IsClippedToBounds="True"
BackgroundColor="White">