I have a ListView in which I have button. And I want to select the ViewCell's data when I click on the button.
Here is my XAML code
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<!--<Image Source="{Binding image, Converter={StaticResource ByteArrayToImage}}" HeightRequest="50" WidthRequest="50" />-->
<StackLayout Padding="6" HorizontalOptions="StartAndExpand">
<Label Text="{Binding strItemName}" FontSize="13"
/>
<Label Text="{Binding numSalePrice, StringFormat='Rs. {0:N}'}" FontSize="11"
TextColor="#da3043" />
</StackLayout>
<Button Text="Add To Cart" WidthRequest="100"
HeightRequest="31"
BackgroundColor="#10c3f2"
FontSize="10"
TextColor="White"
VerticalOptions="Center" Clicked="Button_Clicked" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I don't want to work with ViewCellTap, I need to get the ViewCell's data from the button inside the ListView.
you can bind the data to CommandParameter
<Button CommandParameter="{Binding .}" ...
then in your event handler
protected void Button_Clicked(object sender, EventArgs a)
{
// assuming your data is a type MyClass
var item = (MyClass)((Button)sender).CommandParameter;
// now you can ref item.strItemName, item.numSalePrice, etc
}
Related
Quick question:
Is the TableView in Xamarin.Forms supposed to be all grey like below picture? I was expecting a layout similar to what I'm getting, but with white backgrounds for individual TableSections.
Is this because of iOS 14, something I'm doing wrong or maybe the simulator? I'm also experiencing lack of DatePicker and TimePicker support - works on android but not on iPhone simulator, and I was told this issue was the simulator.
I haven't been able to test it on a real device.
I'm posting my code for the Tableview XAML below.
XAML code
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
Title="{Binding FullName}"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ContactBook.ContactsDetailPage">
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Personal Info">
<EntryCell Label="First Name" Text="{Binding FirstName}" Keyboard="Text" />
<EntryCell Label ="Last Name" Text="{Binding LastName}" Keyboard="Text"/>
</TableSection>
<TableSection Title="Contact Info">
<EntryCell Label="Phone" Text="{Binding Phone}" Keyboard="Telephone"/>
<EntryCell Label="Email" Text="{Binding Email}" Keyboard="Email" />
</TableSection>
<TableSection Title="Other">
<SwitchCell Text="Blocked" On="{Binding IsBlocked}" />
</TableSection>
<TableSection>
<ViewCell>
<Button Text="Save" HorizontalOptions="FillAndExpand" Clicked="Button_Clicked"/>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</ContentPage>
You could use ViewCell and StackLayout to achieve that, becuause xxxCell not contain a BackgroundColor pproperty.
For example, code as follows:
<TableSection Title="Contact Info">
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Phone" VerticalOptions="Center"/>
<Entry Text="Binding Phone" HorizontalOptions="FillAndExpand" Keyboard="Telephone"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Email" VerticalOptions="Center" />
<Entry Text="Binding Email" HorizontalOptions="FillAndExpand" Keyboard="Email" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection Title="Other" >
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="15,0,0,0" Text="Blocked" VerticalOptions="Center"/>
<Switch Margin="280,0,0,0" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection>
<ViewCell>
<StackLayout BackgroundColor="White">
<Button Text="Save"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
The effect:
TableView has a BackgroundColor property that lets you set the background color you want. So if you want it to match the rest of your page, you can do
<TableView Intent="Form" BackgroundColor="White">
First I'd like to mention that I'm no professional at Xamarin.
The problem I'm currently facing occured after using a custom renderer to achieve a transparent master detail page on my xamarin.ios project, after achieving this, I noticed that I now have a grey border on the outside of my master detail page, I tried accessing it throught a couple properties, but none seem to work.
Here's the customer renderer code
public override void ViewWillLayoutSubviews()
{
base.ViewWillLayoutSubviews();
var master = ViewControllers[0];
master.View.BackgroundColor = UIColor.Clear;
var detail = ViewController.ChildViewControllers[1];
}
Here's my xaml code used for the design of the side menu:
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage
x:Class="LoyaltyWorx.SideMenu"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
xmlns:local="clr-namespace:LoyaltyWorx.MarkupExtensions; assembly=LoyalyWorx"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
<MasterDetailPage.Master>
<ContentPage Title="Menu" BackgroundColor="Transparent">
<StackLayout Orientation="Vertical" BackgroundColor="Transparent" Spacing="0">
<StackLayout
HorizontalOptions="Fill"
Orientation="Horizontal"
VerticalOptions="Fill" BackgroundColor="Black" Padding="50, 50, 50, 50" >
<StackLayout HorizontalOptions="Center" Orientation="Vertical">
<ffimageloading:CachedImage x:Name="ProfilePictureCircleImage"
LoadingPlaceholder="profile_image_placeholder.png"
ErrorPlaceholder="profile_image_placeholder.png"
DownsampleToViewSize="true"
FadeAnimationEnabled="true"
HeightRequest="65"
WidthRequest="65">
<ffimageloading:CachedImage.Transformations>
<fftransformations:CircleTransformation/>
</ffimageloading:CachedImage.Transformations>
</ffimageloading:CachedImage>
</StackLayout>
<StackLayout
HorizontalOptions="CenterAndExpand"
Orientation="Vertical"
VerticalOptions="CenterAndExpand">
<Label
x:Name="FullNameLabel"
FontSize="18"
HorizontalOptions="Center"
TextColor="White"
VerticalOptions="CenterAndExpand" />
</StackLayout>
</StackLayout>
<BoxView HeightRequest="2" BackgroundColor="#D90B31"/>
<ListView
x:Name="NavigationMenuItems"
ItemSelected="OnMenuItemSelected"
BackgroundColor="{StaticResource TileColour}"
RowHeight="60"
SeparatorVisibility="None"
SeparatorColor="Transparent"
Margin="0">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Main design for menu items -->
<StackLayout
Padding="20,10,0,10"
Orientation="Horizontal"
Spacing="20"
VerticalOptions="FillAndExpand"
BackgroundColor="Transparent">
<local:TintedCachedImage TintColor="{StaticResource SideMenuIconColor}"
Source="{Binding Icon}"
VerticalOptions="Center"
DownsampleToViewSize="true"
HeightRequest="19"
WidthRequest="19"/>
<Label
FontSize="15"
Text="{Binding Title}"
TextColor="{StaticResource SideMenuTextColor}"
VerticalOptions="Center" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage />
</MasterDetailPage.Detail>
</MasterDetailPage>
Please assist.
I have a problem with Entry and ListView in Xamarin Forms. On Android, it works perfectly but on IOS when Focus is set on Entry, ListView will be moved up like on the image:
I tried to use a render:
How do I keep the keyboard from covering my UI instead of resizing it?
but it didn't solve a problem, in my case because I need ListView moved not the whole page! I also found that this was a known issue:
https://bugzilla.xamarin.com/show_bug.cgi?id=45336
https://www.youtube.com/watch?v=1xwDRT_CnoM&feature=youtu.be
Any suggestions how to turn off moving elements when the keyboard is activated?
And I need Focus set to true in this case!
The code in XAML is next:
<myControls:MyEntry Grid.Row="0" Style="{DynamicResource EntryControlStyle}"
x:Name="CityEntry" AutomationId="SearchCityEntry"
Placeholder="{Binding TravelType, Converter={StaticResource LanguageConverter}, Mode=OneWay}"
Text="{Binding Path=SearchQuery}" />
<myControls:MyListControl
Grid.Row="1"
SeparatorVisibility="None"
HasUnevenRows="True"
IsRefreshing="{Binding IsRefreshing}"
RefreshCommand="{Binding RefreshCommand}"
x:Name="SelectCity"
ItemsSource="{Binding Path=SearchResults}"
SelectedItem="{Binding SelectedCity}">
<myControls:MyListControl.ItemTemplate>
<DataTemplate>
<ViewCell>
<ContentView BackgroundColor="White">
<Grid Margin="10,10,0,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.4*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" HorizontalOptions="Start"
VerticalOptions="Start">
<Image HorizontalOptions="Start" VerticalOptions="Start"
Source="{Binding LocationSource,Converter={StaticResource LocationSourceEnumToImageConverter} }" />
</StackLayout>
<Label Grid.Column="1" AutomationId="SearchCityList"
HorizontalOptions="StartAndExpand"
Text="{Binding Path=Name, Mode=TwoWay}"
Style="{DynamicResource EntryControlStyle}" />
</Grid>
</ContentView>
</ViewCell>
</DataTemplate>
and code behind:
protected override void OnAppearing()
{
base.OnAppearing();
CityEntry.Focus();
}
protected override void OnDisappearing()
{
CityEntry.Unfocus();
base.OnDisappearing();
}
protected override bool OnBackButtonPressed()
{
CityEntry.Unfocus();
return base.OnBackButtonPressed();
}
I'm building a Xamarin Forms application and am trying to reference the binding context of a parent control from a DataTemplate:
<flv:FlowListView Grid.Row="3" x:Name="abc"
Grid.Column="0"
Grid.ColumnSpan="2"
FlowColumnCount="3"
SeparatorVisibility="None"
HasUnevenRows="true"
FlowItemsSource="{Binding ProductPackageBatch}"
FlowLastTappedItem="{Binding LastTappedItem}"
FlowItemTappedCommand="{Binding ItemTappedCommand}">
<flv:FlowListView.FlowColumnTemplate>
<DataTemplate>
<StackLayout Margin="5, 10, 10, 5">
<StackLayout.Children>
<Frame Padding="2"
OutlineColor="{DynamicResource ProductGridImageBorderColor}"
HasShadow="False"
BackgroundColor="{DynamicResource ProductGridBackgroundColor}">
<Image Aspect="AspectFit"
WidthRequest="100"
Source="{Binding ImageBase64, Converter={StaticResource Base64ToImageConverter}}">
<Image.HeightRequest>
<OnPlatform x:TypeArguments="x:Double"
iOS="100"
Android="150" />
</Image.HeightRequest>
</Image>
</Frame>
<Label Style="{StaticResource ProductGridName}"
Text="{Binding Name}" />
<Label Style="{StaticResource ProductGridFormattedPrice}"
Text="{Binding FormattedPrice}"
FontAttributes="Bold" />
<Button BackgroundColor="{DynamicResource BuyButtonColor}"
TextColor="{DynamicResource TextColor}"
BorderRadius="0"
Margin="5, 0, 5, 0"
VerticalOptions="End"
Text="Buy"
Command="{Binding Source={x:Reference abc}, Path=BindingContext.AddToUserCartCommand}"
CommandParameter="{Binding .}" />
</StackLayout.Children>
</StackLayout>
</DataTemplate>
</flv:FlowListView.FlowColumnTemplate>
</flv:FlowListView>
There is an event called on AddToUserCartCommand that I want to call from a button in the FlowListView. I've tried a few different ways to reference the control, but the method never gets called. The following button sits outside this control and works ok:
<Button Grid.Row="4"
Margin="30"
BackgroundColor="{DynamicResource BuyButtonColor}"
TextColor="{DynamicResource TextColor}"
BorderRadius="0"
Text="Add to Cart"
Command="{Binding AddToUserCartCommand}"
CommandParameter="{Binding ProductPackage.Id}" />
Can anyone help explain what I'm doing wrong?
Set the correct binding context of the Command and CommandParamter:
<Button BackgroundColor="{DynamicResource BuyButtonColor}"
BindingContext="{x:Reference Name=abc}"
TextColor="{DynamicResource TextColor}"
BorderRadius="0"
Margin="5, 0, 5, 0"
VerticalOptions="End"
Text="Buy"
Command="{Binding Path=BindingContext.AddToUserCartCommand}"
CommandParameter="{Binding Path=BindingContext.ProductPackage.Id}" />
I'm trying to make a ListView with clickable rows. When you click on a row it sets a child stacklayout to visibility true. This works fine in android, but not in ios. Maybe I'm doing it the wrong way. I am still a beginner, any idea how to fix this or any other better approach?
The problem is that it opens on ios so the visibility changes, but it does not update the height of the cell. The cell updates off-screen for example if you scroll up until you can't see the opened cell anymore and then scroll back down. You'll see it has updated the height.
I tried using a custom renderer, but i have no idea where to start.
This is my xaml:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Lisa.Excelsis.Mobile.AssessmentPage" xmlns:local="clr-namespace:Lisa.Excelsis.Mobile;assembly=Lisa.Excelsis.Mobile">
<StackLayout>
<local:SpecialListView x:Name="CategoryList"
ItemsSource = "{Binding Categories}"
HasUnevenRows="true"
RowHeight="-1"
GroupDisplayBinding="{Binding Name}"
IsGroupingEnabled="true">
<local:SpecialListView.ItemTemplate>
<DataTemplate>
<ViewCell x:Name="ObservationCell">
<ViewCell.View>
<StackLayout x:Name="ObservationContainer"
HorizontalOptions="FillAndExpand"
Orientation="Vertical"
VerticalOptions="StartAndExpand"
BackgroundColor="White">
<StackLayout x:Name="Observation"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Padding="15, 10, 10, 10"
BackgroundColor="White">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="OpenItem"/>
</StackLayout.GestureRecognizers>
<Grid HorizontalOptions="FillAndExpand" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label x:Name="ObservationOrder"
Text="{Binding Criterion.Order, StringFormat='{0}.'}"
FontSize="18"
VerticalOptions="StartAndExpand"
Grid.Column="0" Grid.Row="0"/>
<Label x:Name="ObservationTitle"
Text="{Binding Criterion.Title}"
FontSize="18"
VerticalOptions="StartAndExpand"
Grid.Column="1" Grid.Row="0"/>
</Grid>
</StackLayout>
<StackLayout x:Name="ObservationButtons"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
BackgroundColor="White"
IsVisible="false"
Padding="0, 0, 0, 20"
ClassId = "{Binding Id, StringFormat='ObservationButtons_{0}'}">
<Grid HorizontalOptions="Center"
Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0" Grid.Row="0" >
<Image Source="yesnobutton0.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
x:Name="yesImage">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetYesImage"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Ja" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Grid.Column="1" Grid.Row="0">
<Image Source="yesnobutton0.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
x:Name="noImage">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetNoImage"/>
</Image.GestureRecognizers>
</Image>
<Label Text="Nee" VerticalOptions="End" HorizontalOptions="Center"/>
</StackLayout>
<Image Source="maybenot.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="3" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="skip.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="4" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="unclear.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="5" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
<Image Source="change.png"
HeightRequest="60" WidthRequest="60"
HorizontalOptions="Center"
VerticalOptions="Start"
Grid.Column="6" Grid.Row="0">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="SetMark"/>
</Image.GestureRecognizers>
</Image>
</Grid>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</local:SpecialListView.ItemTemplate>
</local:SpecialListView>
</StackLayout>
This is an example of how it works on android and how i want it to work on ios.
I reproduced your Problem in a small Testproject. I prefer doing layout changes via data binding, instead of code behind.
Let's start with the Template:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App6.Page1">
<ListView x:Name="CategoryList"
BackgroundColor="Gray"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedItem}"
HasUnevenRows="true"
RowHeight="-1">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell x:Name="ObservationCell">
<ViewCell.View>
<StackLayout x:Name="Observation"
HorizontalOptions="FillAndExpand"
VerticalOptions="StartAndExpand"
Padding="15, 10, 10, 10"
BackgroundColor="White">
<Label x:Name="ObservationTitle"
Text="{Binding Title}"
FontSize="18"
TextColor="Black"
VerticalOptions="StartAndExpand"/>
<StackLayout Orientation="Horizontal" IsVisible="{Binding IsSelected}">
<Image BackgroundColor="Fuchsia" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Green" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Yellow" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Blue" WidthRequest="40" HeightRequest="40"></Image>
<Image BackgroundColor="Black" WidthRequest="40" HeightRequest="40"></Image>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
The Datatemplate is basicaly the same, but:
the StackLayout has no Click-Listener
the Visbility of the StackLayout is bound to IsSelected (IsVisible="{Binding IsSelected}")
the SelectedItem of the ListView is bound to SelectedItem of our ViewModel
Our Page just sets the ViewModel as DataContext
public partial class Page1 : ContentPage
{
public Page1()
{
InitializeComponent();
BindingContext = new Page1ViewModel();
}
}
The ViewModel
implements INotifyPropertyChanged to notify the view about data changes
adds some dummy items to our Categories Collection
has a SelectedItem property that updates the IsSelected property of the Categories
class Page1ViewModel : INotifyPropertyChanged
{
private Category _selectedItem;
private ObservableCollection<Category> _categories = new ObservableCollection<Category>();
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<Category> Categories
{
get { return _categories; }
set
{
_categories = value;
OnPropertyChanged();
}
}
public Category SelectedItem
{
get { return _selectedItem; }
set
{
if (_selectedItem == value)
return;
if (_selectedItem != null)
{
_selectedItem.IsSelected = false;
}
_selectedItem = value;
if (_selectedItem != null)
{
_selectedItem.IsSelected = true;
}
}
}
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public Page1ViewModel()
{
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
Categories.Add(new Category());
}
}
Last, but not least, but most important, you need a tiny custom renderer that overwrites the default one. We call ReloadData() if the SelectedItem has changed.
[assembly: ExportRenderer(typeof(ListView), typeof(MyListViewRenderer))]
namespace App6.iOS.CustomRenderer
{
public class MyListViewRenderer : ListViewRenderer
{
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (e.PropertyName == ListView.SelectedItemProperty.PropertyName)
{
Device.BeginInvokeOnMainThread(() => Control.ReloadData());
}
}
}
}
Result