I've just started learning Xamarin, I have a problem while creating a listview. I want to create a button below each item in the list so I've seen that Xamarin gives you an option to create a button, MenuItem, but when I display my view it is not showed anywhere. This is the code of the listView, I believe that rest of the code is not necessary but if it is, I will edit.
<ListView x:Name="lvActivities" HasUnevenRows="True"
RelativeLayout.XConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Width, Factor=0,Constant=0}"
RelativeLayout.YConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Height, Factor=0.2,Constant=0}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToView, Property=Width, Factor=1, Constant=0,ElementName=rlAlumnInfo}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent, Property=Height, Factor=0.76, Constant=0}">
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell >
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Text="{Binding title}" FontSize="20" Grid.Row="0" Grid.Column="0" Margin="5,5,5,5" />
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal" Margin="5,5,5,5">
<Label Text="Aula :" FontSize="20"/>
<Label Text="{Binding cRoom}" FontSize="20" Margin="8,0,0,0"/>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Horizontal" Margin="5,5,5,5" Grid.ColumnSpan="2">
<Label Text="Dia :" FontSize="20"/>
<Label Text="{Binding dateHour}" FontSize="20" Margin="8,0,0,0"/>
</StackLayout>
</Grid>
<ViewCell.ContextActions>
<MenuItem Text="Eliminar" Clicked="deleteActivity_Clicked" CommandParameter="{Binding .}"/>
</ViewCell.ContextActions>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Related
I have a listview inside a stacklayout...everything appears find on screen... apart from the picker which is about a cm out from the rest of the row...i have tried changing the height of the rows but to no avail...does anyone know why the picker... '0' isnt on the same horizontal alignment as the rest of the rows such as brandName, size and Price.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<ListView x:Name="WineLV" IsVisible="True" VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding WineL}" HeightRequest="50">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="Transparent" HorizontalOptions="StartAndExpand" Padding="5">
<Frame OutlineColor="Black" Padding="10" BackgroundColor="Transparent">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16*"/>
<ColumnDefinition Width="35*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="15*"/>
<ColumnDefinition Width="19*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Text="{Binding Id}" VerticalOptions="End" IsVisible="False"/>
<controls:CircleImage Grid.Column="0" Grid.Row="0" HeightRequest="60" HorizontalOptions="CenterAndExpand" VerticalOptions="Center" Aspect="AspectFill" WidthRequest="66" Grid.RowSpan="2" Source="{Binding Img}"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding BrandName}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Grapes}" VerticalOptions="Start" FontSize="Medium"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Sizes}" VerticalOptions="Start" FontSize="Medium"/>
<Picker Grid.Column="3" Grid.Row="0" Title=" 0" x:Name="pPicker" HorizontalOptions="EndAndExpand" ItemsSource="{Binding ListQ}" ItemDisplayBinding="{Binding Value}" SelectedIndexChanged="QuantityC" SelectedItem ="{Binding Selected}"/>
<Label Grid.Column="4" Grid.Row="0" VerticalOptions="Start" HorizontalOptions="EndAndExpand" Text="{Binding Price, StringFormat='£{0:0.00}'}" FontSize="Medium"/>
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
all the others have VerticalOptions="Start" - try changing them to Center, and possibly setting VerticalTextAlignment also
In the DataTemplate of a CollectionView I have a Grid, and inside it a Row to which I insert the Height value in Auto. I associate a Label with that Row, but it is not displayed, while if I insert an absolute value in the Row then the text is visible. How could I solve?
<CollectionView
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=140}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,
Property=Width,
Factor=1}"
Margin="10,0">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="9"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<yummy:PancakeView CornerRadius="5">
<RelativeLayout>
<Grid BackgroundColor="LightGray" RowSpacing="0.2">
<Grid.RowDefinitions>
<RowDefinition Height="1"/>
<RowDefinition Height="16"/>
<RowDefinition Height="16"/>
<RowDefinition Height="25"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Grid.ColumnSpan="2" Grid.Row="0" BackgroundColor="{Binding ColoreUmore}"/>
<Image Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Margin="8" Source="{Binding Umore}" VerticalOptions="Start"/>
<Label Grid.Row="1" Grid.Column="1" Text="{Binding GiornoTrascritto}" FontSize="14" TextColor="Black" Opacity="0.7" />
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Orario}" FontSize="14" TextColor="Black" Opacity="0.7" />
<Label Grid.Row="3" Grid.Column="1" Text="{Binding DescrizioneUmore}" FontSize="16" TextColor="{Binding ColoreUmore}" HorizontalTextAlignment="Start"/>
<FlexLayout
Grid.Row="4"
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="17"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<BoxView BackgroundColor="Black" Opacity="0.4" Grid.ColumnSpan="2" Grid.Row="0" CornerRadius="5" />
<Image Grid.Row="0" Grid.Column="0" Source="{Binding isSource}" Margin="3"/>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding id}" TextColor="{Binding ColoreUmore}" FontSize="12" VerticalTextAlignment="Center" Margin="0,0,3,0"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
<BoxView Grid.Row="5" Grid.Column="1" CornerRadius="7" BackgroundColor="Black" Opacity="0.2" Margin="0,0,4,4"/>
THIS-----> <Label Grid.Row="5" Grid.Column="1" TextColor="White" FontSize="16" Text="{Binding Nota}" Margin="5,0,9,0" />
<Image Source="rightArrowB" Grid.Row="1" Grid.Column="1" HorizontalOptions="End" Margin="0,0,10,0" Rotation="90" Opacity="0.4"/>
<Button Grid.Row="1" Grid.Column="1" WidthRequest="70" HeightRequest="21" BackgroundColor="Transparent" Clicked="BtOperazioni"/>
</Grid>
<StackLayout
RelativeLayout.YConstraint="{ConstraintExpression
Type=Constant,
Constant=8}"
RelativeLayout.XConstraint="{ConstraintExpression
Type=Constant,
Constant=200}"
HeightRequest="72"
WidthRequest="90"
IsVisible="{Binding Edit}">
<Button Text="Modifica" BackgroundColor="Blue" Opacity="0.9" CornerRadius="5" TextColor="White" HeightRequest="37" />
<Button Text="Elimina" BackgroundColor="Blue" Opacity="0.9" CornerRadius="5" TextColor="White" Clicked="EliminaDiario" HeightRequest="37" />
</StackLayout>
</RelativeLayout>
</yummy:PancakeView>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
why does the below code have the picture and the labels on different rows...I want them all on the same row in different columns...so keeping the labels where they are in horizontal order ...and moving the image down to the same level
Desired:
Vodka
700ml
Image 13.99
current:
<Grid RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CarouselView ItemsSource="{Binding OffersList}" PeekAreaInsets="20">
<CarouselView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" ItemSpacing="10"/>
</CarouselView.ItemsLayout>
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="30" Margin="20" BackgroundColor="Black" HeightRequest="500">
<StackLayout>
<Image Grid.Column="1" Grid.Row="1" Source="{Binding Img}" WidthRequest="100" HeightRequest="100" Aspect="AspectFit" HorizontalOptions="Start"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End"/>
<Label Grid.Column="2" Grid.Row="1" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" />
<Label Grid.Column="2" Grid.Row="1" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End"/>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
you are not actually using a Grid, you are using a StackLayout
<Grid>
<Grid.ColumnDefintions>
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
<ColumnDefintion Width="25*" />
</Grid.ColumnDefintions>
<Image Grid.Column="0" Grid.Row="0" Source="{Binding Img}" WidthRequest="100" HeightRequest="100" Aspect="AspectFit" HorizontalOptions="Start"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End"/>
<Label Grid.Column="2" Grid.Row="0" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" />
<Label Grid.Column="3" Grid.Row="0" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End"/>
</Grid>
If you want to achieve the layout you want above,you should move the Grid into your <CarouselView.ItemTemplate>,like:
<CarouselView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="30" Margin="20" BackgroundColor="Black" HeightRequest="500">
<StackLayout>
<Grid RowSpacing="25">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Source="{Binding Img}" WidthRequest="100" Aspect="AspectFit" HorizontalOptions="Start" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="0" Text="{Binding Name}" WidthRequest="100" BackgroundColor="Red" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="1" Text="{Binding Des}" WidthRequest="100" BackgroundColor="Blue" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
<Label Grid.Column="1" Grid.Row="2" Text="{Binding FullPrice, StringFormat='£{0:0.00}'}" WidthRequest="100" BackgroundColor="Pink" FontSize="Title" HorizontalOptions="End" VerticalOptions="End"/>
</Grid>
</StackLayout>
</Frame>
</DataTemplate>
</CarouselView.ItemTemplate>
I made a table with xamarin forms, but I would like the headers not to have blank spaces and also put borders, use table-striped, have the basic characteristics of a bootstrap table for example. Could you help me?. Thank you for you help.
Here my code.
<StackLayout BindingContext="{Binding OpportunityListViewModel}" Padding="8">
<ListView x:Name="ProposalListProduct"
ItemsSource="{Binding ProposalView}"
IsRefreshing="{Binding IsRefreshing}"
CachingStrategy="RecycleElement"
HasUnevenRows="True"
Margin="0">
<ListView.Header>
<Grid Margin="0" Padding="0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Margin="0" Text="Item" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
<Label Grid.Row="0" Grid.Column="1" Margin="0" Text="Cant." FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
<Label Grid.Row="0" Grid.Column="2" Margin="0" Text="Precio" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
<Label Grid.Row="0" Grid.Column="3" Margin="0" Text="Total" FontSize="8" TextColor="Black" BackgroundColor="LightGray" HorizontalTextAlignment="Center" HorizontalOptions="Fill" />
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid Margin="0" Padding="0" RowSpacing="0" ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Margin="0" x:Name="Nombre" Text="{Binding Nombre}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="Start" />
<Label Grid.Column="1" Margin="0" x:Name="Cantidad" Text="{Binding Cantidad}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
<Label Grid.Column="2" Margin="0" x:Name="Precio" Text="{Binding Precio,StringFormat='{0:C2}'}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
<Label Grid.Column="3" Margin="0" x:Name="Total" Text="{Binding Total,StringFormat='{0:C2}'}" FontSize="8" TextColor="Black" VerticalTextAlignment="End" HorizontalTextAlignment="End"/>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
you can do it like this:
<ListView ItemsSource="{Binding People}"
HasUnevenRows="True"
SeparatorVisibility="None">
<ListView.Header>
<Frame>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Text="Name"
HorizontalOptions="Center"
FontSize="Large"/>
<Label Grid.Column="1"
Text="Description"
HorizontalOptions="Center"
FontSize="Large"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="2"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</Frame>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="20,10">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Name}"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<Label Grid.Column="1"
Text="{Binding Description}"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<BoxView Grid.Row="1"
Grid.ColumnSpan="2"
HeightRequest="1"
BackgroundColor="LightGray"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentPage.Content>
<ScrollView>
<StackLayout HorizontalOptions="FillAndExpand" Padding="0">
<Label FontSize="Large" Margin="6" HorizontalTextAlignment="Center" Text="Revisión Técnica" HorizontalOptions="Center"></Label>
<BoxView HorizontalOptions="FillAndExpand" HeightRequest="3" Color="Black"></BoxView>
<StackLayout IsVisible="True" Orientation="Horizontal" Padding="0" x:Name="ContainerSec" HorizontalOptions="FillAndExpand">
<StackLayout Padding="0" Spacing="0">
<StackLayout BackgroundColor="LightGray" Padding="0">
<Label Margin="8" VerticalOptions="Center" VerticalTextAlignment="Center" Text="Lista de detalles"></Label>
</StackLayout>
<StackLayout Padding="0" Spacing="0" x:Name="VisualColumnWRP" WidthRequest="{Binding widthCol,Source={x:Reference Pagexaml}}" MinimumWidthRequest="{Binding widthCol,Source={x:Reference Pagexaml}}">
</StackLayout>
</StackLayout>
<BoxView WidthRequest="3" VerticalOptions="FillAndExpand" Color="{StaticResource type2-color}"></BoxView>
<StackLayout Padding="0" Spacing="0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid x:Name="ElGrid" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="0"/>
<RowDefinition x:Name="row1" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row2" Height="Auto"/>
<RowDefinition x:Name="row3" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row4" Height="Auto"/>
<RowDefinition x:Name="row5" Height="Auto"></RowDefinition>
<RowDefinition x:Name="row6" Height="Auto"/>
<RowDefinition Height="0"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Garantía"></Label>
<Label Grid.Row="1" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Garantia"></Label>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Descripción"></Label>
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Description"></Label>
<Label Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="End" Margin="5" Text="Detalle"></Label>
<Label Grid.Row="3" Grid.Column="2" Grid.ColumnSpan="3" HorizontalOptions="Start" Margin="5" x:Name="Detail"></Label>
<StackLayout Orientation="Horizontal" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="5">
<Label Margin="5" Text="Estado"></Label>
<suave:MaterialPicker x:Name="Picker" HorizontalOptions="FillAndExpand" Margin="5"></suave:MaterialPicker>
</StackLayout>
<StackLayout Orientation="Horizontal" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5">
<Label Margin="5" Text="Nota"></Label>
<Editor x:Name="EditorWRP" HeightRequest="100" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
<StackLayout Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="5">
<suave:MaterialButton Clicked="MaterialButton_Clicked" BackgroundColor="LightGray" Text="Agregar evidencia" Margin="5"></suave:MaterialButton>
</StackLayout>
</Grid>
</StackLayout>
</StackLayout>
<Image x:Name="GalleryImage"></Image>
</StackLayout>
</ScrollView>
</ContentPage.Content>
the previous code generate the next screen but is height is a lot bigger than the height of the tablet emulator and I don't know why.
The only way that I solved it was declaring the grid with fix height, but even when the window is big and I checked its height value, turns out to be small. Thank you for your help
You can put your scroll view into absolute layout and set bounds and flags - it should work