TileView dinamically setting content of LargeContent

[Dragos]

Hello,
        I'm trying to use the TileView to offer the user the possibility of browsing through a list of work items (viewed as TileItems) and then zoom in on the selected task -> maximizing a certain TileItem.
        For this I want to dynamically insert content in the TileItem one it gets maximized.
        The current attempt was to set the contentTemplate/LargeContent to a canvas and then insert controls in that canvas.
E.g.

<DataTemplate x:Key="contentTemplate">
          <telerik:RadFluidContentControl ContentChangeMode="Manual" TransitionDuration="0:0:.5"
                  State="{Binding State, Converter={StaticResource tileConverter}}">
              <telerik:RadFluidContentControl.SmallContent>
                  <Image Source="{Binding Name}" Stretch="None" />
              </telerik:RadFluidContentControl.SmallContent>
              <telerik:RadFluidContentControl.Content>
                  <Image Source="{Binding Name}" Stretch="None" />
              </telerik:RadFluidContentControl.Content>
              <telerik:RadFluidContentControl.LargeContent >
                  <Canvas x:Name="MyCanvas"></Canvas>
              </telerik:RadFluidContentControl.LargeContent>
          </telerik:RadFluidContentControl>
</DataTemplate>

And then in the code behind I would catch the maximize event and insert controls is the canvas.
Private Sub tileView1_TileStateChanged(sender As Object, e As RadRoutedEventArgs)
   Dim item As RadTileViewItem = TryCast(e.OriginalSource, RadTileViewItem)
   If item IsNot Nothing Then
      If item.TileState = TileViewItemState.Maximized Then
         Dim fluidControl As RadFluidContentControl = item.ChildrenOfType(Of RadFluidContentControl)().First()
         Dim lCanvas As Canvas = TryCast(fluidControl.Content, Canvas)
         If lCanvas IsNot Nothing Then
            Dim lTextBox As New TextBox()
            lTextBox.Width = 200
            lTextBox.Height = 30
            lTextBox.Text = "This is a test"
            lTextBox.BorderBrush = New SolidColorBrush(Color.FromArgb(100, 200, 104, 231))
            lTextBox.BorderThickness = New Thickness(3.0R)
            lTextBox.SetValue(Canvas.TopProperty, 250.0R)
            lTextBox.SetValue(Canvas.LeftProperty, 750.0R)
            lCanvas.Children.Add(lTextBox)
         End If
      End If
   End If
End Sub
 

This all sounds great in theory, unfortunately it doesn't work in practice. :(
How can I achieve this?
Thanks in advance,
Dragos

[Zarko]

Hi Dragos,
I'd like to ask you why do you want to add things dynamically in the LargeContent? Why don't you place them in the LargeContent in XAML in the RadFluidContentControl definition? I've created a sample project that have different TextBlocks in the three different states (Green, Orange and Red) and I've also added some code behind to add more TextBlocks dynamically on TileStateChanged. Could you please examine the project and if you have more questions feel free to ask.

All the best,
Zarko
the Telerik team

[Dragos]

Hi there Zarko,
        Thanks for the prompt answer and thanks for the example.
        In the mean time I managed to get it working - what I was missing was the State property in the Model.
        I still don't understand why do I need a special property to hold the value of the TileState - I especially don't like the fact that I have this property in my Model - it's something belonging to the GUI so I wouldn't want this in the Model.
        Why do I need to store the State property? Is there any way of having this only in the ViewModel?

Regards,
Dragos

[Zarko]

Hello Dragos,
You need this property so that you can synchronize the RadTileViewItems TileState property and the RadFluidContentControls State property (if you define your items in XAML you could bind them directly). Another way to synchronize those properties is to handle the PreviewTileStateChanged event and manually change the State property in it. You can read more on the subject here and here.
I've updated the attached project so that it now doesn't use State property and if you have more questions please feel free to ask.

Kind regards,
Zarko
the Telerik team