Access control inside the listview

[Software]

Hi There

In our app we have a radlistview. And we have label inside of it. We want to change the maxline of that label from 2 to 1 depending on device font size change(for accessibility). Just wondering is it possible to access that label by its name (MainLabel) and check its fontsize and change its maxline property from codebehind?

 

      <telerikDataControls:RadListView     ItemsSource="{Binding SelectedCategory.Volumes}" 
                                                                         x:Name="listView">
                        <telerikDataControls:RadListView.Commands>
                            <telerikListViewCommands:ListViewUserCommand Id="ItemTap" 
                                                                     Command="{Binding ItemTapCommand}" />
                        </telerikDataControls:RadListView.Commands>

                        <telerikDataControls:RadListView.ItemTemplate>
                            <DataTemplate>
                                <telerikListView:ListViewTemplateCell>
                                    <telerikListView:ListViewTemplateCell.View>
                                        <Grid Margin="0" Padding="0">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="3*"></ColumnDefinition>
                                                <ColumnDefinition Width="7*"></ColumnDefinition>
                                            </Grid.ColumnDefinitions>
                                            <ffimageloading:CachedImage Margin="0" 
                                                                    class="thumbnail-image" 
                                                                    Grid.Column="0" Aspect="AspectFit"
                                                                    DownsampleToViewSize="true" 
                                                                    Source="{Binding ImageUrl}">
                                            </ffimageloading:CachedImage>
                                            <StackLayout Grid.Column="1" Padding="0" class="volume-description" Margin="15,0,5,0"  VerticalOptions="CenterAndExpand">
                                                <Label class="volume-name"  
                                                       x:Name="MainLabel"                                                     
                                                   Text="{Binding VolumeSubject}" 
                                                   LineBreakMode="TailTruncation" MaxLines="2"></Label>
                                            </StackLayout>
                                        </Grid>

                                    </telerikListView:ListViewTemplateCell.View>

                                </telerikListView:ListViewTemplateCell>

                            </DataTemplate>
                        </telerikDataControls:RadListView.ItemTemplate>
                        <telerikDataControls:RadListView.ItemStyle>
                            <telerikListView:ListViewItemStyle                                               
                                        BorderWidth="0"
                                        BorderLocation="None"/>
                        </telerikDataControls:RadListView.ItemStyle>
                        <telerikDataControls:RadListView.LayoutDefinition>
                            <telerikListView:ListViewLinearLayout  VerticalItemSpacing="1" ItemLength="80"   />
                        </telerikDataControls:RadListView.LayoutDefinition>
                    </telerikDataControls:RadListView>

[Lance | Senior Manager Technical Support]

Hello Tahmina,

When a component is inside a DataTemplate, it is no longer in the same scope of the page. This is why you can't just access it using an x:Name from the code behind.

The alternatives are:

Option 1

Use a shared event handler, maybe SizedChanged:

<Label SizeChanged="MainLabel_OnSizeChanged" />

private void MainLabel_OnSizeChanged(object sender, args...)
{
    var label = sender as Label;
    label.MaxLines = value_you _want;
}

Option 2

Use x:Static and a static class property:

<Label MaxLines="{x:Static local:MyHelperClass.MaxLinesForLabels}" />

where the static class would be this:

public static class MyHelperClass
{
    public static MaxLinesForLabel {get;set;] = value_you_want;
}

You can update the static class property value from anywhere else in the app. For example when the page loads:

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        MyHelperClass.MaxLinesForLabel = value_you_want;
    }
}

There are other more complicated ways, but those two are the least convoluted and give you easy option to change the value when you need to.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Software]

Thanks. It worked like charm. But now We are having another issue. To support the accessibility, we have few custom renderers (ios, android). So the Android label renderer is working fine for the labels inside that Radlistview. But in ios it is not even recognizing that label inside the radlistview and is not rendering the fontsize for that label accurately . here is the code for labelrenderer

[assembly: ExportRenderer(typeof(Label), typeof(AccessibilityLabelRenderer))]
namespace ABC.iOS.CustomRenderer.Accessibility
{
    class AccessibilityLabelRenderer : LabelRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Label> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                UpdateFont();
            }
        }



        private void UpdateFont()
        {
            var pointSize = iOSHelpers.GetAccessibleFont<Label>(Element.FontSize);
            if (pointSize != null)
            {
                Control.Font = UIFont.FromDescriptor(Element.Font.ToUIFont().FontDescriptor, pointSize.Value);
            }
        }
    }
}

[Lance | Senior Manager Technical Support]

Hello Tahmina,

I'm happy to hear that you've worked around the Label access issue. Regarding the new problem, I'm not sure what might be wrong as the Xamarin.Forms Label control and it's LabelRenderer are not Telerik components.

I recommend posting this on StackOverflow to get an answer from the Xamarin developer community or Microsoft (they monitor S.O. for 'xamarin-forms' tags). I also recommend sharing the iOSHelpers class so they have the full code to investigate with, this seems to be a critical part of the approach.

However, if you switch out the RadListView for a Xamarin.Forms ListView and it does work, then it is probably a Telerik-based problem. In this case, please open a Support Ticket so that the RadListView engineers can investigate (please also include all the code we need to replicate the problem).

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik