I' m working in Xamarin forms application ,I'm currently implementing a form contains two parts one is data entering part and other part is a list view Afetr i entered data and saved it should appear in list view ,In debug i checked ListViewUsers.ItemsSource count is not 0 it has values , but listView is not showing in the form .
<ContentPage.Content>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="500"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Grid x:Name="grid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="labelName" Grid.Row="0" Grid.Column="0" Margin="10" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" Text="Name"/>
<Entry x:Name="textName" Grid.Row="0" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Name}" />
<Label x:Name="labelAge" Grid.Row="1" Grid.Column="0" Margin="10" FontSize="6" Text="Age" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAge" Grid.Row="1" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Age}" />
<Label x:Name="labelAddress" Grid.Row="2" Grid.Column="0" Margin="10" FontSize="6" Text="Address" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textAddress" Grid.Row="2" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding Address}" />
<Label x:Name="labelNICNumber" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<Entry x:Name="textNIC" Grid.Row="3" Grid.Column="1" WidthRequest="100" FontSize="6" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" HorizontalTextAlignment="Start" Text="{Binding NIC}" />
<Button Grid.Row="4" Grid.Column="1" HeightRequest = "30" VerticalOptions="CenterAndExpand" HorizontalOptions="Start" FontSize="6" Text="Save" Clicked="UserSaveClick" />
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0">
<Label x:Name="labelNICNumber2" Grid.Row="3" Grid.Column="0" Margin="10" FontSize="6" Text="NIC" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Start" />
<ListView x:Name="ListViewUsers" SeparatorColor="Transparent" HasUnevenRows="True" IsVisible="True" IsEnabled="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="6"
Text="{Binding Name}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="1"/>
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Age}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="2" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding Address}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="3" />
<Label
WidthRequest="20"
HeightRequest="15"
TextColor="Black"
FontFamily="Open Sans"
FontSize="10"
Text="{Binding NIC}"
VerticalOptions="Center"
HorizontalOptions="Start"
Grid.Column="4"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</StackLayout>
Its hard to see whats going on here, however
I have removed the redundant column definition
I have removed the highest level stacklayout, and just used a grid
I have removed the second nested stacklayout and left the grid
I have set both Rows to * in the main grid, just to make sure
Note : if this doesn't work, remove everything except the ListView, just as a sanity check
Xaml
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="grid" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
x:Name="labelName"
Grid.Row="0"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Name"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textName"
Grid.Row="0"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Name}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAge"
Grid.Row="1"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Age"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAge"
Grid.Row="1"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Age}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelAddress"
Grid.Row="2"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="Address"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textAddress"
Grid.Row="2"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding Address}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Label
x:Name="labelNICNumber"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<Entry
x:Name="textNIC"
Grid.Row="3"
Grid.Column="1"
FontSize="6"
HorizontalOptions="Start"
HorizontalTextAlignment="Start"
Text="{Binding NIC}"
VerticalOptions="CenterAndExpand"
WidthRequest="100" />
<Button
Grid.Row="4"
Grid.Column="1"
Clicked="UserSaveClick"
FontSize="6"
HeightRequest="30"
HorizontalOptions="Start"
Text="Save"
VerticalOptions="CenterAndExpand" />
</Grid>
<StackLayout Grid.Row="1">
<Label
x:Name="labelNICNumber2"
Grid.Row="3"
Grid.Column="0"
Margin="10"
FontSize="6"
HorizontalTextAlignment="Start"
Text="NIC"
VerticalOptions="CenterAndExpand" />
<ListView
x:Name="ListViewUsers"
HasUnevenRows="True"
IsEnabled="True"
IsVisible="True"
SeparatorColor="Transparent">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="1"
FontFamily="Open Sans"
FontSize="6"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Name}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="2"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Age}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="3"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding Address}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
<Label
Grid.Column="4"
FontFamily="Open Sans"
FontSize="10"
HeightRequest="15"
HorizontalOptions="Start"
Text="{Binding NIC}"
TextColor="Black"
VerticalOptions="Center"
WidthRequest="20" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
Related
I created a horizontal ScrollView and in it I created a frame. I created a second frame for each column But there was a huge distance between the frame and the frame of each column.
How can I remove the distance between the main frame and the frame of each column ?
The code:
<Frame
BorderColor="Black"
CornerRadius="10"
HasShadow="True"
BackgroundColor="Transparent">
<ScrollView
BackgroundColor="Transparent"
Orientation="Horizontal"
HorizontalOptions="FillAndExpand">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="0"
BorderColor="black"
BackgroundColor="Transparent">
<StackLayout>
<Label x:Name="DayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="0"
Grid.Column="0"
TextColor="#eeff00"/>
<Label x:Name="TempDayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="1"
Grid.Column="0"
TextColor="#eeff00"/>
<Label Text="Min °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="2"
Grid.Column="0"
TextColor="#0025f7"/>
<Label x:Name="MinTempDayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="3"
Grid.Column="0"
TextColor="#0025f7"/>
<Label Text="Max °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="4"
Grid.Column="0"
TextColor="#ff0000"/>
<Label x:Name="MaxTempDayForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="5"
Grid.Column="0"
TextColor="#ff0000"/>
<Image x:Name="IconChanceOf5DaysForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="6"
Grid.Column="0"/>
<Label x:Name="ChanceOf5DaysForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="7"
Grid.Column="0"/>
<Image x:Name="IconWind5DaysForecast1"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="8"
Grid.Column="0"/>
<Label Text="{Binding WeatherDataForecastHourly.List[0].WindForecast.WindForecastValue, StringFormat='{0:0}m/s'}"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="9"
Grid.Column="0"/>
</StackLayout>
</Frame>
<Frame Grid.Column="1"
BorderColor="black"
BackgroundColor="Transparent">
<StackLayout>
<Label x:Name="DayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="0"
Grid.Column="1"
TextColor="#eeff00"/>
<Label x:Name="TempDayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="1"
Grid.Column="1"
TextColor="#eeff00"/>
<Label Text="Min °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="2"
Grid.Column="1"
TextColor="#0025f7"/>
<Label x:Name="MinTempDayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="3"
Grid.Column="1"
TextColor="#0025f7"/>
<Label Text="Max °C"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="4"
Grid.Column="1"
TextColor="#ff0000"/>
<Label x:Name="MaxTempDayForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="5"
Grid.Column="1"
TextColor="#ff0000"/>
<Image x:Name="IconChanceOf5DaysForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="6"
Grid.Column="1"/>
<Label x:Name="ChanceOf5DaysForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="7"
Grid.Column="1"/>
<Image x:Name="IconWind5DaysForecast2"
VerticalOptions="Center"
HorizontalOptions="Center"
Grid.Row="8"
Grid.Column="1"/>
<Label Text="{Binding WeatherDataForecastHourly.List[8].WindForecast.WindForecastValue, StringFormat='{0:0}m/s'}"
VerticalOptions="Center"
HorizontalOptions="Center"
VerticalTextAlignment="Center"
Style="{StaticResource labelStyle}"
FontAttributes="Bold"
Grid.Row="9"
Grid.Column="1"/>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</Frame>
I created 10 rows for 5 columns, but when I put the inner frames and a huge distance appeared.
How can I remove the distance between the main frame and the frame of each column ?
From Grid.ColumnSpacing Property, the space between columns in this Grid layout. The default is 6.
So you can set ColumnSpacing="0" for Grid. It will work fine.
<Grid BackgroundColor="Transparent" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
from the docs
Frame have a default Padding of 20.
StackLayout also has a default spacing value. You will need to play with the padding, margin and spacing values to get the effect you want
I have one grid with two columns and two rows. I have stack layout in the begin and the end of the grid and there into the layout I have 4 labels with Grid.Row[0] Grid.Column[0]...1 and etc.
The code:
<Frame CornerRadius="30"
BackgroundColor="Transparent"
Margin="20,0,20,10"
HeightRequest="100"
BorderColor="Red">
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Temp Now"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="0"/>
<Label x:Name="TempNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="0"/>
<Label Text="Wind Speed"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="1"/>
<Label x:Name="WindSpeedNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
</StackLayout>
</Frame>
The result is:
How to center this Labels ?
use HorizontalTextAlignment="Center" on Label.
<Frame CornerRadius="30"
BackgroundColor="Transparent"
Margin="20,0,20,10"
HeightRequest="100"
BorderColor="Red">
<Grid BackgroundColor="Transparent"
Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Temp Now"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="0"/>
<Label x:Name="TempNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="0"/>
<Label Text="Wind Speed"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="15"
Grid.Row="0"
Grid.Column="1"/>
<Label x:Name="WindSpeedNowLbl"
VerticalOptions="Center"
TextColor="White"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontAttributes="Bold"
FontSize="25"
Grid.Row="1"
Grid.Column="1"/>
</Grid>
</Frame>
I am using the swipe card in the Xamarin form.
The Problem is i am unable to execute the tap event inside the card.
This is my Xaml code --
<swipecards:CardStackView
Grid.Row="0"
x:Name="CardStackView"
ItemsSource="{Binding Cards[0]}"
Swiped="CardStackView_Swiped"
StartedDragging="CardStackView_dragged"
Margin="20"
BackgroundColor="#E0E0E0"
Focused="CardStackView_Focused">
<swipecards:CardStackView.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="1" ColumnSpacing="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Orientation="Horizontal"
Grid.Row="0"
Grid.ColumnSpan="2">
<Label
Text="{Binding .FullJobName}"
HorizontalOptions="Start"
Style="{StaticResource TitleLabel}"/>
<Grid VerticalOptions="Start">
<Image
x:Name="MyImage"
Source="{Binding .CompanyProfImg}"
HorizontalOptions="FillAndExpand"
Aspect="AspectFit" />
<ActivityIndicator
BindingContext="{x:Reference MyImage}"
IsRunning="{Binding IsLoading}}"/>
</Grid>
</StackLayout>
<StackLayout Grid.Row="1" Grid.ColumnSpan="2">
<Label
Text="{Binding .LocationName}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
<Label
Text="{Binding .TotalSalary }"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="2" Grid.ColumnSpan="2">
<Label
Text="Comapny Name"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .CompanyName}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.ColumnSpan="2">
<Label
Text="Key Skills"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .Skills}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="4" Grid.ColumnSpan="2">
<Label
Text="Job Description"
Style="{StaticResource TitleLabel}"
HorizontalOptions="StartAndExpand"/>
<Label
Text="{Binding .Description}"
HorizontalOptions="StartAndExpand"
Style="{StaticResource label_med}"/>
</StackLayout>
<StackLayout Grid.Row="5" Grid.ColumnSpan="2">
<BoxView Color="#DCDCDC" HeightRequest="2" />
<StackLayout Orientation="Horizontal">
<Label
Text="{Binding .Postedby}"
HorizontalOptions="Start"
Style="{StaticResource label_med}"/>
<Image x:Name="More_Option" Source="more.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding TapCommand}"
CommandParameter="Image1"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</StackLayout>
</Grid>
</DataTemplate>
</swipecards:CardStackView.ItemTemplate>
</swipecards:CardStackView>
and ViewModel looks like this--
private ICommand tapCommand;
public ICommand TapCommand
{
get { return tapCommand; }
set
{
OnTapped(this.tapCommand);
}
}
void OnTapped(object s)
{
}
what is wrong with my code?I have also tried the normal approach the normal tap event.but that was not also working.
i am refering this link -- Link
Thank you guys.
I am writing this code, but I can´t see the buttons, only the images. I am usiang xamaring forms in visual studio for a mobile app.I need to see both elements, the buttons in the first row and de images in the second row
<ContentPage.Content>
<ScrollView
Padding="{ StaticResource MainWrapperPadding }">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Grid.Row="0" Text="1" BackgroundColor="#FFE53C25"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="1" Grid.Row="0" Text="2" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="2" Grid.Row="0" Text="3" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Grid.Column="3" Grid.Row="0" Text="4" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<artina:GridOptionsView
x:Name="promotionsList"
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
Padding="2"
ColumnCount="{
artina:OnOrientationInt
PortraitPhone=2,
LandscapePhone=3,
PortraitTablet=3,
LandscapeTablet=4,
PortraitDesktop=4,
LandscapeDesktop=4
}"
VerticalOptions="FillAndExpand">
<artina:GridOptionsView.ItemTemplate>
<DataTemplate>
<local:PromotionItemTemplate HeightRequest="296" />
</DataTemplate>
</artina:GridOptionsView.ItemTemplate>
</artina:GridOptionsView>
</StackLayout>
</Grid>-->
</ScrollView>
</ContentPage.Content>
</ContentPage>
Here i am going to make more easy of your task adding more fields
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="End" Spacing="0" >
<Grid ColumnSpacing="0" RowSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="2" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="0" BackgroundColor="Blue" >
<Button Text="1" BackgroundColor="#FFE53C25"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="2" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="3" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
<Button Text="4" BackgroundColor="#98A4AE"
FontAttributes="Bold" TextColor="White" VerticalOptions="FillAndExpand" />
</StackLayout>
<StackLayout HorizontalOptions="FillAndExpand" Grid.Column="0" Grid.Row="1" BackgroundColor="Red" >
<artina:GridOptionsView
x:Name="promotionsList"
Margin="0"
ColumnSpacing="0"
RowSpacing="0"
Padding="2"
ColumnCount="{
artina:OnOrientationInt
PortraitPhone=2,
LandscapePhone=3,
PortraitTablet=3,
LandscapeTablet=4,
PortraitDesktop=4,
LandscapeDesktop=4
}"
VerticalOptions="FillAndExpand">
<artina:GridOptionsView.ItemTemplate>
<DataTemplate>
<local:PromotionItemTemplate HeightRequest="296" />
</DataTemplate>
</artina:GridOptionsView.ItemTemplate>
</artina:GridOptionsView>
</StackLayout>
</Grid>
</StackLayout>
stack layout with grid rows
here Im getting list of data to which Im assigning it to a listview... In that i need to display user ratings to every Item.. So when the user rating is $.. I need to display 4stars in greeen color and another 1 star in gray color.. Im unable to do this.. Can anyone please tell me
<ListView ItemSource="{Binding Data}">
<ListView.ItemTemplate>
<DataTemplate>
<Frame BackgroundColor="White" Padding="5" >
<Grid Padding="3" BackgroundColor="White" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage HeightRequest="100" Aspect="AspectFill"
LoadingPlaceholder="image_loading.png" ErrorPlaceholder="image_error.png"
Source="{Binding Images}" Grid.Row="0" Grid.Column="0"/>
<!--<StackLayout Grid.Row="1" Grid.Column="0" Orientation="Vertical">
<Label x:Name="Label"
Text="{Binding FileName}" />
<Label Text="uhfuiehuegirtj"/>
<Label Text="ufoidjgoidrjiojkgorij"/>
</StackLayout>-->
<Grid Grid.Row="1" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding CourseName}" FontAttributes="Bold" TextColor="Black" Grid.Row="0" Grid.Column="0" LineBreakMode="WordWrap"/>
<Label Text="{Binding CourseDescription}" TextColor="Black" Grid.Row="1" Grid.Column="0" LineBreakMode="WordWrap"/>
<StackLayout Grid.Row="2" Grid.Column="0" Orientation="Horizontal">
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img1"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img2"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img3"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img4"/>
<Image Source="graystar.png" HeightRequest="20" WidthRequest="20" x:Name="Img5"/>
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" Orientation="Horizontal">
<Label Text="{Binding CoursePrice}" TextColor="Black" HorizontalTextAlignment="Start" FontAttributes="Bold" VerticalTextAlignment="Center"/>
<Button Image="wishlist.png" HorizontalOptions="Fill" BackgroundColor="Transparent" Clicked="btn_clicked"/>
</StackLayout>
</Grid>
</Grid>
</Frame>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
There are plenty of samples and controls out there. You don't really need to do it yourself. Syncfusion offers some nice controls for Xamarin. There is a free Community License too.
I think that's what you want -> https://www.syncfusion.com/products/xamarin