I am using Xamarin Forms and CollectionsView.I am adding Frame child rows using SignalR. Child added event is not firing after few child is added.Is it a bug or am i doing something wrong?? I tried with CollectionView_ChildAdded event also.That one also gives this unexpected behavior
<CollectionView x:Name="ItemsListView"
ItemsSource="{Binding Items}"
VerticalOptions="FillAndExpand"
SelectionMode="None"
ItemsUpdatingScrollMode="KeepScrollOffset"
>
<CollectionView.ItemTemplate>
<DataTemplate>
<Frame x:Name="frame1" BackgroundColor="White" BorderColor="#F0F0F0" Padding="3" Margin="0,0,0,5" HasShadow="False" CornerRadius="10" ChildAdded="frame1_ChildAdded">
<Grid HeightRequest="40" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="6*" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="lb_TicketNumber" Text="{Binding TicketNumber}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" Margin="20,0" HorizontalTextAlignment="Center" />
<Label Grid.Column="1" Text="{Binding DeskName}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center"/>
<Label Grid.Column="2" Text="{Binding ServiceNameEng}" TextColor="Black" FontSize="Large" FontAttributes="Bold" VerticalOptions="Center" HorizontalTextAlignment="Center" />
</Grid>
</Frame>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
below event stops firing after few times.
private void frame1_ChildAdded(object sender, ElementEventArgs e)
{
DisplayAlert("Item added", "OK", "OK");
}
Related
I have a Xamarin CollectionView That uses a Button (Button x:Name="PNameButton") to Change the Background color of the button.
When the Button is clicked the background color changes... However - So does every 8th Button in the CollectionView. Its as if the CollectionView renders new data every 8 or so items, and that new first button gets the changed color property. How do I fix this? Code Follows:
<CollectionView x:Name="PairingsCollectionView" SelectionMode="Multiple" Margin="20,5,20,5" >
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Margin="0" Padding="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition Height="35" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Grid.Row="0" Margin="0" Color="#333130"/>
<Button x:Name="PNameButton" Margin="0" Padding="0,0,0,0" Grid.Column="0" BackgroundColor="{Binding UseColor}" Text="{Binding PDisplayName}" FontSize="Small" TextColor="Black"
HorizontalOptions="Start" VerticalOptions="Center" Clicked="Button_Clicked" />
<BoxView Grid.Column="1" Grid.Row="0" Color="#333130" Margin="0"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="1" TextColor="White" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center" >
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding PDays, StringFormat='{0}Dy'}"/>
<Span Text=" "/>
<Span Text="{Binding PDay}"/>
</FormattedString>
</Label.FormattedText>
</Label>
<BoxView Grid.Row="0" Grid.Column="2" Margin="0" Color="#333130"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="2" Text="{Binding PCredit, StringFormat='{0}'}" TextColor="#F57BFA" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="3" Color="#333130" Margin="0"></BoxView>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="3" Text="{Binding PFlightTime, StringFormat='{0}'}" TextColor="White" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="4" Color="#333130" Margin="0"/>
<Label Margin="0" Padding="0,0,0,0" Grid.Column="4" Text="{Binding PRegionType, StringFormat='{0}'}" TextColor="White" FontSize="Small" HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="0" Grid.Column="5" Color="#333130" Margin="0"/>
<CheckBox x:Name="IsSelectedCheckbox" Grid.Row="0" Grid.Column="5" IsChecked="{Binding PIsSelected}" VerticalOptions="Center"/>
<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Color="LightGray"></BoxView>
<Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="1" Text="{Binding PDateModified}" TextColor="Black" FontSize="Small"
HorizontalOptions="Center" VerticalOptions="Center"/>
<BoxView Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Color="LightGray" ></BoxView>
<Label Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="5" Text="{Binding PLayovers}"
TextColor="Coral" FontAttributes="Bold" FontSize="17" HorizontalOptions="Start" VerticalOptions="Center" Margin="5,0,0,0" />
<WebView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="6" BackgroundColor="#333130"
MinimumHeightRequest="150" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
HeightRequest="{Binding PWebViewHeight}" >
<WebView.Source>
<HtmlWebViewSource Html="{Binding PAllText}"/>
</WebView.Source>
</WebView>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
And in the Code Behind:
private void Button_Clicked(object sender, EventArgs e)
{
try
{
string ChkVal = "";
bool compareBool = false;
bool currentState = false;
Color buttonColer;
string ColorHexVal;
int i = 0;
var thisButton = sender as Button;
buttonColer = thisButton.BackgroundColor;
ColorHexVal = buttonColer.ToHex();
if (buttonColer != Color.FromHex("#F7F75A"))
{
currentState = true;
}
else
{
currentState = false;
}
var PairingItem = ((Button)sender).Parent.BindingContext as Pairings;
compareBool = App.DatabaseNA.GetIsSelected(PairingItem.PID);
if (!compareBool == true)
{
thisButton.BackgroundColor = Color.FromHex("#46AE3C");
}
else
{
thisButton.BackgroundColor = Color.FromHex("#F7F75A");
}
}
catch (Exception ex)
{
DisplayAlert("Alert", ex.InnerException.ToString(), "OK"); //await
}
}
Again - Thank You!!!
The code works great and sets the Background color of the button... The problem is - It sets the Background Color of every Button about 8 items down.
Thanks
I have the below XAML structure using a collection view which is using a list called 'users' as its ItemSource. I have a bound property which controls if the items are visible or not :
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
The issue is that unless I remove the StackLayout around the Frame then the IsVisible binding doesn't work. Does anyone know why the binding works without the StackLayout, but not with ?
<CollectionView Grid.Row="1" x:Name="users" IsGrouped="True" SelectionMode="Single">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal" MinimumHeightRequest="200" BackgroundColor="{Binding tint_colour}">
<Image Source="{Binding school_image}" WidthRequest="120" HeightRequest="100"/>
<Label Text="{Binding organisation_title}"
TextColor="{Binding font_colour}"
FontSize="Large"
FontAttributes="Bold"
VerticalTextAlignment="Center"></Label>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="HeaderTapped" CommandParameter="{Binding organisation_title}"></TapGestureRecognizer>
</StackLayout.GestureRecognizers>
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Vertical" ItemSpacing="1"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Horizontal">
<Frame IsVisible="{Binding isVisible}" HasShadow="True" BackgroundColor="White" Padding="0">
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<behaviors:Expander x:Name="MainExpander" CollapseAnimationLength="500" IsExpanded="False" IsVisible="True" >
<behaviors:Expander.Header>
<Grid HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Frame HeightRequest="40" WidthRequest="40" CornerRadius="20" HorizontalOptions="Start" VerticalOptions="Center" Margin="20" Padding="0" BackgroundColor="Maroon">
<Label Text="{Binding student_initial}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" />
</Frame>
<StackLayout Grid.Column="2" HorizontalOptions="StartAndExpand" VerticalOptions="Center" Margin="20">
<Label IsVisible="{Binding isVisible}" x:Name="StudentName" Text="{Binding student_fullname}"></Label>
<Label x:Name="StudentID" IsVisible="false" Text="{Binding student_unique_id}"></Label>
</StackLayout>
</Grid>
</behaviors:Expander.Header>
<Grid RowSpacing="0" HorizontalOptions="FillAndExpand" HeightRequest="240" VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Text="Messages" Clicked="Button_Clicked"></Button>
<Button x:Name="btnTopUp" Grid.Row="1" Text="Quick Topup" Clicked="Button_Clicked" IsVisible="{Binding topup_product_id, Converter={StaticResource IsNotNullOrEmptyConverter}}"></Button>
<Button Grid.Row="2" Text="Payments" Clicked="Button_Clicked"></Button>
</Grid>
<!-- TODO: Look at adding a balance for childrens topups? -->
</behaviors:Expander>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
I did a test about it and it works fine, here are xaml and codebehind:
xmal:
<StackLayout>
<CollectionView x:Name="mycol">
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout >
<Frame BackgroundColor="Red" IsVisible="{Binding isvisible}">
<Label Text="{Binding Name}"/>
</Frame>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
codebehind:
public partial class CollectionTest : ContentPage
{
ObservableCollection<People> peoples = new ObservableCollection<People> {
new People{ Name="Adam",isvisible=true},
new People{ Name="Bob",isvisible=true},
new People {Name="Adam2",isvisible=false },
new People{ Name="Bob2",isvisible=true} };
public CollectionTest()
{
InitializeComponent();
mycol.ItemsSource = peoples;
}
In my application My MainPage Showing Menus and after clicking menu the next page loading very slow and freeze the UI.
This happen when the content page contain a listView with Items.
My Data Page Content a listView with 50 items(Infinite Scrolling First 50 items)
XAML:
<ListView
ItemsSource="{Binding ItemsData}"
SelectedItem="{Binding SelectedItemsData}"
HasUnevenRows="True"
BackgroundColor="White" x:Name="ItemsDataList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
Margin="2,0,2,0"
Padding="8"
IsEnabled="{Binding IsEnableItemsData}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="30*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Label Text="{Binding SKU}" Grid.Row="0" Grid.Column="0" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="{Binding SKUColor}" FontSize="Small"/>
<Label Text="{Binding OrderNumber}" Grid.Row="0" Grid.Column="1" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding CategoryName}" Grid.Row="0" Grid.Column="2" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding OrderQuantity}" Grid.Row="0" Grid.Column="3" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
<Label Text="{Binding Bin}" Grid.Row="0" Grid.Column="4" HorizontalTextAlignment="Center" VerticalOptions="Center" TextColor="Black" FontSize="Small"/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Behaviors>
<eventToCommand:EventToCommandBehavior
EventName="ItemSelected"
Command="{Binding ItemsDataSelectedItemChange}"/>
<eventToCommand:EventToCommandBehavior
EventName="ItemAppearing"
Command="{Binding ItemsDataItemAppearing}"/>
</ListView.Behaviors>
</ListView>
ViewModel:
public ObservableCollection<ItemsData> Data
{
get { return _data; }
set
{
_data = value;
RaisePropertyChanged();
}
}
Getting the data from Local Database
Data = GetData(GlobalVariable.BranchId, DataLimit, Offset, SearchText, filterData, "Others", sortData);
How to get rid of this issues?
I am doing an application using Xamarin.Forms. There I need to show a datePicker when clicks on a Frame layout. For that purpose I have done this.
xaml part
<Frame Margin="15,0,15,5" HasShadow="false" OutlineColor="{StaticResource TextColorBlue}" BackgroundColor="White" x:Name="selectDate" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand">
<DatePicker x:Name="datePicker" IsVisible="false" DateSelected="Handle_DateSelected" TextColor="Maroon" />
<Label Text="Date" FontAttributes="Bold" FontSize="20" HorizontalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<BoxView HorizontalOptions="FillAndExpand" BackgroundColor="Silver" HeightRequest="1" />
<Grid RowSpacing="1" ColumnSpacing="1" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="Saturday" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="May" FontAttributes="Bold" FontSize="25" Grid.Row="0" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="20" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="0" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
<Label Text="2017" FontAttributes="Bold" FontSize="25" Grid.Row="1" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource TextColorBlue}" />
</Grid>
</StackLayout>
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1" Tapped="Handle_Tapped_DatePicker" />
</Frame.GestureRecognizers>
</Frame>
cs part
void Handle_Tapped_DatePicker(object sender, System.EventArgs e)
{
Debug.WriteLine("Handle_Tapped_DatePicker");
if (datePicker.IsFocused)
{
Debug.WriteLine("Yes, datePicker is focused");
datePicker.Unfocus();
}
datePicker.Focus();
}
void Handle_DateSelected(object sender, Xamarin.Forms.DateChangedEventArgs e)
{
Debug.WriteLine("e.NewDate: " + e.NewDate.ToString());
}
But nothing happening here. The datePicker is not showing. I am testing on iOS simulator. Please help me on this.
Thankfully I got the answer after some searches.
The thing is that, You need to bring the focus of datePicker through the device main UI thread. I have changed my code like this.
Device.BeginInvokeOnMainThread(() =>
{
if (datePicker.IsFocused)
datePicker.Unfocus();
datePicker.Focus();
});
I'm using a Grid with 7 rows and 3 columns. I added a button to the 7th row and 3rd column like this:
<Button Grid.Row="6" Grid.Column="2" HorizontalOptions="End"/>
The problem is the button is always in the center. I can't seem to get it to go to the end.
Here's the structure
<Image Aspect="AspectFit" HeightRequest="60" Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Source="{Binding ProdImg}" />
<Label Grid.Row="0" Grid.Column="1" HorizontalOptions="Start" TextColor="White" FontSize="22" Text="{Binding UserName}"/>
<Label HorizontalOptions="End" Grid.Row="0" Grid.Column="2" TextColor="#b1fc03" FontSize="25" Text ="{Binding Sales, StringFormat='{0:#,#.}'}"/>
<Label Grid.Row="1" Grid.Column="1" HorizontalOptions="Start" TextColor="White" FontSize="10" Text="{Binding LastSale, StringFormat='{0:dd-MMM-yyyy}'}"/>
<Label HorizontalOptions="End" Grid.Row="1" Grid.Column="2" TextColor="White" FontSize="10" Text="{Binding ProdName}"/>
<Button x:Name="TryNowBtn" HorizontalOptions="End" Image="try-now.png" Grid.Row="2" Grid.Column="2"></Button>
</Grid>
</StackLayout>
<Image Aspect="AspectFit" Source="separator-line.png"/>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I also tried
View.HorizontalOptions="End"
chagne your column definition to this
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
for button this code is ok
<Button Grid.Row="6" Grid.Column="2" HorizontalOptions="End"/>