RadList And BindingContextChanged Issue

[Ioannis]

I have a rad list and i use BindingContextChanged to change isVisible trueOrFalse based on some coditions but it returns me the list where some items have white space down and some other items the bottom margin cut the infos in half.

 

[Lance | Senior Manager Technical Support]

Hi Ioannis, thank you for the screenshot, however it's insufficient information to help you determine the problem.

Can you please provide us with the code for the RadListView in its entirety (don't forget any DataTemplates that are in a different location)? We need this information to reproduce the behavior, which allows us to move forward with a possible solution for you.

Also, please include information about exactly which version you're using because I do not see any licenses for UI for Xamarin on your account, thus I cannot tell what you're using.

Pro-tip: If you are using your employer's license, ask them to assign you as the Licensed User, this will let you legally use the product, download assemblies and most importantly open technical support cases with your account. This is literally a 1 minute task for them by using the Manage License Users | Your Account portal.

[Ioannis]

<telerikDataControls:RadListView x:Name="TaskList" 
                                                             Grid.Row="1"
                                                             IsItemSwipeEnabled="True"
                                                             ItemSwipeCompleted="TaskList_ItemSwipeCompleted"
                                                             SelectionChanged="TaskList_SelectionChanged"                                                   
                                                             SelectionMode="Single" 
                                                             SelectionGesture="Tap"            
                                                             SwipeOffset="50, 0, 50, 0" 
                                                             SwipeThreshold="10"
                                                             HeightRequest="30"
                                                             RefreshRequested="TaskList_RefreshRequested"
                                                             IsPullToRefreshActive="True"
                                                             IsPullToRefreshEnabled="True"
                                                             VerticalOptions="FillAndExpand"
                                                             BackgroundColor="LightGray" >
                                <telerikDataControls:RadListView.ItemTemplate >
                                    <DataTemplate>
                                        <telerikListView:ListViewTemplateCell >
                                            <telerikListView:ListViewTemplateCell.View>
                                                <Grid >
                                                    <telerikPrimitives:RadBorder BorderColor="#268ecd" Margin="3,6" BorderThickness="0" CornerRadius="18" >
                                                        <StackLayout Orientation="Horizontal" 
                                                                 Style="{StaticResource ListItem}" 
                                                                 VerticalOptions="FillAndExpand" 
                                                                 Padding="0" 
                                                                 BackgroundColor="White">
                                                            <BoxView BackgroundColor="{Binding CriticalityColors}" WidthRequest="7" HeightRequest="10" HorizontalOptions="Start"/>
                                                            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Spacing="0" Padding="0, 15">
                                                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" Spacing="5">
                                                                    <Label Text="{Binding TaskLabel}" Style="{StaticResource ListHeader}" TextColor="{StaticResource LightBlueColor}" />
                                                                    <Label x:Name="CustomerInfo" Text="{Binding Customer}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="CustomerInfo_BindingContextChanged"/>
                                                                    <Label x:Name="fullPath" Text="{Binding TopologyDescription}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="FullPath_BindingContextChanged" />
                                                                    <Label Text="{Binding TargetLabel}" Style="{StaticResource ListInfo}" TextColor="{StaticResource GreyColor}" />
                                                                </StackLayout>
                                                                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="5">
                                                                    <Label Text="{Binding CategoryDesc}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="{StaticResource GreyColor}" Padding="0, 5" HorizontalOptions="StartAndExpand"/>
                                                                    <Label x:Name="DesComplLbl" Text="{Binding DesComplDateParenthesis}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="DesComplLbl_BindingContextChanged" HorizontalOptions="End"  Padding="0, 5"/>
                                                                </StackLayout>
                                                                <StackLayout x:Name="ScheduleDateLayout" Orientation="Horizontal" HorizontalOptions="StartAndExpand" Spacing="5" BindingContextChanged="ScheduleDate_OnBindingContextChanged">
                                                                    <Label Text="{Binding ScheduleDateStr}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="{StaticResource GreyColor}" />
                                                                    <telerikPrimitives:RadBorder BackgroundColor="#268ecd" BorderThickness="1"  >
                                                                        <Label Text="{Binding ScheduleTimeLabel}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="White" />
                                                                    </telerikPrimitives:RadBorder>
                                                                </StackLayout>
                                                            </StackLayout>
                                                            <Image x:Name="statusImg" HorizontalOptions="End" Source="{Binding StatusImage}" Margin="0,0,0,10"/>
                                                        </StackLayout>
                                                    </telerikPrimitives:RadBorder>
                                                </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="50" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Image Grid.Column="0" Source="locationpin.png" WidthRequest="50" />
                                        </Grid>
                                    </DataTemplate>
                                </telerikDataControls:RadListView.ItemSwipeContentTemplate>
                                <telerikDataControls:RadListView.LayoutDefinition>
                                    <telerikListView:ListViewLinearLayout VerticalItemSpacing="0" />
                                </telerikDataControls:RadListView.LayoutDefinition>
                                <telerikDataControls:RadListView.SelectedItemStyle>
                                    <telerikListView:ListViewItemStyle BackgroundColor="#268ecd"/>
                                </telerikDataControls:RadListView.SelectedItemStyle>
                            </telerikDataControls:RadListView>

private void FullPath_BindingContextChanged(object sender, DataBindingCompleteEventArgs e)
        {
            if (!showTopology)
                return;
            var fullPathInfoLbl = (Label)sender;
            fullPathInfoLbl.IsVisible = showTopology;
 
            if (string.IsNullOrEmpty(fullPathInfoLbl.Text))
            {
 
                fullPathInfoLbl.Text = AimmsApp.Resources.Resources.NoTopology;
 
            }
 
 
        }
        private void CustomerInfo_BindingContextChanged(object sender, DataBindingCompleteEventArgs e)
        {
            if (!showCustomer)
                return;
            var customerInfoLbl = (Label)sender;
            customerInfoLbl.IsVisible = showCustomer;
            if (string.IsNullOrWhiteSpace(customerInfoLbl.Text))
            {
                customerInfoLbl.Text = AimmsApp.Resources.Resources.NoCustomer;
            }
 
 
 
        }

this is the radlist i create and the BindingObjectChanged functions The licence is in my employers account Version: 2021.1.224.1

[Lance | Senior Manager Technical Support]

Thank you for the code. I noticed several items:

• The StackLayout's VerticalOptions are set to FillAndExpand. This means it's always going to push out and take as much vertical space as possible.
  • Action: Change this to Start so that it uses the least amount of space as possible.
• I noticed an unnecessary Grid parent in the ItemTemplate. This is only wasting CPU processing.
  • Action: Delete this so that there's only a RadBorder as the root element.
• Finally, you have explicitly set a ListViewLinearLayout , this will override the defaults and define a specific height for the items. 
  • Action: Delete it, the default spacing is already 0.

Here's the updated implementation

<telerikDataControls:RadListView x:Name="TaskList" 
                                 Grid.Row="1"
                                 IsItemSwipeEnabled="True"
                                 ItemSwipeCompleted="TaskList_ItemSwipeCompleted"
                                 SelectionChanged="TaskList_SelectionChanged"                                                   
                                 SelectionMode="Single" 
                                 SelectionGesture="Tap"            
                                 SwipeOffset="50, 0, 50, 0" 
                                 SwipeThreshold="10"
                                 HeightRequest="30"
                                 RefreshRequested="TaskList_RefreshRequested"
                                 IsPullToRefreshActive="True"
                                 IsPullToRefreshEnabled="True"
                                 VerticalOptions="FillAndExpand"
                                 BackgroundColor="LightGray" >
    <telerikDataControls:RadListView.ItemTemplate >
        <DataTemplate>
            <telerikListView:ListViewTemplateCell >
                <telerikListView:ListViewTemplateCell.View>
                    <telerikPrimitives:RadBorder BorderColor="#268ecd" Margin="3,6" BorderThickness="0" CornerRadius="18" >
                        <StackLayout Orientation="Horizontal" 
                                 Style="{StaticResource ListItem}" 
                                 VerticalOptions="Start" 
                                 Padding="0" 
                                 BackgroundColor="White">
                            <BoxView BackgroundColor="{Binding CriticalityColors}" WidthRequest="7" HeightRequest="10" HorizontalOptions="Start"/>
                            <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" Spacing="0" Padding="0, 15">
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" Spacing="5">
                                    <Label Text="{Binding TaskLabel}" Style="{StaticResource ListHeader}" TextColor="{StaticResource LightBlueColor}" />
                                    <Label x:Name="CustomerInfo" Text="{Binding Customer}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="CustomerInfo_BindingContextChanged"/>
                                    <Label x:Name="fullPath" Text="{Binding TopologyDescription}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="FullPath_BindingContextChanged" />
                                    <Label Text="{Binding TargetLabel}" Style="{StaticResource ListInfo}" TextColor="{StaticResource GreyColor}" />
                                </StackLayout>
                                <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="5">
                                    <Label Text="{Binding CategoryDesc}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="{StaticResource GreyColor}" Padding="0, 5" HorizontalOptions="StartAndExpand"/>
                                    <Label x:Name="DesComplLbl" Text="{Binding DesComplDateParenthesis}" Style="{StaticResource ListInfo}" IsVisible="False" BindingContextChanged="DesComplLbl_BindingContextChanged" HorizontalOptions="End"  Padding="0, 5"/>
                                </StackLayout>
                                <StackLayout x:Name="ScheduleDateLayout" Orientation="Horizontal" HorizontalOptions="StartAndExpand" Spacing="5" BindingContextChanged="ScheduleDate_OnBindingContextChanged">
                                    <Label Text="{Binding ScheduleDateStr}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="{StaticResource GreyColor}" />
                                    <telerikPrimitives:RadBorder BackgroundColor="#268ecd" BorderThickness="1"  >
                                        <Label Text="{Binding ScheduleTimeLabel}" Style="{StaticResource ListInfo}" IsVisible="True" TextColor="White" />
                                    </telerikPrimitives:RadBorder>
                                </StackLayout>
                            </StackLayout>
                            <Image x:Name="statusImg" HorizontalOptions="End" Source="{Binding StatusImage}" Margin="0,0,0,10"/>
                        </StackLayout>
                    </telerikPrimitives:RadBorder>
                </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="50" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Column="0" Source="locationpin.png" WidthRequest="50" />
            </Grid>
        </DataTemplate>
    </telerikDataControls:RadListView.ItemSwipeContentTemplate>
    <telerikDataControls:RadListView.SelectedItemStyle>
        <telerikListView:ListViewItemStyle BackgroundColor="#268ecd"/>
    </telerikDataControls:RadListView.SelectedItemStyle>
</telerikDataControls:RadListView>