DataContext lost when using RadFluidContentControl

[Cedric]

Hi,
I have a little problem when i use the TileView control in conjonction with the RadfluidContentControl : the datacontext is not inherited by the ContentElement child.
Here is my code:

<Window.Resources>

    <local:TileConverter x:Uid="conv:TileConverter_1"

                        x:Key="TileConverter" />

          

    <Style x:Uid="Style_17"

            TargetType="telerik:RadTileView"

            x:Key="TileGraphStyle">

        <Setter x:Uid="Setter_185"

                Property="IsItemDraggingEnabled"

                Value="True" />

        <Setter x:Uid="Setter_186"

                Property="MaximizeMode"

                Value="One" />

        <Setter x:Uid="Setter_187"

                Property="IsItemsAnimationEnabled"

                Value="False" />

        <Setter x:Uid="Setter_188"

                Property="PreservePositionWhenMaximized"

                Value="True" />

        <Setter x:Uid="Setter_189"

                Property="telerik:TileViewPanel.IsVirtualized"

                Value="True" />

        <Setter x:Uid="Setter_190"

                Property="IsAutoScrollingEnabled"

                Value="True" />

        <Setter x:Uid="Setter_191"

                Property="TileStateChangeTrigger"

                Value="SingleClick" />

        <Setter x:Uid="Setter_192"

                Property="MinimizedColumnWidth"

                Value="300" />

        <Setter x:Uid="Setter_193"

                Property="MinimizedRowHeight"

                Value="300" />

        <Setter x:Uid="Setter_194"

                Property="MinimizedItemsPosition"

                Value="Left" />

    </Style>

  

    <DataTemplate x:Key="LargeTemplate">

        <StackPanel Orientation="Horizontal">

            <TextBlock Background="AliceBlue"

                        Text="This is LargeTemplate" />

            <TextBlock Background="AliceBlue"

                        Text="{Binding Text}" />

        </StackPanel>

    </DataTemplate>

    <DataTemplate x:Key="SmallTemplate">

        <StackPanel Orientation="Horizontal">

            <TextBlock Background="Azure"

                        Text="This is SmallTemplate" />

            <TextBlock Background="Azure"

                        Text="{Binding Text}" />

        </StackPanel>

    </DataTemplate>

    <DataTemplate x:Key="RadFluidContentControlTemplate">

        <telerik:RadFluidContentControl ContentChangeMode="Manual"

                                        TransitionDuration="0:0:.5"

                                        LargeContentTemplate="{StaticResource LargeTemplate}"

                                        SmallContentTemplate="{StaticResource SmallTemplate}"

                                        ContentTemplate="{StaticResource SmallTemplate}"

                                        State="{Binding TileState, Converter={StaticResource TileConverter}}">

        </telerik:RadFluidContentControl>

    </DataTemplate>

</Window.Resources>

<Grid>

    <telerik:RadTileView x:Uid="tileView1"

                            x:Name="tileView1"

                            IsDockingEnabled="True"

                            Style="{StaticResource TileGraphStyle}"

                            ContentTemplate="{StaticResource RadFluidContentControlTemplate}"

                            ItemsSource="{Binding Items}">

        <telerik:RadTileView.ItemTemplate>

            <DataTemplate x:Uid="DataTemplate_4">

                <TextBlock x:Uid="TextBlock_11"

                            Text="{Binding Level}" />

            </DataTemplate>

        </telerik:RadTileView.ItemTemplate>

    </telerik:RadTileView>

</Grid>



The viewmodels :

public class MainViewModel : ViewModelBase
{
    public MainViewModel()
    {
        this.Items = new List<Item>()
        {
            new Item() { Level = 1, Text ="AAAA"},
            new Item() { Level = 2, Text ="BBBB"},
            new Item() { Level = 3, Text ="CCCC"},
            new Item() { Level = 4, Text ="DDDD"},
        };
    }

    public IList<Item> Items { get; private set; }
}

public class Item : ViewModelBase
{
    private TileState tileState;
    public int Level { get; set; }
    public string Text { get; set; }
    public TileState TileState
    {
        get
        {
            return this.tileState;
        }

        set
        {
            if (this.tileState != value)
            {
                this.tileState = value;
                this.NotifyPropertyChanged("TileState");
            }
        }
    }
}

If i suppress the  RadfluidContentControl all is fine and i see the right text displayed.
Any clues ?

- Cedric -
 

[Cedric]

I forgot to say that i use the RadControls_for_WPF_40_2011_1_0419_Dev version with the 01394RadControls_for_WPF_40_2011_1_0627_DEV_hotfix installed.

- Cedric -

[Cedric]

if i set to datacontext on each by exemple with 

<DataTemplate x:Key="NormalTemplate">
            <StackPanel Orientation="Horizontal"
                        DataContext="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadFluidContentControl, Mode=FindAncestor},  Path=DataContext}">
                <TextBlock Background="Bisque"
                           Text="This is Normal" />
                <TextBlock Background="Bisque"
                           Text="{Binding Text}" />
            </StackPanel>
        </DataTemplate>

  I worked around the problem but is it normal ?

- Cedric -

[Zarko]

Hi Cedric,
I guess that you've forgotten to bind the RadTileViewItems TileState property to the TileState property in your business object (Item). You can do that in the RadTileView.ItemContainerstyle like this:

<telerik:RadTileView.ItemContainerStyle>
    <Style TargetType="telerik:RadTileViewItem">
        <Setter Property="TileState" Value="{Binding TileState, Mode=TwoWay}" />
    </Style>
</telerik:RadTileView.ItemContainerStyle>

For further references could you please examine the attached project and if you have more questions please feel free to ask.

Regards,
Zarko
the Telerik team

[Cedric]

Hi Zarko,
You were right , i did not  bind the RadTileViewItems TileState due to a misunderstanding of the component by me.
I found my error and corrected it but is it normal i have to rebind the datacontext like i do ? 
Why the contentelement does not inherit of the data context ?

- Cedric -

[Zarko]

Hi Cedric,
There realy seams to be a problem with the DataContext when you use the Large/Normal/SmallTemapltes and we'll look into it. For now you can use your workaround or you can try not to use the templates - instead you can directly set the contents like this:

<telerik:RadFluidContentControl.LargeContent>
    <StackPanel Orientation="Horizontal">
        <TextBlock Background="AliceBlue"
                        Text="This is LargeTemplate" />
        <TextBlock Background="AliceBlue"
                        Text="{Binding Text}" />
    </StackPanel>
</telerik:RadFluidContentControl.LargeContent>
    <telerik:RadFluidContentControl.SmallContent>
    <StackPanel Orientation="Horizontal">
        <TextBlock Background="Azure"
                         Text="This is SmallTemplate" />
        <TextBlock Background="Azure"
                        Text="{Binding Text}" />
    </StackPanel>
</telerik:RadFluidContentControl.SmallContent>

Could you please examine the attached project and if you have more questions feel free to ask.

Greetings,
Zarko
the Telerik team

[Cedric]

Thanks, I will stay with my workaround because the xaml file is difficult to read when i set directly the content because the file becomes too large.

- Cedric -

[Zoltan]

Hi,

I ran into the same issue with TileView/RadFluidContentControl + RadBusyIndicator: I have a RadBusyIndicator + another control (lets say: Grid) inside a TileView's LargeContent and with Snoop I can see that the other control corrently inherited the DataContext while the BusyIndicator didn't.

If I rebind the DataContext, it's fine. So, this doesn't work:

<telerik:RadBusyIndicator IsBusy="{Binding IsBusy}" >

while this does:

<telerik:RadBusyIndicator IsBusy="{Binding IsBusy}" DataContext="{Binding}" >

I'm using 2012Q1.

   Zoltan

[Zarko]

Hi,
Could you please send us some more code snippets or a project that reproduces this issue because I wasn't able to recreate it? I've attached the project that I used for testing (in it the binding to IsBusy is working just fine) so you could examine it and tell us what's the difference with yours.
We're looking forward to hearing from you.

Kind regards,
Zarko
the Telerik team

[Zoltan]

Hi Zarko,

I uploaded my sample solution to: DataContextLost.zip

In the SampleListView ctor I set the DataContext to a new instance of SampleListViewModel:

public SampleListView()
{
    InitializeComponent();
    this.DataContext = new SampleListViewModel();
}

This viewModel has only one property: IsBusy, which is constantly true.

In the SampleListView I simply bind the RadBusyIndicator's IsBusy property to the vm's IsBusy which doesn't seem to work unless I explicitly specify DataContext="{Binding}".

Your sample code works just fine, I'll investigate how can I refactor my code to the form you provided.

Thanks,
   Zoltan

[Zarko]

Hello,
Thank you for the solution. It seems that there's a problem in WPF with the DataContext of Small and Large contents of the RadFluidContentControl when it doesn't inherit its DataContext directly from an item (if the RadFluidContentControl is in a ContentTemplate of a TileView and it's DataContext is inherited from the RadTileViewItem, there are no problems). I've added 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.
For now you'll have to stick with your work around (DataContext="{Binding}") and we'll try to fix this problem for some of our next releases.
I've updated your telerik account and if you have more questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[Zoltan]

Thanks!

[Patrick]

Hello, I am running into this same issue in Silverlight. Any update or recommended workaround to use Large/SmalContentTemplate and still retain the DataContext? We'd rather not set the Content directly.

Thanks.

[Martin Ivanov]

Hello Patrick,

When you are using the content template properties you will need also to set the control's content properties. Because the RadFluidContentControl is a ContentControl the data context passed in the templates depends on the corresponding content property. For example, the elements defined in the SmallContentTemplate will get their data context from the SmallContent property.

<telerik:RadFluidContentControl SmallContent="{Binding MyDataContext}"
                                Content="{Binding MyDataContext}"
                                LargeContent="{Binding MyDataContext}">
    <telerik:RadFluidContentControl.SmallContentTemplate />
    <telerik:RadFluidContentControl.ContentTemplate />
    <telerik:RadFluidContentControl.LargeContentTemplate />
</telerik:RadFluidContentControl>

Regards,
Martin
Telerik

[Patrick]

Hello Martin, thank you. This was very helpful, we are now setting the context as follows

1.SmallContent="{Binding}" LargeContent="{Binding}"