Inconsistent and Odd Tile Content Behaviour

[Mike]

I've recently added a new tile to my main tiles in the app. This tile takes a twitter feed and displays a list of the tweets. I've had to extract the links out to a separate property, which I then bind to a Hyperlink. To keep the latest tweets on the top I use a ViewSource which is a resource on the user control the TileList is part of.

The odd behaviour is that the links aren't always clickable. If I take the RadListBox out of the tile and into a grid in another part of the page it works perfectly all the time. I've deployed the app to a couple of test machines and on one of those the links are always clickable on the tile until you change the theme, then they break. On my local dev box, the clickability of the links is inconsistent. I can fire the app up in VS2013 10 times and out of that maybe 3 times it will work.

I've put together a quick video showing the issue: Tile Issues Video

The code for the tile is below. In the Grid, that works, the exact same RadTileList piece of code is used. 

 

<tel:Tile x:Name="tileTweetFeed"
           Background="#FF386DDA"
           TileType="Quadruple"
           Opacity="1"
           IsEnabled="True"
           Foreground="White"
           AllowDrop="False" Focusable="False">
     <Grid>
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
         </Grid.RowDefinitions>
         <TextBlock Text="vrHive Twitter Feed"
                    FontFamily="/vrHive;component/Fonts/#Zero Threes"
                    FontSize="11" />
         <Border Visibility="Visible" Grid.Row="1"
                 BorderThickness="1"
                 Margin="5"
                 BorderBrush="White"
                 Background="#FF386DDA" >
             <Grid >
                 <Grid.RowDefinitions>
                     <RowDefinition Height="*"/>
                 </Grid.RowDefinitions>
                 <tel:RadListBox x:Name="listTweetFeed" ItemsSource="{Binding Source={StaticResource ItemListViewSource}}" Background="{x:Null}"  >
                     <tel:RadListBox.ItemTemplate>
                         <DataTemplate >
                             <Grid Margin="0">
                                 <Grid.RowDefinitions>
                                     <RowDefinition />
                                     <RowDefinition/>
                                     <RowDefinition/>
                                 </Grid.RowDefinitions>
                                 <TextBlock FontWeight="Bold"
                                            Text="{Binding twitterMessage.CreatedDate}"
                                            FontSize="13"/>
                                 <TextBlock Grid.Row="1"
                                            Text="{Binding twitterMessage_NoLink}"
                                            Margin="10,5,0,0"
                                            TextWrapping="Wrap"
                                            Width="245"
                                            HorizontalAlignment="Left" />
                                 <Grid Grid.Row="2" Margin="10,2,0,0" Visibility="{Binding twitterMessage_Link, Converter={local:EmptyStringToVisibilityConverter}}">
                                     <Grid.ColumnDefinitions>
                                         <ColumnDefinition Width="45"/>
                                         <ColumnDefinition/>
                                     </Grid.ColumnDefinitions>
                                     <StackPanel Grid.Column="0"
                                                 Orientation="Vertical"
                                                 HorizontalAlignment="Left"
                                                 VerticalAlignment="Top"
                                                 Margin="0,6,0,0">
                                         <TextBlock Grid.Column="0" Text="Link(s): "  />
                                     </StackPanel>
                                     <tel:RadListBox Grid.Column="1"
                                              ItemsSource="{Binding twitterMessage_Link}"
                                              Background="{x:Null}"
                                              BorderBrush="{x:Null}"
                                              VerticalAlignment="Top"
                                              VerticalContentAlignment="Top"
                                              BorderThickness="0" >
                                         <tel:RadListBox.ItemsPanel>
                                             <ItemsPanelTemplate>
                                                 <StackPanel Orientation="Vertical"
                                                             HorizontalAlignment="Left"
                                                             VerticalAlignment="Top"/>
                                             </ItemsPanelTemplate>
                                         </tel:RadListBox.ItemsPanel>
                                         <tel:RadListBox.ItemTemplate>
                                             <DataTemplate>
                                                 <TextBlock>
                                                     <Hyperlink NavigateUri="{Binding}"
                                                                RequestNavigate="Hyperlink_RequestNavigate"
                                                                Cursor="Hand">
                                                         <TextBlock Text="{Binding}"
                                                                    Foreground="Black"
                                                                    FontWeight="Bold"
                                                                    HorizontalAlignment="Left"
                                                                    Focusable="True"/>
                                                     </Hyperlink>
                                                 </TextBlock>
                                             </DataTemplate>
                                         </tel:RadListBox.ItemTemplate>
                                     </tel:RadListBox>
                                 </Grid>
                             </Grid>
                         </DataTemplate>
                     </tel:RadListBox.ItemTemplate>
                 </tel:RadListBox>
             </Grid>
         </Border>
     </Grid>
 </tel:Tile>

 

I've tried changing the parent container for the RadTileList and that makes no difference. I've also tried dropping the RadTileList and using a standard ListBox and ListView, but neither of those works.

Is there a way I can get around this odd behaviour? 

[Vera]

Hello Mike,

I tried to reproduce the issue using the provided details and code but I was not able to. Attached you can find the project I used for the test. Do you get the same behavior on it?
I got the impression from your last sentence that the problem can be reproduced outside of the TileList? Is that correct? 
According to this ticket info, you are currently using Q2 2015 (2015.2.623). In case you are using an older one, please download our latest official version and give it try.


Regards,
Vera
Telerik

[Mike]

Thanks for the reply. 

I'll try the demo project when I'm back home on Friday. I did upgrade to the latest release, so yes I'm on the Q2 version. 

As for reproducing the issue, if I take the content of the tile, i.e the xaml within the border control, and put that code somewhere else then the links always work, as per the top left corner of the video. But when the same xaml is within a TileView/Tile control then I get the behaviour described. If I replace the RadListBox's with standard WPF controls (ListBox/ListView) the behaviour is still inconsistent. I should have said "I've also tried dropping the RadListBox..." instead of "I've also tried dropping the RadTileList..." in that last sentence, sorry.

 

[Mike]

Hi

I've had a look and used an old version of my app, as I'm away from home to test with and your demo works fine, as you would expect. The only difference I could see is that I have a RadBusyIndicator wrapping the TileList. If I remove the RadBusyIndicator from my code then I get no issues and it works as in your demo. If I add a RadBusyIndicator to your demo then it also works. 

It appears that when I switch viewmodels and then come back to this mainmenuview then with the RadBusyIndicator it does something odd with the links. No RadBusyIndicator and all is well. 

So for now I'm going to remove the RadBusyIndicator and take another approach for when I need the tiles all disabled. 

Thanks...