Tileview : Issue with RadFluidContentControl and ItemsSource

[Patrick VADEL]

Hello,

I have a problem with the tileview control.

I have a tileview in my page with RadFluidContentControl to have different view depends on the size :

<telerik:RadTileView IsItemsAnimationEnabled="False">
    <telerik:RadTileViewItem>
        <telerik:RadFluidContentControl
            TransitionDuration="0"
            State="Large"
            SmallToNormalThreshold="400 400"
            NormalToSmallThreshold="400 400"
            NormalToLargeThreshold="600 600"
            LargeToNormalThreshold="600 600">
            <telerik:RadFluidContentControl.SmallContent>
                <StackPanel x:Name="SmallContent">
                    <TextBlock Text="Small"/>
                    <TextBlock Text="{Binding MyList.Count}"/>
                    <ListBox ItemsSource="{Binding MyList, Mode=TwoWay}"/>
                </StackPanel>
            </telerik:RadFluidContentControl.SmallContent>
            <telerik:RadFluidContentControl.Content>
                <StackPanel x:Name="Content">
                    <TextBlock Text="Normal"/>
                    <TextBlock Text="{Binding MyList.Count}"/>
                    <ListBox ItemsSource="{Binding MyList, Mode=TwoWay}"/>
                </StackPanel>
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <StackPanel x:Name="LargeContent">
                    <TextBlock Text="Large"/>
                    <TextBlock Text="{Binding MyList.Count}"/>
                    <ListBox ItemsSource="{Binding MyList, Mode=TwoWay}"/>
                </StackPanel>
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
</telerik:RadTileView>

In this sample this is the same content for Small, Normal and Large Content. It displays the number of item in a list and the content of the list.

MyList is just a List of String with 2 elements.

When I ran the application, only the listbox in the normal content displayed the 2 elements. In the small and large content the list was empty.

But in all contents (small, normal and large) the textblock displayed the correct number of elements in my list (2).

Do I something wrong ?

Thanks in advance for your answer.

Regards,

Patrick

[Petar Mladenov]

Hello Patrick,

 There are some known issues when using, the Thresholds in the RadTileView so we usually advice our clients to avoid them. Instead, you can check out this help article, describing a good way to use the RadFluidContentControl in the RadTileView. Please let us know if you need further assistance.

Kind regards,
Petar Mladenov
the Telerik team

[Patrick VADEL]

Hi Petar,

Thanks for the answer. I tried to follow the article but it doesn't work. Perhaps I done something wrong.

Yet I simplified the application and deleted the Threshold.

Know I have the following TileView :

<telerik:RadTileView
    MinimizedItemsPosition="Right"
    MinimizedColumnWidth="200"
    IsItemsAnimationEnabled="False">
    <telerik:RadTileViewItem>
        <telerik:RadFluidContentControl
            State="Normal"
             ContentChangeMode="Manual">
            <telerik:RadFluidContentControl.SmallContent>
                <StackPanel x:Name="SmallContent">
                    <TextBlock Text="Small"/>
                    <TextBlock Text="{Binding MyList.Count}"/>
                    <ListBox ItemsSource="{Binding MyList, Mode=TwoWay}"/>
                </StackPanel>
            </telerik:RadFluidContentControl.SmallContent>
            <telerik:RadFluidContentControl.Content>
                <StackPanel x:Name="Content">
                    <TextBlock Text="Normal"/>
                    <TextBlock Text="{Binding MyList.Count}"/>
                    <ListBox ItemsSource="{Binding MyList, Mode=TwoWay}"/>
                </StackPanel>
            </telerik:RadFluidContentControl.Content>
            <telerik:RadFluidContentControl.LargeContent>
                <StackPanel x:Name="LargeContent">
                    <TextBlock Text="Large"/>
                    <TextBlock Text="{Binding MyList.Count}"/>
                    <ListBox ItemsSource="{Binding MyList, Mode=TwoWay}"/>
                </StackPanel>
            </telerik:RadFluidContentControl.LargeContent>
        </telerik:RadFluidContentControl>
    </telerik:RadTileViewItem>
</telerik:RadTileView>

So I set ContentChangeMode to Manual.

And I set manually the State of the RadFluidContentControl.

When I set the State to Normal, all works fine, the ListBox contains items

When I set the State to Small or Large the ListBox is empty.

But the TextBlock with MyList.Count displays '2' in all cases

I don't see what's wrong in my code.

Regards

Patrick

[Zarko]

Hello,
There's a problem in WPF with the DataContext of Small and Large contents of the RadFluidContentControl when it is using the default page/userCongrol DataContext (if the RadFluidContentControl is in a ContentTemplate of a TileView and it's DataContext is inherited from the RadTileViewItem, there are no problems). The easiest solution for you problem is to explicitly bind the DataContext like this:

...
<telerik:RadFluidContentControl.LargeContent>
    <StackPanel x:Name="LargeContent" DataContext="{Binding}">
        <TextBlock Text="Large" />
        <TextBlock Text="{Binding MyList.Count}" />
        <ListBox ItemsSource="{Binding MyList}" />
    </StackPanel>
</telerik:RadFluidContentControl.LargeContent>
...

I've attached a sample project that shows this so could you please examine it and if you have more questions please feel free to ask.
p.s. I've logged this issue to our PITS under the name "The DataContext is not distribute to Large and Small contents in some cases" and it'll be ready for tracking and voting tomorrow the latest.

All the best,
Zarko
the Telerik team