DataContext lost when using RadFluidContentControl

15 posts, 0 answers
  1. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 11 Jul 2011 Link to this post

    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 -
     
  2. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 11 Jul 2011 Link to this post

    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 -
  3. UI for WPF is Visual Studio 2017 Ready
  4. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 11 Jul 2011 Link to this post

    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 -
  5. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 13 Jul 2011 Link to this post

    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!

  6. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 13 Jul 2011 Link to this post

    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 -
  7. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 18 Jul 2011 Link to this post

    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!

  8. Cedric
    Cedric avatar
    64 posts
    Member since:
    Oct 2010

    Posted 18 Jul 2011 Link to this post

    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 -
  9. Zoltan
    Zoltan avatar
    7 posts
    Member since:
    Feb 2012

    Posted 13 Mar 2012 Link to this post

    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

  10. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 16 Mar 2012 Link to this post

    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 >>
  11. Zoltan
    Zoltan avatar
    7 posts
    Member since:
    Feb 2012

    Posted 19 Mar 2012 Link to this post

    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


  12. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 21 Mar 2012 Link to this post

    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 >>
  13. Zoltan
    Zoltan avatar
    7 posts
    Member since:
    Feb 2012

    Posted 21 Mar 2012 Link to this post

    Thanks!
  14. Patrick
    Patrick avatar
    43 posts
    Member since:
    Jan 2013

    Posted 09 May in reply to Zarko Link to this post

    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.

  15. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 12 May Link to this post

    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.
  16. Patrick
    Patrick avatar
    43 posts
    Member since:
    Jan 2013

    Posted 16 May in reply to Martin Link to this post

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

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

Back to Top
UI for WPF is Visual Studio 2017 Ready