Xamarin Community Toolkit LongpressCommand stops item selection in CollectionView iOS - xamarin

The code works as expected in Android but in iOS works inconsistently. The selected label's border changes colour when tapped, sometimes. After 3 or four taps of different labels they cease to be selected at all. Long pressing a label works as expected, opening a different view. On returning to the view containing the CollectionView code attached, label selection has been re-enabled. The process then repeats itself.
I've tried changing Nuget versions of both Xamarin.Forms and Xamarin.Community.Toolkit(even the latest pre-release), xaml and code-behind to no avail.
I'm at a loss. Any help would be appreciated.
<CollectionView x:Name="categoryCollectionView"
ItemsSource="{Binding Categories,Mode=TwoWay}"
SelectionMode="Single"
SelectedItem="{Binding Category}"
SelectionChanged="OnMenuItemSelected"
Grid.Column="0"
HorizontalOptions="FillAndExpand"
Grid.ColumnSpan="8"
Grid.Row="3"
VerticalScrollBarVisibility="Always" >
<CollectionView.ItemsLayout>
<GridItemsLayout x:Name="CategoriesGridLayout"
Orientation="Vertical"
Span="3"
VerticalItemSpacing="2"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter TargetName="lblCategory" Property="Label.TextColor" Value="Red" />
<Setter Property="BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackLayout Orientation="Vertical"
VerticalOptions="Center"
xct:TouchEffect.LongPressCommand="{Binding LongPressCategoryCommand, Source={RelativeSource AncestorType={x:Type vm:CategoryVM}}}"
xct:TouchEffect.LongPressCommandParameter="{Binding CategoryString}" >
<StackLayout.Margin>
<OnPlatform x:TypeArguments="Thickness" iOS="2,2,4,4" Android="2" />
</StackLayout.Margin>
<Label x:Name="lblCategory"
Text="{Binding CategoryString}"
FontSize="Small"
BackgroundColor="#f5e2e1"
VerticalOptions="Center"
HorizontalOptions="CenterAndExpand"
WidthRequest="350"
Padding="5"
TextColor="#232F34"
LineBreakMode="TailTruncation"
Style="{DynamicResource CategoryLabelStyle}" >
<Label.Triggers>
<DataTrigger TargetType="Label"
Binding="{Binding Source={x:Reference fontSizeSwitch}, Path=IsToggled}"
Value="true">
<Setter Property="FontSize"
Value="Medium" />
<Setter Property="Padding"
Value="2" />
</DataTrigger>
</Label.Triggers>
</Label>
</StackLayout>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>

Related

I want to change the shape of the radio button, can I change the border size?

<ContentPage.Resources>
<ControlTemplate x:Key="FrameRadioTemplate">
<Frame
Padding="10"
BackgroundColor="{DynamicResource ColorBorder000}"
BorderColor="Red"
HeightRequest="50"
WidthRequest="130">
<ContentPresenter>
<ContentPresenter.Resources>
<Style TargetType="Label">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="Center" />
<Style.Triggers>
<DataTrigger
Binding="{Binding Path=IsChecked, Source={x:RelativeSource AncestorType={x:Type RadioButton}}}"
TargetType="Label"
Value="True">
<Setter Property="TextColor" Value="{DynamicResource ColorText111}" />
<Setter Property="FontAttributes" Value="Bold" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{DynamicResource ColorBack004}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{DynamicResource ColorBack000}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Frame>
</ControlTemplate>
</ContentPage.Resources>
<StackLayout
x:Name="xDispContents"
Grid.Row="9"
Grid.Column="1"
HorizontalOptions="StartAndExpand"
Orientation="Horizontal"
Spacing="0">
<Ctrl:CtrlRadioButton
x:Name="xBtnDisp_ABS"
ControlTemplate="{StaticResource FrameRadioTemplate}"
HorizontalOptions="Center"
VerticalOptions="Center">
<Ctrl:CtrlRadioButton.Content>
<!--<Label TextColor="{DynamicResource ColorText000}" />-->
<Ctrl:CtrlButton Text="ABS" />
</Ctrl:CtrlRadioButton.Content>
</Ctrl:CtrlRadioButton>
<Ctrl:CtrlRadioButton
x:Name="xBtnDisp_Trans"
ControlTemplate="{StaticResource FrameRadioTemplate}"
HorizontalOptions="Center"
VerticalOptions="Center">
<Ctrl:CtrlRadioButton.Content>
<Label Text="%T" TextColor="{DynamicResource ColorText000}" />
</Ctrl:CtrlRadioButton.Content>
</Ctrl:CtrlRadioButton>
</StackLayout>
I want to change the shape of the radio button, can I change the border size?
I'm trying to change the shape of a radio button's appearance using a control template. But I want to change the border thickness of the frame, but there is no way.
The default thickness is too thick. I've looked for many other examples, but there's no information about the thickness, so I'm asking.
Maybe you can use this , Frame in a Frame .
Change the Padding for the "BorderWith" Color.
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="0.7" IsClippedToBounds="True">
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
<Label Text="Padding 0.7" HorizontalOptions="Center" />
</Frame>
</Frame>
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="1" IsClippedToBounds="True">
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
<Label Text="Padding 1" HorizontalOptions="Center" />
</Frame>
</Frame>
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="Red" HorizontalOptions="Center" VerticalOptions="Start" Padding="5" IsClippedToBounds="True">
<Frame HeightRequest="50" WidthRequest="100" BackgroundColor="White" HorizontalOptions="Center" VerticalOptions="Start" Margin="0" Padding="0" IsClippedToBounds="True">
<Label Text="Padding 5" HorizontalOptions="Center" />
</Frame>
</Frame>
The result a border in Red in different size.

Collection View outline shows under and over my horizontal collection

I have problem with CollectionView outline. I create simple horizontal colletionView, and it is working, but on top and bottom I have gray outline.
XAML
<CollectionView BackgroundColor="White"
Margin="0,15,0,0"
x:Name="NewSubMenu"
ItemsLayout="HorizontalList"
SelectionMode="Single"
HeightRequest="35"
SelectionChanged="OnCollectionViewSelectionChanged"
ItemsSource="{Binding MyListSource}"
HorizontalOptions="FillAndExpand">
<CollectionView.ItemTemplate >
<DataTemplate>
<Grid BackgroundColor="White" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Selected" >
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="White" />
<Setter TargetName="_label" Property="Label.TextColor" Value="Black" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Label Text="{Binding Name}"
x:Name="_label" ClassId="{Binding Id}"
TextColor="{StaticResource TamnoBraon}"
TextTransform="Uppercase" Padding="5,1,10,1" FontSize="Large"></Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Does anyone have same problem?

Xamarin.Forms - CollectionView SelectedItem doesn't respect VisualStateManager on iOS on load

So,
I have a CollectionView that loads a SelectedItem when the page loads.
I use VisualStateManager to manage the properties of selected and non-selected items, and also to manage the background color of the cell itself.
My problem is that sometimes (randomly) on page load VisualStateManager doesn't set any of the properties correctly on the SelectedItem. This only happens on iOS, it works fine on Android.
My CollectionView code:
<CollectionView
x:Name="DaysList"
ItemsLayout="HorizontalList"
SelectionMode="Single"
VerticalOptions="Start"
HorizontalScrollBarVisibility="Never"
HorizontalOptions="FillAndExpand"
ItemsSource="{Binding DaysList}"
SelectedItem="{Binding DaysListSelectedItem, Mode=TwoWay}">
<CollectionView.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="-3,0,-3,40"/>
<On Platform="Android" Value="-3,-40,-3,0"/>
</OnPlatform>
</CollectionView.Margin>
<CollectionView.HeightRequest>
<OnPlatform x:TypeArguments="x:Double">
<On Platform="iOS" Value="74"/>
<On Platform="Android" Value="150"/>
</OnPlatform>
</CollectionView.HeightRequest>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid
Padding="3,0,3,0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal"/>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="Background" Value="#2F2F2F"/>
<Setter TargetName="SelectedFrame" Property="Frame.BackgroundColor" Value="#F0CF4E"/>
<Setter TargetName="SelectedFrame" Property="Frame.WidthRequest" Value="104"/>
<Setter TargetName="SelectedFrame" Property="Frame.HeightRequest" Value="70"/>
<Setter TargetName="SelectedDate1" Property="Label.TextColor" Value="#080808"/>
<Setter TargetName="SelectedDate2" Property="Label.TextColor" Value="#080808"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Frame
x:Name="SelectedFrame"
CornerRadius="5"
HasShadow="False"
Padding="0"
BackgroundColor="{AppThemeBinding Light=Gray, Dark=Gray}"
Margin="0"
VerticalOptions="CenterAndExpand"
WidthRequest="92"
HeightRequest="62">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"
Spacing="0">
<Label
x:Name="SelectedDate1"
Text="{Binding Day}"
FontSize="16"
Style="{StaticResource LightWhite}"
Margin="0,0,0,-2"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"/>
<Label
x:Name="SelectedDate2"
Text="{Binding DayName}"
FontSize="20"
Style="{StaticResource BoldWhite}"
Margin="0,-2,0,0"
HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"/>
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Any help would be appreciated, thanks in advance.
This is a known bug with a PR open here. I'm hoping to merge this before the next release :)
You can already test this fix on your code and would love to ask you to do that so we can verify another scenario that is fixed. Let me know if you need the instructions for that.

Right Align all items in CollectionView in Xamarin Forms

I have been trying to right align all items in Xamarin forms CollectionView, unfortunately the code doesn't work for IOS while it works well in Android. It seems strange. When I load 100 items, only the 1st ten items which appears on the screen are right aligned, but then the rest is not aligned. Additionally, when I clear the collectionview and load next 100 items (this is part of the requirement), then the whole items are not aligned.
<CollectionView ItemsSource="{Binding ArabicListText}" SelectedItem="{Binding SelectedAya}"
SelectionMode="Single" ItemTemplate="{StaticResource ChapterItemTemplate}"
FlowDirection="RightToLeft" x:Name="itemView">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical" Span="1"/>
</CollectionView.ItemsLayout>
</CollectionView>
Datatemplate from resources
<DataTemplate x:Key="ChapterItemTemplate">
<SwipeView HorizontalOptions="StartAndExpand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightPageBackgroundPrimaryColor},
Dark={StaticResource DarkPageBackgroundPrimaryColor}}" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource LightPageBackgroundSecondaryColor},
Dark={StaticResource DarkPageBackgroundSecondaryColor}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackLayout Padding="10,0,5,0" HorizontalOptions="StartAndExpand">
<Label LineBreakMode="WordWrap" HorizontalTextAlignment="Start" HorizontalOptions="StartAndExpand" IsVisible="{Binding BindingContext.ShowEnglishVerseNumber,
Source={x:Reference MyPage}, Converter={StaticResource InverterBooleanConverter}}">
<Label.FormattedText>
<FormattedString>
<Span Text="{Binding ArabicText.Aya}"
FontSize="{Binding BindingContext.ActiveArabicFont.FontSize, Source={x:Reference MyPage}}"
FontFamily="{Binding BindingContext.ActiveArabicFont.FontPath, Source={x:Reference MyPage}}"/>
<Span
Text="{Binding ArabicText.ArabicAyaNumber, StringFormat='﴿{0}﴾'}"
FontSize="35" FontFamily="Sherzad"></Span>
</FormattedString>
</Label.FormattedText>
</Label>
<BoxView Style="{StaticResource HorizentalLine}" IsVisible="{Binding BindingContext.ShowHorizentalLine, Source={x:Reference MyPage}}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="2" Command="{Binding BindingContext.ShareAyaCommand,
Source={x:Reference itemView}}"
CommandParameter="{Binding .}"/>
<SwipeGestureRecognizer Direction="Right" Command="{Binding BindingContext.NextChapterCommand,
Source={x:Reference MyPage}}"/>
<SwipeGestureRecognizer Direction="Left" Command="{Binding BindingContext.PreviousChapterCommand,
Source={x:Reference MyPage}}"/>
</StackLayout.GestureRecognizers>
</StackLayout>
</SwipeView>
</DataTemplate>
When I have fewer items says 10, all the items are aligned accordingly. However, when the number of items grow to 100, then strangly, the only few top items are well aligned and the rest are not aligned. When I scroll back to the top, then all the items are aligned incorrectly.
Update 2
If I remove Span and change them to labels then all the labels are aligned accordingly, but having the span creates the problem.
The only temp solution I found is to change Spans to Labels, but it doesn't display text as the Span after one another horizentally. Because using Span I want to show two diff texts after one finishes which I can't acheive similiar result using two Labels.

Xamarin.Forms - Label not centered

I've got a StackView which contains 2 Labels. One is normal text, and the other one is a FontAwesome Icon.
Anyhow both Labels are not centered vertically inside the StackView. Here is the Code for them:
The Styles:
<Style x:Key="FAIconedLabel" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="40" />
<Setter Property="Margin" Value="0" />
</Style>
<Style x:Key="EmailLabel" TargetType="Label">
<Setter Property="TextColor" Value="White"/>
<Setter Property="FontSize" Value="20" />
</Style>
And the Views itself
<!-- Top Right -->
<Grid BackgroundColor="{StaticResource LamaControlGray}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,
Property=Width,Factor=1,Constant=-400}"
RelativeLayout.WidthConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Width,Factor=0,Constant=400}"
RelativeLayout.HeightConstraint="{ConstraintExpression
Type=RelativeToParent,Property=Height,Factor=0,Constant=40}" >
<StackLayout Orientation="Horizontal" HorizontalOptions="End" VerticalOptions="FillAndExpand" BackgroundColor="Red">
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" Style="{StaticResource EmailLabel}"/>
<fal:FontAwesomeLabel Text="{Binding SettingsIcon}" BackgroundColor="Green" VerticalOptions="CenterAndExpand" Style="{StaticResource FAIconedLabel}" />
</StackLayout>
</Grid>
Do I miss something here?
Edit 1
I added a BackgroundColor to see, if the Label actually fills the StackView
Edit 2
After cleaning and rebuilding the solution, the email Label is centered now. But the Iconed one still remains at the bottom
Yes you are missing something.
You're not setting it to be centered vertically.
Either
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Style="{StaticResource EmailLabel}"/>
or
<Label x:Name="LblUserEmail" Margin="0,0,10,0" Text="{Binding UserEmail}" VerticalOptions="CenterAndExpand" Style="{StaticResource EmailLabel}"/>

Resources