Hi I'm new to Xamarin and currently I have a project that requires me to display something like image below
I already have a list of the items, and inside the list i have another list inside every item that contain "actualwork" and "plannedwork". But i dont know how to present i that way.
So i have a list that contain a list. And i want to display it like in the image. Any idea?
Thank you in advance
<StackLayout HorizontalOptions="FillAndExpand">
<ListView
Footer=" "
HasUnevenRows="True"
HeightRequest="{Binding WeekHeight}"
ItemsSource="{Binding WeekReports}"
SeparatorVisibility="None">
<ListView.HeaderTemplate>
<DataTemplate>
<ContentView BackgroundColor="Beige">
<Grid Padding="0"
HeightRequest="70"
HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Sun" Grid.Column="1"/>
<Label Text="Mon" Grid.Column="2"/>
<Label Text="Tue" Grid.Column="3"/>
<Label Text="Wed" Grid.Column="4"/>
<Label Text="Thu" Grid.Column="5"/>
<Label Text="Fir" Grid.Column="6"/>
<Label Text="Sat" Grid.Column="7"/>
</Grid>
</ContentView>
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell IsEnabled="False">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Work}" Grid.Column="0"/>
<Label Text="{Binding Value1}" Grid.Column="1"/>
<Label Text="{Binding Value2}" Grid.Column="2"/>
<Label Text="{Binding Value3}" Grid.Column="3"/>
<Label Text="{Binding Value4}" Grid.Column="4"/>
<Label Text="{Binding Value5}" Grid.Column="5"/>
<Label Text="{Binding Value6}" Grid.Column="6"/>
<Label Text="{Binding Value7}" Grid.Column="7"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
ItemSource Model Would be like this:
public class Report{
public string Work { get; set; }
public string value1 { get; set; }
public string value2 { get; set; }
public string value3 { get; set; }
public string value4 { get; set; }
public string value5 { get; set; }
public string value6 { get; set; }
public string value7 { get; set; }
}
Related
I have a XAML page with a listview. What I want to do is when the value of the first column "NumType" equals "S" the background colour for that row is set to a different colour.
I have been looking at using DataTriggers, but I'm not sure if this is the way to go.
Below is the code that I currently have.
?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MobileWarehouseXamarin.Controls"
xmlns:ef="clr-namespace:MobileWarehouseXamarin.Effects"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="MobileWarehouseXamarin.Controls.MW_AdjustmentsAwaiting_0"
xmlns:vm="clr-namespace:MobileWarehouseXamarin.ViewModels;assembly=MobileWarehouseXamarin"
x:Name="this"
RowSpacing="0"
ColumnSpacing="0"
Padding="5,0,5,0">
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="*" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<!--<ColumnDefinition Width="300"/>-->
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Text="Location" Style="{StaticResource KeyValueSmall_Key}" />
<Label Grid.Column="1" Text="Barcode" Style="{StaticResource KeyValueSmall_Key}" />
<Label Grid.Column="2" Text="User" Style="{StaticResource KeyValueSmall_Key}" />
<Label Grid.Column="3" Text="Date" Style="{StaticResource KeyValueSmall_Key}" />
<!--<TextBlock Grid.Column="4" Text="Reason" Style="{StaticResource TextBlockLabel}" />-->
</Grid>
<ListView Grid.Row="1" x:Name="gridViewAwaitingAdjustmentDetails" ItemsSource="{Binding AwaitingAdjustment}" SelectedItem="{Binding SelectedAdjustment, Mode=TwoWay}" >
<!--Style="{StaticResource ListViewItemHighlighted}">-->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<!--<ColumnDefinition Width="300" />-->
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding NumType}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="0" Text="{Binding LocationCode}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Text="{Binding Barcode}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding UserName}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Text="{Binding PickingAdjustementDate}" Style="{StaticResource KeyValueSmall_Value}" Margin="0,0,0,0" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Any thoughts or suggestions would be very much appreciated
I have looked at using the DataTrigger, but not sure how to go about it or would I be better off looking at Template Selectors?
There are several ways to achieve this.
A simple method is to add a field to the item of your ListView and bind it to the BackgroundColor of the item, for example:
public Color BgColor { get; set; } = Color.Yellow;
I created a simple demo and achieved this function,you can refer to the following code:
Item.cs
public class Item: INotifyPropertyChanged
{
public Color BgColor { get; set; } = Color.Yellow;
private string _numType;
public string NumType
{
get => _numType;
set
{
SetProperty(ref _numType, value);
setBgColor();// set BgColor
}
}
private void setBgColor()
{
if (NumType != null && NumType.Equals("S")) {
BgColor = Color.Green;
}
}
public string LocationCode { get; set; }
public string Barcode { get; set; }
public string UserName { get; set; }
public string PickingAdjustementDate { get; set; }
bool SetProperty<T>(ref T storage, T value, [CallerMemberName] string propertyName = null)
{
if (Object.Equals(storage, value))
return false;
storage = value;
OnPropertyChanged(propertyName);
return true;
}
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public event PropertyChangedEventHandler PropertyChanged;
}
MyViewModel.cs
public class MyViewModel
{
public ObservableCollection<Item> Items { get; set; }
public MyViewModel() {
Items = new ObservableCollection<Item>();
Items.Add( new Item { NumType = "S" , LocationCode = "0001"});
Items.Add(new Item { NumType = "M", LocationCode = "0002" });
Items.Add(new Item { NumType = "L", LocationCode = "0003" });
}
}
MainPage.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"
xmlns:xamlistviewapp131="clr-namespace:XamListViewApp131"
x:Class="XamListViewApp131.MainPage">
<ContentPage.BindingContext>
<xamlistviewapp131:MyViewModel></xamlistviewapp131:MyViewModel>
</ContentPage.BindingContext>
<StackLayout>
<ListView Grid.Row="1" x:Name="gridViewAwaitingAdjustmentDetails" ItemsSource="{Binding Items}" >
<!--Style="{StaticResource ListViewItemHighlighted}">-->
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid BackgroundColor="{Binding BgColor}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="80"/>
<!--<ColumnDefinition Width="300" />-->
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding NumType}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="0" Text="{Binding LocationCode}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Text="{Binding Barcode}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="2" Text="{Binding UserName}" Margin="0,0,0,0" />
<Label Grid.Row="0" Grid.Column="3" Grid.RowSpan="2" Text="{Binding PickingAdjustementDate}" Margin="0,0,0,0" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
i have a nested List Object and i want to bind them to the list all my data is proper also i have implemented INotifyChanged Event but the data on the UI Is not displays
here is my Xaml UI
<ListView x:Name ="lstView" Margin="0,5,0,5" VerticalScrollBarVisibility="Always" HasUnevenRows="True" VerticalOptions="FillAndExpand" ItemsSource="{Binding Grouped}" IsGroupingEnabled="true" SelectionMode="None" SeparatorVisibility="None" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<Grid Margin="5,20,0,0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="95*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="radiochecked.png" VerticalOptions="End" />
<Frame Grid.Column="1" HasShadow="False" HorizontalOptions="Start" Padding="6,2,6,2" BackgroundColor="#608EF6">
<Label Text="{Binding LongName}" TextColor="White" VerticalTextAlignment="Center" ></Label>
</Frame>
</Grid>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Margin="5,0,10,0" HorizontalOptions="FillAndExpand" RowSpacing="0" VerticalOptions="FillAndExpand" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="95*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="10"/>
<RowDefinition Height="70"/>
</Grid.RowDefinitions>
<BoxView
Grid.Column="0" Grid.Row="0"
BackgroundColor="#566781"
HorizontalOptions="Center"
VerticalOptions="Fill"
WidthRequest="2" />
<Image Grid.Column="0" Grid.Row="1" Source="radiochecked.png" />
<BoxView
Grid.Column="0" Grid.Row="2"
BackgroundColor="#566781"
HorizontalOptions="Center"
VerticalOptions="Fill"
WidthRequest="2" />
<Frame Grid.Column="1" Grid.Row="0" HasShadow="False" Grid.RowSpan="3" Padding="0,0,2,0" Margin="0,10,0,5" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" VerticalOptions="FillAndExpand">
<BoxView BackgroundColor="{Binding EncounterFrameColor}" WidthRequest="3"></BoxView>
<Grid Margin="0,8,0,0" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="30"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Spacing="0" Grid.Column="0">
<Label Text="{Binding EncounterMonth}" Margin="3,1,0,0" FontSize="10" TextColor="Black" VerticalOptions="Start" HorizontalOptions="Start"></Label>
<Label Text="{Binding MDate}" Margin="3,2,0,0" FontSize="15" TextColor="Black" FontAttributes="Bold" HorizontalTextAlignment="Center" VerticalOptions="Start" HorizontalOptions="Start"></Label>
</StackLayout>
<StackLayout Grid.Column="2" VerticalOptions="Start" Grid.Row="0" HorizontalOptions="FillAndExpand">
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding EncounterImage}" Margin="0,2,0,0" VerticalOptions="Start" Grid.Row="0" Grid.Column="0"/>
<Label Text="{Binding Encounter}" TextColor="Black" FontSize="12" Grid.Row="0" VerticalOptions="Start" Grid.Column="1" ></Label>
<StackLayout Margin="0,0,0,5" Spacing="0" BindableLayout.ItemsSource="{Binding UserVitals}" Grid.Row="1" Grid.Column="1" >
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding Description}" Grid.Column="0" FontSize="10" TextColor="Black" />
<Label Text="{Binding Values}" HorizontalOptions="Start" Grid.Column="2" FontSize="10" TextColor="Black"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</Grid>
</StackLayout>
</Grid>
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
i am trying to create Grouping Listview Which is grouping with the Year
here is my Model
public class EncounterFrameModel
{
public string EncounterMonth { get; set; }
public string MDate { get; set; }
public string Comment { get; set; }
// public bool IsReallyAVeggie { get; set; }
public string EncounterFrameColor { get; set; }
public string Image { get; set; }
public string Encounter { get; set; }
// public List<TotalItem> Totals { get;set; }
public string EncounterImage { get; set; }
public ObservableCollection<UserHealthDetails> UserVitals { get; set; }
public EncounterFrameModel()
{
}
}
public class UserHealthDetails
{
public string Description { get; set; }
public string Values { get; set; }
}
public class EncounteredYear
{
public EncounteredYear()
{
encounterFrameModels = new ObservableCollection<EncounterFrameModel>();
}
public string LongName { get; set; }
public string ShortName { get; set; }
public ObservableCollection<EncounterFrameModel> encounterFrameModels { get; set; }
}
can any one help me in binding this data
you could try this:
change your EncounteredYear model like this:
class EncounteredYear:ObservableCollection<EncounterFrameModel>
{
public string LongName { get; set; }
public string ShortName { get; set; }
}
in your page.xaml.cs set your data(Generate data according to your own situation):
ObservableCollection<EncounteredYear> grouped = new ObservableCollection<EncounteredYear>();
var gounp1 = new EncounteredYear() {...};
var gounp2 = new EncounteredYear() {...};
var gounp3 = new EncounteredYear() {...};
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp1.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp2.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
gounp3.Add(new EncounterFrameModel() {...});
grouped.Add(gounp1);
grouped.Add(gounp2);
grouped.Add(gounp3);
lstView.ItemsSource = grouped;// bind the list of the grouplist
then you page's xaml as your before but delete ItemsSource="{Binding Grouped}" and must add <ViewCell> inside <DataTemplate>:
<ListView x:Name ="lstView" Margin="0,5,0,5" VerticalScrollBarVisibility="Always" HasUnevenRows="True" VerticalOptions="FillAndExpand" IsGroupingEnabled="true" SelectionMode="None" SeparatorVisibility="None" GroupDisplayBinding="{Binding LongName}" GroupShortNameBinding="{Binding ShortName}">
<ListView.GroupHeaderTemplate>
<DataTemplate>
<ViewCell>
...
</ViewCell>
</DataTemplate>
</ListView.GroupHeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
...
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I remove the row Comment is on if its null or empty string?
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding EntryDate}" Grid.Column="0" Grid.Row="0"></Label>
<Label Text="{Binding Sleep}" Grid.Column="1" Grid.Row="0"></Label>
<Label Text="{Binding Comment}" Grid.Column="0" Grid.ColumnSpan="4"
Grid.Row="1"></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
This is the appropriate case to use a ValueConverter.
All you need to do is create a converter like this:
namespace App.Converters
{
public class TextToBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if(value != null)
if (!(value is string)) return true;
return string.IsNullOrWhiteSpace(value as string) ? false : true;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
And use it on the IsVisible property of Label:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:converters="clr-namespace:App.Converters"
x:Class="App.Views.SamplePage">
<ContentPage.Resources>
<ResourceDictionary>
<converters:TextToBoolConverter x:Key="TextToBoolConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding EntryDate}" Grid.Column="0" Grid.Row="0"></Label>
<Label Text="{Binding Sleep}" Grid.Column="1" Grid.Row="0"></Label>
<Label Text="{Binding Comment}" Grid.Column="0" Grid.ColumnSpan="4"
Grid.Row="1"
IsVisible={Binding Comment, Converter={StaticResource TextToBoolConverter}}/>
</Grid>
</ContentPage>
Thus you can reuse it wherever you need.
Your model:
public class MyModel
{
//...other properties ...
public string Comment { get; set; }
public bool HasComment => !string.IsNullOrEmpty(Comment);
}
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding EntryDate}" Grid.Column="0" Grid.Row="0"></Label>
<Label Text="{Binding Sleep}" Grid.Column="1" Grid.Row="0"></Label>
<Label Text="{Binding Comment}" Grid.Column="0" Grid.ColumnSpan="4"
Grid.Row="1" IsVisible = {Binding HasComment}></Label>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
I want nested list view like below in xamarin forms
I am using XAML and wants to bind using MVVM
My model as below
public class LineItemTaxDto
{
public int InvoiceLineItemId { get; set; }
public int InvoiceId { get; set; }
public int TaxId { get; set; }
public decimal TaxRate { get; set; }
public decimal TaxAmount { get; set; }
public string TaxName { get; set; }
public ObservableCollection<LineItemTaxDto> SubTaxes { get; set; }
}
In this Group tax is my main taxname and it contains sub taxes (VAT, GST).
EDIT
My xaml code is below
<ListView x:Name="TaxListView" ItemsSource="{Binding Invoice.Taxgroup}" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" SeparatorVisibility="None" HasUnevenRows="false" RowHeight="35">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Spacing="0" HorizontalOptions="End">
<Label Text="{Binding Source={x:Reference TaxListView}, Path=BindingContext.CurrentOutlet.ReceiptTemplate.TaxLable, StringFormat='{0} ('}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
<Label Text="{Binding TaxName, StringFormat='{0})'}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
</StackLayout>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
<ListView x:Name="TaxListView2" ItemsSource="{Binding Invoice.Taxgroup}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" SeparatorVisibility="None" HasUnevenRows="false" RowHeight="35">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal" Spacing="0" HorizontalOptions="End">
<Label Text="{Binding TaxName}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
</StackLayout>
<Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
But is not working. please help me to what I am going wrong. Thanks in advance
Solved
I solve above result using single list no need to nested list view.
My code as below.
My xaml code look like:
<ListView
x:Name="TaxListView"
ItemsSource="{Binding Invoice.ReceiptTaxList}"
Grid.Row="2"
Grid.Column="0"
Grid.ColumnSpan="2"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand"
SeparatorVisibility="None"
HasUnevenRows="false"
RowHeight="35"
>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="0" ColumnSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Text="{Binding TaxName}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" HorizontalTextAlignment="End" Margin="0,5,0,5" />
<Label Grid.Row="0" Grid.Column="1" Text="{Binding TaxAmount, Converter={Helpers:CurrencyAmountConverter}}" FontSize="22" FontFamily="{x:Static resources:Fonts.ArialMTFont}" HorizontalOptions="End" Margin="0,5,0,5" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My view model code look like:
var TMPTaxList = invoice.InvoiceLineItems.Where(x => x.TaxId > 1).Select(x =>
{
return new KeyValuePair<LineItemTaxDto, ObservableCollection<LineItemTaxDto>>(new LineItemTaxDto()
{
InvoiceLineItemId = x.Id,
InvoiceId = x.InvoiceId,
TaxId = x.TaxId,
TaxRate = x.TaxRate,
TaxAmount = x.TaxAmount,
TaxName = "Tax (" + x.TaxName + ")"
}, x.LineItemTaxes);
});
var taxes = new ObservableCollection<LineItemTaxDto>();
foreach (var tax in TMPTaxList.GroupBy(tax => tax.Key.TaxId)
.Select(grp => grp.First()))
{
taxes.Add(tax.Key);
foreach (var subtax in tax.Value.Where(x => x.TaxId > 0))
{
taxes.Add(subtax);
}
}
invoice.ReceiptTaxList = taxes;
I want my two strings to be diplayed on just a single line. Is it possible for it to appear like this:
Curry Stephen
using this code
Text="{Binding EMP_LAST_NAME + EMP_FIRST_NAME}" ? ? ?
I currently have this code. Thanks a lot.
<ListView ItemsSource="{Binding EmployeesList}"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<controls:CircleImage Source="icon.png"
HeightRequest="66"
HorizontalOptions="CenterAndExpand"
Aspect="AspectFill"
WidthRequest="66"
Grid.RowSpan="2"
/>
<Label Grid.Column="1"
Grid.Row="1"
Text="{Binding EMP_LAST_NAME}"
TextColor="White"
FontSize="18"
Opacity="0.6"/>
<Label Grid.Column="1"
Grid.Row="1"
Text="{Binding EMP_FIRST_NAME}"
TextColor="White"
FontSize="18"
Opacity="0.6"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
You can't bind to multiple properties on a View Element.
In this case you should create a new property which does the format you want and bind it to the View.
Example:
public class EmployeeViewModel
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string FullName => $"{FirstName} {LastName}";
}
Then in XAML:
<Label Text="{Binding FullName}"/>
Another approach:
As suggested in the comments we can also use FormattedText property in a Label:
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding FirstName}" />
<Span Text="{Binding LastName}"/>
</FormattedString>
</Label.FormattedText>
Use FormattedText property in xamarin forms Label as follow:
<Label Grid.Column="1" Grid.Row="1">
<Label.FormattedText>
<FormattedString>
<Span TextColor="White" FontSize="18" Text="{Binding EMP_LAST_NAME'}"/>
<Span TextColor="White" FontSize="18" Text="{Binding EMP_FIRST_NAME}"/>
</FormattedString>
</Label.FormattedText>
</Label>
Xamarin.Forms Label
And also you can add Style to avoid code duplication for TextColor, FontSize and other properties in your code.
Styling Xamarin.Forms Apps using XAML Styles
<Label Text="{Binding Value, StringFormat='string before value {0:F0} string after value'}"/>
Suppose your value is 1234.
The output will be in this case:
string before value 1234 string after value
You could use IValueConverter, which will accept Employee and will return full name.
Or you could use MultiComponentLabel. It allows you to bind couple different values to one Label.
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Name="Page"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:SuperForms.Controls;assembly=SuperForms.Controls"
x:Class="SuperForms.Samples.MultiComponentLabelPage">
<controls:MultiComponentLabel Margin="0,20,0,0">
<controls:MultiComponentLabel.Components>
<controls:TextComponent Text="{Binding EMP_LAST_NAME}"/>
<controls:TextComponent Text="{Binding EMP_FIRST_NAME}"/>
</controls:MultiComponentLabel.Components>
</controls:MultiComponentLabel>
</ContentPage>
Just use MultiComponentLabel instead of couple Labels
For your ListView
<ListView ItemsSource="{Binding EmployeesList}"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Padding="10" RowSpacing="10" ColumnSpacing="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<controls:CircleImage Source="icon.png"
HeightRequest="66"
HorizontalOptions="CenterAndExpand"
Aspect="AspectFill"
WidthRequest="66"
Grid.RowSpan="2" />
<controls:MultiComponentLabel Grid.Row="1" Grid.Column="1">
<controls:MultiComponentLabel.Components>
<controls:TextComponent Text="{Binding EMP_LAST_NAME}"/>
<controls:TextComponent Text="{Binding EMP_FIRST_NAME}"/>
</controls:MultiComponentLabel.Components>
</controls:MultiComponentLabel>
</Grid>
</ViewCell>
Xamarin Forms 4.7 add support for Multibinding which can be used like this:
<Label>
<Label.Text>
<MultiBinding StringFormat="{}{0} {1}">
<Binding Path="FirstName" />
<Binding Path="LastName" />
</MultiBinding>
</Label.Text>
</Label>
In the example provided, "FirstName" and "LastName" are regular viewmodel properties defined in the class:
public string FirstName { get; set; }
public string LastName { get; set; }