Questions on UI for Xamarin Forum

1 answer

411 views

I want to show a list of items with multi select on a click of a button. I figure our there are no dropdowns. Preferebly I would like to have a popup sort of component with list of items to select. Is this possible with PCL with out using native?

Thankyou in advance

General Discussions

answered on 09 Oct 2017

6 answers

276 views

Calendar with dark theme

I use light and dark themes in my app(android + xamarin form). Calendar supported only light theme.

I try use :

Calendar.SetStyleForCell = EvaluateCellStyle;

....
private CalendarCellStyle EvaluateCellStyle(CalendarCell cell)

{

if(DarkTheme)

return this.Calendar.DarkStyle;

else

return null;

}

But then my page is loaded for 5 seconds longer.
Maybe there is another way?

Calendar & Scheduling

answered on 06 Oct 2017

8 answers

218 views

Pull To Refresh Works on iOS and Not Android

I have a pull to refresh defined, and it renders and works properly on iOS, but when I run on Android, the ListView doesn't render at all. If I remove the "RefreshRequested" and "IsPullToRefreshEnabled", it starts rendering again. Any idea why?? I am using the newest release of UI for Xamarin.Forms. This is how I defined the list:

`<telerikDataControls:RadListView x:Name="listView" ItemTapped="ListView_ItemTappedAsync" LoadOnDemandMode="Automatic" IsLoadOnDemandEnabled="True" LoadOnDemand="listView_LoadOnDemand" LoadOnDemandBufferItemsCount="5" RefreshRequested="listView_RefreshRequestedAsync" IsPullToRefreshEnabled="True">`

ListView

answered on 05 Oct 2017

2 answers

422 views

Horizontal items in a listview

I have a list view, where each item should show a list of labels. My implementation is

<telerikDataControls:RadListView ItemsSource="{Binding EventLableList,Mode=TwoWay}">

<telerikDataControls:RadListView.ItemTemplate>

<DataTemplate>

<telerikListView:ListViewTemplateCell>

<telerikListView:ListViewTemplateCell.View >

<StackLayout Orientation="Horizontal">

<BoxView BackgroundColor="{Binding HexColor, Converter={StaticResource ArgbToColorConverter}" VerticalOptions="Fill"/>

</StackLayout>

</telerikListView:ListViewTemplateCell.View>

</telerikListView:ListViewTemplateCell>

</DataTemplate>

</telerikDataControls:RadListView.ItemTemplate>

</telerikDataControls:RadListView>

The color Boxes are stacked vertically. I want the to view them horizontaly. Is this possible?

ListView

answered on 03 Oct 2017

3 answers

187 views

SlideView is super slow when adding new elements

Forms 2.3.4.270 / Xamarin iOS 11.0 / Xamarin.Android 7.4.5.1

RadSlideView is veeery slow when recycling views.

Instead of shifting views and their bounding context left or right, all 3 views binding context are nullify and then reassigned.

Is should be like this:

ViewA ViewB ViewC
ViewModelA ViewModelB ViewModelC
*

// <== swipe this way

ViewC ViewA ViewB
ViewModelD ViewModelA ViewModelB
*

Then only one view's binding would change

Each time I added an element in the observable collection I had a delay of nearly 1 second...

It's really too bad since the implementation is otherwise quite nice and strong...

SlideView

answered on 28 Sep 2017

8 answers

875 views

Images in ListView flicker on load

I have the following ListView set up.

<telerikDataControls:RadListView x:Name="PeopleListView" BackgroundColor="White"

ItemsSource="{Binding Employees}"

IsItemSwipeEnabled="True"

ItemSwiping="PeopleListView_OnItemSwiping"

SwipeOffset="160, 0, 0, 0"

SwipeThreshold="10"

SelectionGesture="Tap"

SelectionMode="Single"

SelectionChanged="PeopleListView_OnSelectionChanged">

<telerikDataControls:RadListView.ItemTemplate>

<DataTemplate>

<telerikListView:ListViewTemplateCell>

<telerikListView:ListViewTemplateCell.View>

<Grid BackgroundColor="White">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"></ColumnDefinition>

<ColumnDefinition Width="*"></ColumnDefinition>

<ColumnDefinition Width="Auto"></ColumnDefinition>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"></RowDefinition>

<RowDefinition></RowDefinition>

</Grid.RowDefinitions>

<Image Source="{Binding PhotoData}"

Style="{StaticResource EmployeeProfileIconStyle}"

Grid.RowSpan="2"

Grid.Column="0"></Image>

<Label Grid.Column="1" Grid.Row="0" Margin="0,3,0,0"

FontSize="Medium" Text="{Binding FullName}"></Label>

<Label Grid.Column="1" Grid.Row="1"

VerticalTextAlignment="Start" VerticalOptions="Start"

Text="{Binding EmployeeTitle}"></Label>

<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="2"

VerticalOptions="Center"

Source="ic_people_outline"

WidthRequest="50"

HeightRequest="50"

Opacity="0.35"

IsVisible="{Binding SubordinateCount, Converter={StaticResource IntToBoolConverter}}">

</Image>

</Grid>

</telerikListView:ListViewTemplateCell.View>

</telerikListView:ListViewTemplateCell>

</DataTemplate>

</telerikDataControls:RadListView.ItemTemplate>

<telerikDataControls:RadListView.ItemSwipeContentTemplate>

<DataTemplate>

<Grid Margin="0"

Padding="0"

ColumnSpacing="0"

RowSpacing="0">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="80" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<StackLayout Grid.Column="0" BackgroundColor="#2474d2" WidthRequest="80">

<StackLayout.GestureRecognizers>

<TapGestureRecognizer x:Name="EmailTapGestureRecognizer"

Tapped="EmailTapGestureRecognizer_OnTapped"

NumberOfTapsRequired="1"></TapGestureRecognizer>

</StackLayout.GestureRecognizers>

<Image Source="ic_mail_outline" VerticalOptions="CenterAndExpand"></Image>

</StackLayout>

<StackLayout Grid.Column="1" BackgroundColor="LimeGreen" WidthRequest="80">

<StackLayout.GestureRecognizers>

<TapGestureRecognizer x:Name="CallTapGestureRecognizer"

Tapped="CallTapGestureRecognizer_OnTapped"

NumberOfTapsRequired="1"></TapGestureRecognizer>

</StackLayout.GestureRecognizers>

<Image Source="ic_call" VerticalOptions="CenterAndExpand"></Image>

</StackLayout>

</Grid>

</DataTemplate>

</telerikDataControls:RadListView.ItemSwipeContentTemplate>

</telerikDataControls:RadListView>

The model that is bound to ListView is as follows.

public class Employee

{

public int EmployeeId { get; set; }

public int SubordinateCount { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public string EmailAddress { get; set; }

public string EmployeeTitle { get; set; }

public string FullName => $"{FirstName} {LastName}";

public ImageSource PhotoData { get; set; }

// ...

}

The PhotoData property is ImageSource type and is obtained from base64 of the image as follows (this all happens before being bound to View).

var imageData = Convert.FromBase64String(GetEmployeePhotoData());

employee.PhotoData = ImageSource.FromStream(() => new MemoryStream(imageData));

And Employees (ListView's ItemsSource) is an ObservableCollection<Employee> property in ViewModel.

When I display a list of employees in a ListView everything works fine on Android. However, on iOS the employee photos flicker for 1 - 2 seconds when ListView is displayed. To be precise, it's not flickering, but rather photos change quickly before stabilizing. For example, if I have employees A, B and C in ListView, then on load I see that employee A has employee C's photo for split second, then it quickly changes to employee B's photo. Then it changes again, so that employee A has correct employee A's photo displayed. The similar thing happens for all employees in the list. (The order in which photos "flicker" may or may not be sequential - the order in which people are displayed in the list - because they change so quickly it's hard to tell. But eventually, when "flickering" stops, all employees have correct photos displayed.)

Please let me know what can be done to solve this.

Thanks

ListView

answered on 28 Sep 2017

3 answers

256 views

Adding Labels on top of a RadialGauge

I want to add labels on top of (or next to) a Radial Gauge where the respective GaugeRangeBarIndicator is.

01.<telerikGauges:RadRadialGauge StartAngle="90" SweepAngle="360" HeightRequest="200">

02. <telerikGauges:RadRadialGauge.Axis>

03. <telerikGauges:GaugeLinearAxis Maximum="100"

04. Minimum="0"

05. TickLength="10"

06. TickOffset="2"

07. ShowLabels="False"

08. StrokeThickness="0" />

09. </telerikGauges:RadRadialGauge.Axis>

10. <telerikGauges:RadRadialGauge.Ranges>

11. <telerikGauges:GaugeRangesDefinition Offset="0">

12. <telerikGauges:GaugeRange Color="Gray"

13. From="0"

14. To="100" />

15. </telerikGauges:GaugeRangesDefinition>

16. </telerikGauges:RadRadialGauge.Ranges>

17. <telerikGauges:RadRadialGauge.Indicators>

18. <telerikGauges:GaugeBarIndicator EndCap="Flat"

19. Fill="Green"

20. StartCap="Flat"

21. Offset="0"

22. Value="{Binding GreenYellow}" />

23. <telerikGauges:GaugeRangeBarIndicator Fill="Yellow"

24. FromCap="Flat"

25. ToCap="Flat"

26. Offset="0"

27. From="{Binding GreenYellow}"

28. To="{Binding YellowRed}" />

29. <telerikGauges:GaugeRangeBarIndicator Fill="Red"

30. FromCap="Flat"

31. ToCap="Flat"

32. Offset="0"

33. From="{Binding YellowRed}"

34. To="100" />

35. </telerikGauges:RadRadialGauge.Indicators>

36. </telerikGauges:RadRadialGauge>

How can I add labels next to the specific indicator section? Or is there a way that I can draw them manually?

Gauges

answered on 27 Sep 2017

1 answer

315 views

Is it possible to use the BusyIndicator without the Content Property?

I have a bunch of ActivityIndicators in my application already, but the native ActivityIndicator doesn't scale well on iOS. Is it possible to just use the BusyIndicator without content? I don't want to have to refactor my views if I do not have to.

BusyIndicator

answered on 22 Sep 2017

4 answers

217 views

Change Appointment Text Color on Android

I have a Xamarin Forms project where I am using calendar.

But I am having problems figuring out how to change the text color of the appointments on Android.

How do I do that?

Calendar & Scheduling

answered on 22 Sep 2017

1 answer

113 views

RadListView ScrolltoItem

I would like to do ScrollToItem in Xamarin Forms for my RadListView. I understand that the RadListView does not expose the method and I will need to create custom renderers on each platform.

Please provide an example of how to expose the method and how do I call that method from the View. Thanks.

ListView

answered on 22 Sep 2017