XAML background color and text color not changing - xaml

I do not know if my code displays a list of FOOS .It does generate a list item that is clickable which goes to the correct Details page, the problem is the list item is either blank or all the text is white. I cannot figure out which.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MaopApplication.Views.PipelineSearch">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" >
<Entry Placeholder="Search With PipelineName" Text="{Binding SearchText}" ></Entry>
<Button Text="Search" Command="{Binding SearchPipes}" />
</StackLayout>
<ListView ItemsSource="{Binding Foos}" ItemTapped="OnListViewItemTapped" ItemSelected="OnListViewItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View BackgroundColor="Red">
<StackLayout>
<label Text="wtf" TextColor="Black"></label>
<label Text="{Binding Test}"TextColor="Black"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
CODE TO CREATE FOOS
var Foos = new List<object>() {new {Test = "foo"}, new {Test = "bar"}};

A couple things wrong here (maybe it was just a bad copy/paste job):
ViewCell.View does not have a BackgroundColor property, use StackLayout.BackgroundColor instead
label should be Label (capitals matter)
When I made those change to your code, it ran fine for me:
<ViewCell>
<ViewCell.View>
<StackLayout BackgroundColor="Red">
<Label Text="wtf" TextColor="Black"/>
<label Text="{Binding Test}" TextColor="Black"/>
</StackLayout>
</ViewCell.View>
</ViewCell>

Related

how to add checkbox in listview using xamarin forms

i want to create a checkbox in listview using xaml, after selecting the multiple checkbox click button to get all selected value.My code is :
<ContentPage.Content>
<ListView x:Name="ProductsListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Spacing="0">
<Label Text="{Binding retail_modified_item_id}"
TextColor="Blue" FontSize="13" />
<Label Text="{Binding name, StringFormat='Name :
{0:N}'}" TextColor="black" FontSize="10" />
<Label Text="{Binding retail_price,
StringFormat='Price : {0:N}'}"
TextColor="black" FontSize="10" />
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
my output is;
output without checkbox
i tried some sample code from https://www.ignatiuz.com/blog/xamarin/button-check-box-with-list-item-in-xamarin-forms-listview/
but i'm getting input:checkbox not found
i am new to xamarin please give some sample code or link to do this
You can use Plugin.InputKit from Nuget.
Usage
<?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:local="clr-namespace:xxx"
xmlns:input="clr-namespace:Plugin.InputKit.Shared.Controls;assembly=Plugin.InputKit"
x:Class="xxx.MainPage">
<ContentPage.Content>
<ListView x:Name="ProductsListView">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout Spacing="0">
<Label Text="{Binding retail_modified_item_id}"
TextColor="Blue" FontSize="13" />
<Label Text="{Binding name, StringFormat='Name :
{0:N}'}" TextColor="black" FontSize="10" />
<Label Text="{Binding retail_price,
StringFormat='Price : {0:N}'}"
TextColor="black" FontSize="10" />
<input:CheckBox Text="xxx" Type="Check"/>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
</ContentPage>
I have written a content on implementing the multiselect listview in xamarin forms. Please check this : https://androidwithashray.blogspot.com/2018/03/multiselect-list-view-using-xamarin.html
Hope this helps.
Add/remove value to local collection using OnCheckChanged method.
I used this way:
<ListView>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Horizontal">
<Label Text="Some item" />
<CheckBox
IsChecked="true"
CheckedChanged="OnCheckedChanged"
HorizontalOptions="EndAndExpand"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
If you need to have checkboxes inside a listview, you can use Xamarin.Forms.InputKi (https://github.com/enisn/Xamarin.Forms.InputKit)
Then I would define it like this inside a DataTemplate's ViewCell:
<input:CheckBox Text="Hello World I'm Option 2" Type="Check"/>
There are also Bindable properties and events which you can use depending on your scenario:
CheckChanged: (Event) Invokes when check changed.
CheckChangedCommand: (Command) Bindable Command, executed when check
changed.
Key: (int) A key you can set to define checkboxes as ID.
Text: (string) Text to display description
IsChecked: (bool) Checkbox checked situation. Works TwoWay Binding as
default.
Color: (Color) Color of selected check.
TextColor: (Color) Color of description text.
Type: (CheckType) Type of checkbox checked style.
(Check,Cross,Star,Box etc.)

How to create list view with side count like mail

Am working small Xamarin.forms application.Now i have doubt to how to count and display list items in label
like email and gmail.
I'm browsing in google various sites i did't get result
My Xaml code is below how to display count in side bar and i used grid for that sum Xaml.task error will be occur
<?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:emit="clr-namespace:System.Reflection.Emit;assembly=mscorlib"
x:Class="vMonitor.Views.HomeListView"
Title="Home List View"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<ScrollView>
<StackLayout Orientation="Vertical">
<ListView ItemsSource="{Binding Model}" Margin="20,0,20,0"
x:Name="listView"
SeparatorVisibility="Default" SeparatorColor="Brown"
HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid>
<StackLayout Orientation="Horizontal" Padding="10">
<Label Text="{Binding Name}" FontSize="20" FontFamily="TimesNewRomen" FontAttributes="None">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.TabCommand, Source={x:Reference listView}}" CommandParameter="{Binding .}"/>
</Label.GestureRecognizers>
</Label>
<Label Text="{Binding UserID}" FontSize="20" FontFamily="TimesNewRomen" FontAttributes="None"/>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ScrollView>
</ContentPage>
Then you can use ViewCell for List Item.
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="15,10" Orientation="Horizontal">
<Label
VerticalTextAlignment="Center"
Text="{Binding ItemName}" TextColor="#FF1654" FontAttributes="Bold" FontSize="16"/>
<Label VerticalOptions="End"
VerticalTextAlignment="Center"
Text="{Binding ItemCount}" TextColor="#FF1654" FontAttributes="Bold" FontSize="16"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
You can Bind ItemName and ItemCount. If you want to Display Left Side Image then you can add Image at start position in ViewCell.
For Expandable you have to use IsVisible Property for that cell.

How to add a button only once in a List View xamarin Forms

Using this code
x:Class="Fit_Plans.TimelinePage"
Title="Timeline"
BackgroundColor="{ DynamicResource MainWrapperBackgroundColor }
<ContentPage.Content>
<ListView
ItemsSource="{ Binding TimelineList }"
SeparatorVisibility="None"
BackgroundColor="{ DynamicResource BasePageColor }"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<StackLayout>
<Grid x:Name="GridTasks">
<local:TimelineItemTemplate
Padding="{ DynamicResource MainWrapperPadding }"/>
</Grid>
</StackLayout>
<artina:Button
Clicked="OnNextButtonTapped"
Style="{DynamicResource PrimaryActionButtonStyle}"
Text="Order"
VerticalOptions="EndAndExpand"
WidthRequest="{ artina:OnOrientationDouble
LandscapeTablet=600 }"
HorizontalOptions="{ artina:OnOrientationLayoutOptions
PortraitPhone=Fill,
LandscapePhone=Fill,
PortraitTablet=Fill,
LandscapeTablet=Center }"/>
<StackLayout>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
Result :
But if I want to display the order Button only 1 time at the end of the list view , how to achieve that?
I have tried this with no success :
<ContentPage.Content>
<ListView
ItemsSource="{ Binding TimelineList }"
SeparatorVisibility="None"
BackgroundColor="{ DynamicResource BasePageColor }"
HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<StackLayout>
<StackLayout>
<Grid x:Name="GridTasks">
<local:TimelineItemTemplate
Padding="{ DynamicResource MainWrapperPadding }"/>
</Grid>
</StackLayout>
<StackLayout>
</StackLayout>
</StackLayout>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
<artina:Button
Clicked="OnNextButtonTapped"
Style="{DynamicResource PrimaryActionButtonStyle}"
Text="Order"
VerticalOptions="EndAndExpand"
WidthRequest="{ artina:OnOrientationDouble
LandscapeTablet=600 }"
HorizontalOptions="{ artina:OnOrientationLayoutOptions
PortraitPhone=Fill,
LandscapePhone=Fill,
PortraitTablet=Fill,
LandscapeTablet=Center }"/>
It displayed the button at the end but with an empty list
ListView provides HeaderTemplate and FooterTemplate. You should put your button inside FooterTemplate as follows:
<ListView ItemsSource="{ Binding TimelineList }" SeparatorVisibility="None" BackgroundColor="{ DynamicResource BasePageColor }" HasUnevenRows="true">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
.................
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.FooterTemplate>
<DataTemplate>
<ContentView>
//Put your button here
</ContentView>  
</DataTemplate>  
</ListView.FooterTemplate>
</ListView>
As of previous answer you can put in in footer or if you'd want to keep he button inside the cell template then wrap the button in with a IsVisible = your custom converter, that would check if (myIndex == totalListCount) then the button would be displayed for the last item in list only.

The cell doesnt show a complete image

I want to do a Cell with a yellow background and one orange box with a text and after an image with a medium size, but it doesn't work. The image doesn't appear big and I can't use a margin
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="neoFly_Montana.Views.PromocoesView"
BackgroundImage="promocoesbackground"
Title="Promoções">
<ContentPage.Content>
<ListView x:Name="listview_promocoes" Margin="0, 20, 0, 0 ">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout BackgroundColor="AliceBlue" HorizontalOptions="Center" VerticalOptions="FillAndExpand">
<Label Text="{Binding titulo}" Style="{StaticResource labelsfont}"/>
<Image Source="{Binding imagem}" Aspect="AspectFill"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage.Content>
This is the bad result (with 2 item - u can't see the image)
I want to do something like this but I can't use margin because when I use it, the app doesn't work.
It needs to be one item of a ListView.
All items should be like this.
How can I do that?
Thank you.
You can get that Layout in your ListView item with something like this:
<ListView
RowHeight="170"
ItemsSource="{Binding Items}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<!-- Outter box containing two boxes -->
<StackLayout
VerticalOptions="FillAndExpand">
<!-- First box with Title, Image and Text -->
<StackLayout
VerticalOptions="FillAndExpand"
Padding="10, 5"
BackgroundColor="Yellow">
<Label
Text="YOUR_TITLE"
BackgroundColor="Silver"/>
<Image
HorizontalOptions="FillAndExpand"
BackgroundColor="Fuchsia"
HeightRequest="60" />
<Label
Text="YOUR_OTHER_TEXT"
BackgroundColor="Silver"/>
</StackLayout>
<!-- Second box with Text -->
<StackLayout
VerticalOptions="End"
Margin="0, 8, 0, 0"
Padding="10, 5"
BackgroundColor="Lime">
<Label
Text="YOUR_TEXT_OTHER_BOX"
BackgroundColor="Silver"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I guess you might need to do a few little changes to get it exactly as you want it but this is pretty close.
Result:
Hope this helps.-

Set platform specific control to only one platform in xamarin forms

I have a page that contains a listview and Search bar control. There is a custom listview for android. My code as following:
<ContentPage.Content>
<ContentView>
<OnPlatform x:TypeArguments="View">
<OnPlatform.iOS>
<StackLayout Spacing="0">
<SearchBar x:Name="IosSearch"
Placeholder="Search"
TextChanged="IosSearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
</SearchBar>
<ListView x:Name="EmpListViewIos"
ItemsSource="{Binding EmpModel.GroupedItems}"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="8">
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding FullName}" FontSize="15" TextColor="Gray" LineBreakMode="NoWrap"/>
</StackLayout>
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding Department}" FontSize="Small" TextColor="#F68933" LineBreakMode="WordWrap"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</OnPlatform.iOS>
<OnPlatform.Android>
<StackLayout x:Name="androidListView">
<SearchBar x:Name="DroidSearch"
Placeholder="Search"
TextChanged="DroidSearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
</SearchBar>
<local:CustomListView x:Name="customListView"
Items="{Binding EmpModel.Items}"
VerticalOptions="FillAndExpand" MyListItemSelected="nativeListView_ItemSelected"
SeparatorColor="Black">
</local:MyListView>
</StackLayout>
</OnPlatform.Android>
<OnPlatform.WinPhone>
<StackLayout Spacing="0">
<SearchBar x:Name="WinSearch"
Placeholder="Search"
TextChanged="WinSearchBar_OnTextChanged"
SearchButtonPressed="OnSearch" BackgroundColor="#19588F">
</SearchBar>
<ListView x:Name="EmpListViewWin"
ItemsSource="{Binding EmpModel.GroupedItems}"
ItemSelected="OnItemSelected"
SeparatorVisibility="Default">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="8">
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding FullName}" FontSize="15" TextColor="Gray" LineBreakMode="NoWrap"/>
</StackLayout>
<StackLayout Spacing="4" Orientation="Horizontal">
<Label Text="{Binding Department}" FontSize="Small" TextColor="#F68933" LineBreakMode="WordWrap"/>
</StackLayout>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</OnPlatform.WinPhone>
</OnPlatform>
</ContentView>
</ContentPage.Content>
</ContentPage>
As the representation of data is different due to that I am required custom listview for android according to it's layout defined. The above code works fine. The only problem is the redundancy, the search bar control is common for all platform but when I put the search bar control above the <ContentView> it doesn't work throws exception. Similarly the ListView is common for ios and windows only there is custom listview for android but I am forced to repeat the code for windows also same as android.
Can anyone suggest a more efficient way to achieve this. How can I apply platform specific condition only for android and common for windows and ios.
You could share the iOS and WinPhone views using a static resource:
<ContentPage>
<ContentPage.ResourceDictionary>
<StackLayout x:Key="iosOrWpView">
...
</StackLayout>
</ContentPage.ResourceDictionary>
<ContentView>
<OnPlatform x:TypeArguments="View" iOS="{StaticResource iosOrWpView}"
WinPhone="{StaticResource iosOrWpView}">
<OnPlatform.Android>
<StackLayout x:Name="androidListView">
...
</StackLayout>
</OnPlatform.Android>
</OnPlatform>
</ContentView>
<ContentPage>