I've been breaking my head on this for a while now and i can't seem to figure out why it keeps saying
"lvwPrice does not exist in this current context"
My Xaml code:
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ProjectCrypto.Views.Overview">
<ContentPage.Content>
<ListView x:Name="lvwOverview" RowHeight="100">
<ListView.ItemTemplate ItemsSource="{Binding Coin}">
<DataTemplate>
<ViewCell>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Text="{Binding Key}" VerticalOptions="Start" />
<Label x:Name="lvwPrice" Grid.Column="2" Text="test" VerticalOptions="Center"/>
<Label Grid.Column="3" Text=">" HorizontalOptions="End" Margin="0,0,16,0" VerticalOptions="Center" TextColor="Black" FontAttributes="Bold"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
My xaml.cs code:
using System.Collections.Generic;
using ProjectCrypto.Repositories;
using Xamarin.Forms;
namespace ProjectCrypto.Views
{
public partial class Overview : ContentPage
{
public Overview()
{
InitializeComponent();
LoadData();
}
private async void LoadData()
{
lvwOverview.ItemsSource = await CryptoRepository.GetCoins();
var Coin = await CryptoRepository.GetCoins();
foreach (var item in Coin)
{
lvwPrice.ItemsSource = await CryptoRepository.GetPrice(item.Key);
}
}
}
}
Is anyone able to help me out on why it doesnt want to detect lvwPrice?
To be able to access templated elements by name and by whatever way you like, create a custom view that will serve You as a cell. And in the cell's code-behind you will be able to access everything by name. Your initial parent list will now look like:
<ListView x:Name="lvwOverview" RowHeight="100">
<ListView.ItemTemplate ItemsSource="{Binding Coin}">
<DataTemplate>
<user:MyViewCell/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Your brand new cell will look like:
XAML:
<?xml version="1.0" encoding="UTF-8"?>
<ViewCell>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label Grid.Column="1" Text="{Binding Key}" VerticalOptions="Start" />
<Label x:Name="lvwPrice" Grid.Column="2" Text="test" VerticalOptions="Center"/>
<Label Grid.Column="3" Text=">" HorizontalOptions="End" Margin="0,0,16,0" VerticalOptions="Center" TextColor="Black" FontAttributes="Bold"/>
</Grid>
</ViewCell>
Good Luck :)
Related
I have a problem.I want to turn off a Group header in SfListView.I read on the forums to turn off IsStickyGroupHeader,I did it but IsStickyGroupHeader="False" does not work.Maybe I understand something wrong.Please help me.Thank you
<syncfusion:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
IsStickyGroupHeader="False"
ItemsSource="{Binding contactsinfo}"
SelectionMode="None">
<syncfusion:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout
Grid.Column="1"
HorizontalOptions="StartAndExpand"
Orientation="Vertical"
VerticalOptions="Center">
<Label
HorizontalOptions="Center"
HorizontalTextAlignment="Center"
LineBreakMode="WordWrap"
Text="{Binding ContactName}"
TextColor="#474747"
VerticalOptions="Center"
VerticalTextAlignment="Center" />
</StackLayout>
</Grid>
<StackLayout BackgroundColor="LightGray" HeightRequest="1" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</syncfusion:SfListView.ItemTemplate>
</syncfusion:SfListView>
You can hide the GroupHeader by using the GroupHeaderSize as 0. Please refer to the following code snippets,
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
ItemSize="40"
GroupHeaderSize="0"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
You can also refer to our user guidance document regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#height-customization
Also, if you are using SfListView.AutoFitMode as Height or DynamicHeight, then the items size will be calculated based on the template elements. Hence, you can customize the GroupHeaderTemplate with Height 0.
<ListView:SfListView
x:Name="listView"
Grid.Row="0"
AutoFitMode="DynamicHeight"
ItemsSource="{Binding ContactsInfo}"
SelectionMode="None">
<ListView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell Height="0"/>
</DataTemplate>
</ListView:SfListView.GroupHeaderTemplate>
Refer the following documentation regarding the same,
UG link: https://help.syncfusion.com/xamarin/listview/grouping#group-header-customization
I am having issues binding the values of a string[] to the DataTemplate of a BindableLayout. I have recreated the issue in the AboutPage of the Shell Flyout Template.
AboutPage.xaml
<ContentPage.BindingContext>
<vm:AboutViewModel />
</ContentPage.BindingContext>
<StackLayout VerticalOptions="Center"
Padding="20"
BindableLayout.ItemsSource="{Binding Data}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label FontSize="Large"
Text="{Binding .}"
BackgroundColor="PowderBlue"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
AboutViewModel.cs
namespace App2.ViewModels
{
public class AboutViewModel : BaseViewModel
{
private string[] _data;
public string[] Data
{
get
{
return _data;
}
set
{
if (_data != value)
{
_data = value;
OnPropertyChanged();
}
}
}
public AboutViewModel()
{
Title = "About";
Data = new string[] { "One", "Two", "Three" };
}
}
}
When the page first opens, the the correct number of labels are there but without any text.
If I edit the Text="{Binding .}" the binding works after Xaml Hot Reload.
Why on earth are the strings not being displayed in the first place when they're clearly not empty or null?
I have solved this problem in an unexpected way. Simply by moving the DataTemplate into its own file, this problem goes away. Can someone please explain to me why this works? My new code produces two StackLayouts side by side, bound to the same data but only the Stackview on the right, with its DataTemplate defined elsewhere as ListItemView.xaml shows the data when the app is run. The StackView on the left has empty Labels at first, then after I delete the full-stop (.) from Text="{Binding .}" and replace it, Xaml Hot Reload runs and the strings are displayed.
ListItemView.xaml
<DataTemplate xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.Views.ListItemView">
<Label FontSize="Large"
Text="{Binding ., Mode=OneWay}"
BackgroundColor="PowderBlue"/>
</DataTemplate>
AboutPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="App2.Views.AboutPage"
xmlns:vm="clr-namespace:App2.ViewModels"
xmlns:views="clr-namespace:App2.Views"
Title="{Binding Title}"
x:DataType="vm:AboutViewModel">
<ContentPage.BindingContext>
<vm:AboutViewModel />
</ContentPage.BindingContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<StackLayout VerticalOptions="Center"
Padding="20"
BindableLayout.ItemsSource="{Binding Data}"
Grid.Column="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Label FontSize="Large"
Text="{Binding ., Mode=OneWay}"
BackgroundColor="PowderBlue"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
<StackLayout VerticalOptions="Center"
Padding="20"
BindableLayout.ItemsSource="{Binding Data}"
Grid.Column="1">
<BindableLayout.ItemTemplate>
<views:ListItemView />
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</ContentPage>
I solved this in a similar way. I did create a separate DataTemplate, but not in its own file. The addition I made was to add an x:DataType attribute.
<DataTemplate x:Key="myLabel" x:DataType="x:String">
<StackLayout>
<Label Text="{Binding .}" />
</StackLayout>
</DataTemplate>
Hoping you can advise as I've tried all methods to bind a picker in a Listview to my item source values using both code-behind and MVVM. The picker binding works outside of the ListView, but not inside - is this out of the box or just not possible?
Please see my list below!
code
<ListView
x:Name="TypesList"
HeightRequest="53"
BackgroundColor="White"
IsGroupingEnabled="True"
IsPullToRefreshEnabled="false"
ItemsSource="{Binding Items}"
IsRefreshing="{Binding IsBusy}"
RefreshCommand="{Binding LoadTypesCommand}"
SeparatorVisibility="None"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell Height="63">
<StackLayout Orientation="Horizontal" VerticalOptions="Center">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<!-- -->
<Label Grid.Column="0"
Grid.Row="0"
VerticalOptions="Center"
FontAttributes="None"
Text="{Binding .Name, Mode=TwoWay} "
TextColor="Black"
VerticalTextAlignment="Center"
Margin="0,15,0,110"
BackgroundColor="White"
Padding="20,10,0,10"
FontFamily="Hiragino Sans"
FontSize="14"
HeightRequest="53"
x:Name="userLabel"
/>
<Entry Grid.Column="1"
Grid.Row="0"
Text="{Binding .Amount, Mode=TwoWay}"
TextColor="Black"
VerticalOptions="EndAndExpand"
Margin="0,15,20,110"
BackgroundColor="White"
FontFamily="Hiragino Sans"
FontSize="14"
HeightRequest="40"
WidthRequest="55"
x:Name="userEntry"
/>
<Picker Grid.Column="2"
Grid.Row="0"
x:Name="mPicker"
ItemsSource="{Binding UserOptions}"
/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
code
Code behind
code
mPicker.ItemsSource = ViewModel.UserOptions;
code
The model allocates UserOptions and this works for a picker outside the listview so I don't believe there is anything wrong with the model or this code needs to be posted.
Any help appreciated!
List view has its own binding context. So you need to get binding context of view model and then bind to picker like this
Set a name of your view like this
<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"
x:Name="viewName">
<Picker Grid.Column="2"
Grid.Row="0"
x:Name="mPicker"
ItemsSource="{Binding BindingContext.UserOptions, Source={x:Reference viewName}}"
/>
In application I have a ListView bound to some data, and it has been grouped.I need a checkbox in group header once the group header checkbox has been selected all the data below a group has to be selected. I have added a checkbox to to the grouping header like
<xFormsListView:SfListView x:Name="SpecialityDiseaseListView"
itemsSource="{Binding SuggestionDiseaseList}"
ItemSize="40" SelectionBackgroundColor="Transparent">
<xFormsListView:SfListView.DataSource>
<dataSource:DataSource>
<dataSource:DataSource.GroupDescriptors>
<dataSource:GroupDescriptor PropertyName="GroupHeading"/>
</dataSource:DataSource.GroupDescriptors>
</dataSource:DataSource>
</xFormsListView:SfListView.DataSource>
<xFormsListView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Padding="10,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Key}" FontSize="18"
VerticalOptions="Center" HorizontalOptions="Start"
Style="{StaticResource LabelProfileStyle}"/>
<buttons:SfCheckBox HorizontalOptions="End" Grid.Column="1"
IsChecked="{Binding IsSelected}"/>
</Grid>
<BoxView HeightRequest=".5" BackgroundColor="Black"
HorizontalOptions="FillAndExpand" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</xFormsListView:SfListView.GroupHeaderTemplate>
<xFormsListView:SfListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand"
Padding="5,0,0,0" BackgroundColor="Transparent">
<buttons:SfCheckBox Text="{Binding DisplayName}" IsChecked="{Binding IsSelected, Mode=TwoWay}" Style="{StaticResource ProfileCheckBoxStyle}"></buttons:SfCheckBox>
</StackLayout>
</ViewCell>
</DataTemplate>
</xFormsListView:SfListView.ItemTemplate>
I would like to make a group header check which I could achieve the desired ability. Can any please suggest a way how I could Implement this.
Thanks in advance.
You can refer the following document for using CheckBox in the SfListView GroupHeader,
CheckBox in SfListView GroupHeader
I would use a CollectionView with SelectionMode of Multiple.
<CollectionView SelectionMode="Multiple" SelectedItems="{Binding SelectedItems}">
<xFormsListView:SfListView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Padding="10,0,15,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Key}" FontSize="18" VerticalOptions="Center"
HorizontalOptions="Start" Style="{StaticResource LabelProfileStyle}"/>
<CheckBox Grid.Column="2" IsChecked="{Binding IsChecked}"/>
</Grid>
<BoxView HeightRequest=".5" BackgroundColor="Black"
HorizontalOptions="FillAndExpand" />
</StackLayout>
</DataTemplate>
</xFormsListView:SfListView.GroupHeaderTemplate>
</CollectionView>
ViewModel:
public ObservableCollection<object> SelectedItems { get; set; } = new ObservableCollection<object>();
The SelectedItems property must be of type ObservableCollection<object> or it won't work. Support for custom objects is coming in Xamarin.Forms 4.6, but it doesn't exist currently. Then the user can select the items they want or you can use a check box to programmatically place items into SelectedItems.
Extend CheckBox to accept a string so you can pass the group name and know which items to place in SelectedItems.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I have a listview with images and i need to have buttons inside the images and a label below the image, I tried with relative and absolute layouts , but dont understand how to do it.
Have some code alredy done, but the buttons do not stay in the centered in relation with the image and before image is loaded the background stays blue.
here is a example:
What have done so far:
Code:
<Grid Padding="0">
<ListView x:Name="CoversListview" SeparatorVisibility="None" ItemsSource="{Binding Covers}" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<!--left, top, right, bottom-->
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<AbsoluteLayout x:Name="ViewLayout" BindingContext="{Binding Item1}" Padding="10,10,0,0" >
<StackLayout Orientation="Vertical" BackgroundColor="#01426A">
<ffimageloading:CachedImage x:Name="CoverShow" Source="test.jpg" LoadingPriority="Highest" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="160" HeightRequest="234" Aspect="AspectFill">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped">
</TapGestureRecognizer>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
</StackLayout>
<AbsoluteLayout x:Name="ViewControls" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<customRenders:MyButton x:Name="ShowButtonFrame" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" CornerRadius="16" FontSize="12" BorderWidth="0" Clicked="Button_OnClicked_ShowItem1"/>
<customRenders:MyButton x:Name="DownButtonFrame" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="0" Text="Download" CornerRadius="16" FontSize="12" BorderWidth="0" Clicked="Button_OnClicked_DownItem1"/>
</Grid>
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
<AbsoluteLayout x:Name="FrameItem" Grid.Column="2" IsVisible="{Binding IsVisible}" BindingContext="{Binding Item2}" Padding="0,10,0,0" >
<StackLayout Orientation="Vertical" BackgroundColor="#01426A">
<ffimageloading:CachedImage x:Name="CoverShow2" Source="test.jpg" LoadingPriority="Highest" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="160" HeightRequest="234" Aspect="AspectFill">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_OnTapped">
</TapGestureRecognizer>
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
<Label Text="Cover Name" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" FontSize="16" LineBreakMode="NoWrap" TextColor="White" FontAttributes="Bold"/>
</StackLayout>
<AbsoluteLayout x:Name="ViewControls2" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<StackLayout Orientation="Vertical" AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="1,1,1,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="36" />
</Grid.RowDefinitions>
<customRenders:MyButton x:Name="ShowButtonFrame3" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="1" Text="Show" VerticalOptions="Center" CornerRadius="16" FontSize="10" BorderWidth="0" Clicked="Button_OnClicked_ShowItem2"/>
<customRenders:MyButton x:Name="DownButtonFrame3" BackgroundColor="#C8DBEF" TextColor="#01426A" ConfigurationItem ="{Binding .}" Grid.Row="0" Text="Download" CornerRadius="16" FontSize="10" HeightRequest="34" BorderWidth="0" Clicked="Button_OnClicked_DownItem2"/>
</Grid>
</StackLayout>
</AbsoluteLayout>
</AbsoluteLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
You should add the TapGestureRecognizer on an Image and attach a Command to it, as given below:
<Grid>
<Image Source="myImage.png">
<Image.GestureRecognizers>
<TapGestureRecognizer
Command="{Binding ImageTapCommand}"
CommandParameter="Id or ImageName or any Parameter goes here" />
</Image.GestureRecognizers>
</Image>
<Button Text="MyButton" IsVisible="{Binding ButtonVisibility, Mode=TwoWay}" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
In Your ViewModel or Model:
private bool _buttonVisibility;
public bool ButtonVisibility
{
get { return _buttonVisibility; }
set { _buttonVisibility = value; OnPropertyChanged(nameof(ButtonVisibility)); }
}
private Command<string> _ImageTapCommand;
public Command<string> ImageTapCommand
{
get
{
return _ImageTapCommand ?? (_ImageTapCommand = new Command<string>((str) => ImageTapCommandExecute(str)));
}
}
void ImageTapCommandExecute(string str)
{
//Here str is whatever you passed with CommandParameter.
//When your Image is tapped, button gets visible
ButtonVisibility = true;
}
This is just a rough code I provided to you for what you want to achieve. May this help you.