EmptyContentTemplate with Progress Bar Indicator Position

[Washington]

Hi...

I have a RadDataBoundListBox which has an EmptyContentTemplate with a progress bar indicator.

My problem is that the progress bar is always shown at the left up corner and I don't know why.

 

01.<Grid x:Name="ContentPanel" Grid.Row="1" Margin="5">
02.     <telerikPrimitives:RadDataBoundListBox
03.         Name="listBoxName"
04.         EmptyContent="Loadding..."
05.         HorizontalContentAlignment="Center"
06.         HorizontalAlignment="Center"
07.         Margin="12">
08.
09.         <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
10.             <DataTemplate>
11.                 <Button
12.                     Foreground="Black"
13.                     Content="{Binding MyLabel}"
14.                     Height="85"
15.                     Width="85"
16.                     BorderThickness="1"
17.                     Background="WhiteSmoke"
18.                     BorderBrush="#FFA29999"
19.                     HorizontalAlignment="Center"
20.                     VerticalAlignment="Center" />
21.             </DataTemplate>
22.         </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
23.
24.         <telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
25.             <telerikPrimitives:WrapVirtualizationStrategyDefinition Orientation="Horizontal" />
26.         </telerikPrimitives:RadDataBoundListBox.VirtualizationStrategyDefinition>
27.
28.         <telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
29.             <telerikCore:RadMoveAnimation StartPoint="500, 0" EndPoint="0, 0" Duration="0:0:1">
30.                 <telerikCore:RadMoveAnimation.Easing>
31.                     <CubicEase EasingMode="EaseOut"/>
32.                 </telerikCore:RadMoveAnimation.Easing>
33.             </telerikCore:RadMoveAnimation>
34.         </telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
35.
36.     </telerikPrimitives:RadDataBoundListBox>
37. </Grid>

 

       

[Washington]

this is the correct Xaml markup:

 

<Grid Grid.Row="2" Margin="5">
    <telerikPrimitives:RadDataBoundListBox
        Name="listBoxName"
        Margin="12">

        <telerikPrimitives:RadDataBoundListBox.EmptyContentTemplate>
            <DataTemplate>
                <telerikPrimitives:RadBusyIndicator
                    Name="loading"
                    Background="White"
                    FontSize="{StaticResource PhoneFontSizeMedium}"
                    Foreground="{StaticResource Azul}"
                    Content="Loadding..."
                    Canvas.ZIndex="999999"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    IsRunning="true">
                </telerikPrimitives:RadBusyIndicator>
            </DataTemplate>
        </telerikPrimitives:RadDataBoundListBox.EmptyContentTemplate>

        <telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>
            <telerikCore:RadMoveAnimation StartPoint="500, 0" EndPoint="0, 0" Duration="0:0:1">
                <telerikCore:RadMoveAnimation.Easing>
                    <CubicEase EasingMode="EaseOut"/>
                </telerikCore:RadMoveAnimation.Easing>
            </telerikCore:RadMoveAnimation>
        </telerikPrimitives:RadDataBoundListBox.ItemAddedAnimation>

        <telerikPrimitives:RadDataBoundListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="0">
                    <Button
                        Foreground="Black"
                        Content="{Binding Number}"
                        Tag="{Binding Number}"
                        Height="90"
                        Width="90"
                        BorderThickness="1"
                        Background="WhiteSmoke"
                        BorderBrush="#FFA29999"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center" />
                </Grid>
            </DataTemplate>
        </telerikPrimitives:RadDataBoundListBox.ItemTemplate>
    </telerikPrimitives:RadDataBoundListBox>
</Grid>

[Rosy Topchiyska]

Hi Washington,

Thank you for contacting us.

Unfortunately we could not reproduce this issue on our side. I have attached the project that I used to test the scenario and the empty content is located in the center of the control. Could you please take a look and modify the project so that it reproduces the issue.

I look forward to your reply.

Regards,
Rosy Topchiyska
Telerik

[Washington]

Hi...

I have changed your sample to show my scenario.

See the attached file with the changed project. (please rename it to ".rar" extension)

Tnks

[Rosy Topchiyska]

Hello Washington,

Thank you for the sample. I noticed that the problem is caused by the Thread.Sleep call in the UI thread. It is highly recommended that you not do this, because this blocks all operations that happen on the UI thread. In this particular case the sleep call happens before the elements in the listbox are measured and arranged and that is why the indicator is not stretched yet. I have modified your code to use async methods that do not block the UI.

I hope this helps.
 
Regards,
Rosy Topchiyska
Telerik