This is a migrated thread and some comments may be shown as answers.

DataContext lost when using RadFluidContentControl

14 Answers 122 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Cedric
Top achievements
Rank 1
Cedric asked on 11 Jul 2011, 08:50 AM
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 -
 

14 Answers, 1 is accepted

Sort by
0
Cedric
Top achievements
Rank 1
answered on 11 Jul 2011, 09:03 AM
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 -
0
Cedric
Top achievements
Rank 1
answered on 11 Jul 2011, 12:07 PM
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 -
0
Zarko
Telerik team
answered on 13 Jul 2011, 03:01 PM
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

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Cedric
Top achievements
Rank 1
answered on 13 Jul 2011, 06:16 PM
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 -
0
Zarko
Telerik team
answered on 18 Jul 2011, 11:32 AM
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

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Cedric
Top achievements
Rank 1
answered on 18 Jul 2011, 12:43 PM
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 -
0
Zoltan
Top achievements
Rank 1
answered on 13 Mar 2012, 05:23 PM
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

0
Zarko
Telerik team
answered on 16 Mar 2012, 03:04 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Zoltan
Top achievements
Rank 1
answered on 19 Mar 2012, 09:56 AM
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


0
Zarko
Telerik team
answered on 21 Mar 2012, 05:07 PM
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
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Zoltan
Top achievements
Rank 1
answered on 21 Mar 2012, 05:12 PM
Thanks!
0
Patrick
Top achievements
Rank 1
answered on 09 May 2016, 09:21 PM

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.

0
Martin Ivanov
Telerik team
answered on 12 May 2016, 01:05 PM
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
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Patrick
Top achievements
Rank 1
answered on 16 May 2016, 05:58 PM

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

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

Tags
TileView
Asked by
Cedric
Top achievements
Rank 1
Answers by
Cedric
Top achievements
Rank 1
Zarko
Telerik team
Zoltan
Top achievements
Rank 1
Patrick
Top achievements
Rank 1
Martin Ivanov
Telerik team
Share this question
or