PullToRefresh

[Billy]

This is in regards to a Windows Phone 7.1

I'm having a problem with the RadDataBoundListBox and PullToRefresh.  I'm displaying a BusyIndicator in front of the listbox when the listbox's ItemsSource is null.  When the ItemsSource is loaded the listbox should be displayed.  The listbox is set to wrap horizontally via the VirtualizationStrategyDefinition.  Everything works fine except that when the ItemsSource is loaded and the listbox is displayed, you can see part of the pull to refresh text behind the first items in the list.  It's like this text is rendered to low, it shouldn't be visible at all, and when it is visible it should be above the first items in the listbox, not partly below the first items in the list box.

I've attached some code that demonstrates what I'm talking about.  When you launch the app you will see the loading indicator.  Click app bar button to load the items source.  Notice the pull to refresh text is partially visible behind the first items in the list.

Interestingly, this only happens when you have the "WrapLineAlignment" set to "Center" in the "WrapVirtualizationStrategyDefinition" property.  If you take this off, it displays correctly.  Please let me know if I'm just doing something wrong, or if this is a bug (and if so is there a workaround).

XAML

<phone:PhoneApplicationPage
    x:Class="RadControlsWindowsPhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="clr-namespace:Converters"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    xmlns:telerikListBox="clr-namespace:Telerik.Windows.Controls.DataBoundListBox;assembly=Telerik.Windows.Controls.Primitives"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False" Loaded="PhoneApplicationPage_Loaded_1"   >

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.Resources>
            <DataTemplate x:Key="DataBoundListBoxItemTemplate">
                <telerikPrimitives:RadHubTile
                    Width="180"
                    Height="180"
                    Margin="0,0,20,20"
                    Title="{Binding Name}"
                    Background="#FF9AC048">
                </telerikPrimitives:RadHubTile>
            </DataTemplate>
        </Grid.Resources>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Margin="12,17,0,0">
            <TextBlock Text="Text1" Style="{StaticResource PhoneTextTitle3Style}"></TextBlock>
            <TextBlock Text="Text2" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle2Style}" />
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,12,12,12">
            <telerikPrimitives:RadDataBoundListBox
                Name="listBox"
                EmptyContent=""
                ItemsSource="{Binding Path=Model, Mode=TwoWay}"
                IsPullToRefreshEnabled="True"
                ItemTemplate="{StaticResource DataBoundListBoxItemTemplate}">
                <telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
                    <telerikPrimitives:WrapVirtualizationStrategyDefinition Orientation="Horizontal" WrapLineAlignment="Center" />
                </telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
            </telerikPrimitives:RadDataBoundListBox>
        </Grid>

        <telerikPrimitives:RadBusyIndicator Grid.Row="1" AnimationStyle="AnimationStyle9" Foreground="#FF9AC048">
            <telerikPrimitives:RadBusyIndicator.IsRunning>
                <Binding ElementName="listBox" Path="ItemsSource">
                    <Binding.Converter>
                        <converters:NullToTrueConverter></converters:NullToTrueConverter>
                    </Binding.Converter>
                </Binding>
            </telerikPrimitives:RadBusyIndicator.IsRunning>
        </telerikPrimitives:RadBusyIndicator>
    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click_1" IconUri="/Images/appbar_button1.png" Text="Show Model"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

Code Behind.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.ComponentModel;

namespace RadControlsWindowsPhoneApp1
{
    public partial class MainPage : PhoneApplicationPage, INotifyPropertyChanged
    {


        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
        {
            this.DataContext = this;
        }

        public List<NameC> Model { get; set; }

        private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
        {
            List<NameC> names = new List<NameC>();

            names.Add(new NameC { Name = "Name 1" });
            names.Add(new NameC { Name = "Name 2" });
            names.Add(new NameC { Name = "Name 3" });
            names.Add(new NameC { Name = "Name 4" });
            names.Add(new NameC { Name = "Name 5" });
            names.Add(new NameC { Name = "Name 6" });
            names.Add(new NameC { Name = "Name 7" });
            names.Add(new NameC { Name = "Name 8" });

            this.Model = names;
            NotifyPropertyChanged("Model");
        }

        public class NameC
        {
            public string Name { get; set; }
        }


        private void NotifyPropertyChanged(String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

NullToTrueConverter reference in XAML

using System;
using System.Globalization;
using System.Windows.Data;

namespace Converters
{
    public class NullToTrueConverter : IValueConverter
    {
        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null)
                return true;
            else
                return false;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new InvalidOperationException();
        }

        #endregion
    }
}

 

 

 

[Deyan]

Hello Billy,

Thanks for writing and for reporting this issue.

I would like to inform you that we have been able to reproduce this issue on our side and will issue a fix for it in our next Internal Build which is scheduled for the end of this week.

I have added 1500 Telerik points to your account for your cooperation.

Let us know should you have further questions.

Regards,
Deyan
the Telerik team