Fluid Content Control problem

[Guillaume LUJAN]

Hi,

I have one problem with Fluid Content Control.
I've read the documentation of RadTileView and i've read the "Fluid Content Control" article
 (http://www.telerik.com/help/silverlight/radtileview-fluid-content-control.html).

My problem is in this code :

private void tivSessions_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)

{

    RadTileViewItem item = e.OriginalSource as RadTileViewItem;

    if (item != null)

    { 

            // THIS DOESN'T WORK


        RadFluidContentControl fluidControl = item.Content as RadFluidContentControl;
            // Can't cast item.Content in RadFluidContentControl.



        if (fluidControl != null)

        {

            switch (item.TileState)

            {

                case TileViewItemState.Maximized:

                    fluidControl.State = FluidContentControlState.Large;

                    break;

                case TileViewItemState.Minimized:

                    fluidControl.State = FluidContentControlState.Small;

                    break;

                case TileViewItemState.Restored:

                    fluidControl.State = FluidContentControlState.Normal;

                    break;

            }

        }

    }

}

item.Content is actually my databind object.
I just can't get the RadFluidContent.

Here is my XAML :

<Window x:Class="PDCBrowser.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Loaded="Window_Loaded">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <ComboBox Name="cbbTracks" DisplayMemberPath="TrackId" SelectedValuePath="TrackId"/>
        <Telerik:RadTileView Name="tivSessions" TileStateChanged="tivSessions_TileStateChanged" Grid.Row="1" ItemsSource="{Binding ElementName=cbbTracks, Path=SelectedItem}">
            <Telerik:RadTileView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding ShortTitle}" TextWrapping="WrapWithOverflow"></TextBlock>
                </DataTemplate>
            </Telerik:RadTileView.ItemTemplate>
            <Telerik:RadTileView.ContentTemplate>
                <DataTemplate>
                    <Telerik:RadFluidContentControl  ContentChangeMode="Manual">
                        <Telerik:RadFluidContentControl.SmallContent>
                            <TextBlock>SMALL</TextBlock>
                        </Telerik:RadFluidContentControl.SmallContent>
                        <Telerik:RadFluidContentControl.Content>
                            <TextBlock>MEDIUM</TextBlock>
                        </Telerik:RadFluidContentControl.Content>
                        <Telerik:RadFluidContentControl.LargeContent>
                            <TextBlock>LARGE</TextBlock>
                        </Telerik:RadFluidContentControl.LargeContent>
                    </Telerik:RadFluidContentControl>
                </DataTemplate>
            </Telerik:RadTileView.ContentTemplate>
        </Telerik:RadTileView>
    </Grid>
</Window>

Any ideas ?
Regards.

[Zarko]

Hi Guillaume LUJAN,

 There are a couple of possible solutions:

• The first one(and the one I advise you to do) is to read this article and do it the way it is shown there.
• If you want to continue with your initial idea you'll have to change the code a little bit:

Instead of this line:

RadFluidContentControl fluidControl = item.Content as RadFluidContentControl;

Use this:

RadFluidContentControl fluidControl = item.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();

And add a handler for the Loaded event of the RadTileView to initially set the correct states like this:

private void tivSessions_Loaded(object sender, RoutedEventArgs e)
{
    foreach (var item in this.tivSessions.Items)
    {
        RadTileViewItem container = this.tivSessions.ItemContainerGenerator.ContainerFromItem(item) as RadTileViewItem;

        if (container != null)
        {
            RadFluidContentControl fluidControl = container.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();

            if (fluidControl != null)
            {
                switch (container.TileState)
                {
                    case TileViewItemState.Maximized:
                                fluidControl.State = FluidContentControlState.Large;
                        break;
                    case TileViewItemState.Minimized:
                                fluidControl.State = FluidContentControlState.Small;
                        break;
                    case TileViewItemState.Restored:
                                fluidControl.State = FluidContentControlState.Normal;
                        break;
                }
            }
        }
    }
}

If you have further questions feel free to ask.

 

Greetings,

Zarko

the Telerik team

[Phil]

The "this article" link is broken.

I think I am having the same issue. I modified the code from the help (http://www.telerik.com/help/silverlight/radtileview-fluid-content-control.html) to get to the fluidcontentcontrol, and the code is changing the state as expected, except it doesn't actually change.

Screencast

Xaml:

<UserControl x:Class="OSCARapp.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot" DataContext="{Binding}">
        <telerik:RadTileView Height="auto" HorizontalAlignment="Left" Name="RadTileView1" VerticalAlignment="Top" Width="auto" TileStateChanged="RadTileView_TileStateChanged">
            <telerik:RadTileView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Tagnumber}" Margin="5" VerticalAlignment="Center" />
                    </StackPanel>
                </DataTemplate>
            </telerik:RadTileView.ItemTemplate>

            <telerik:RadTileView.ContentTemplate>
                <DataTemplate>
                    <telerik:RadFluidContentControl ContentChangeMode="Manual" >
                        <telerik:RadFluidContentControl.SmallContent>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Incomingunit}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Serialnumber}" Margin="5" VerticalAlignment="Center" />
                            </StackPanel>
                        </telerik:RadFluidContentControl.SmallContent>
                        <telerik:RadFluidContentControl.Content>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Incomingunit}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Serialnumber}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Jobstatusdesc}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Custcode}" Margin="5" VerticalAlignment="Center" />
                            </StackPanel>
                        </telerik:RadFluidContentControl.Content>
                        <telerik:RadFluidContentControl.LargeContent>
                            <StackPanel Orientation="Vertical">
                                <TextBlock Text="{Binding Incomingunit}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Serialnumber}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Jobstatusdesc}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding Custcode}" Margin="5" VerticalAlignment="Center" />
                                <TextBlock Text="{Binding JobstatusDesc}" Margin="5" VerticalAlignment="Center" />
                            </StackPanel>
                        </telerik:RadFluidContentControl.LargeContent>
                    </telerik:RadFluidContentControl>
                </DataTemplate>
            </telerik:RadTileView.ContentTemplate>

        </telerik:RadTileView>
    </Grid>
</UserControl>

code:

Imports OSCARapp.OscarWS
Imports Telerik.Windows.Controls

Partial Public Class MainPage
    Inherits UserControl

    Private OscarWSProxy As New OSCARapp.OscarWS.OscarWSSoapClient
    Private tagStatus As New List(Of TagStatus)


    Public Sub New()
        InitializeComponent()

        AddHandler OscarWSProxy.GetTeamTagStatusCompleted, AddressOf OscarWSProxy_GetTeamTagStatusCompleted
        OscarWSProxy.GetTeamTagStatusAsync("7")

    End Sub


    Private Sub OscarWSProxy_GetTeamTagStatusCompleted(ByVal sender As Object, ByVal e As OscarWS.GetTeamTagStatusCompletedEventArgs)
        If e.[Error] Is Nothing AndAlso e.Result IsNot Nothing Then
            'Consume the result
            For Each c As TagStatus In e.Result
                Me.tagStatus.Add(c)
            Next
            RadTileView1.ItemsSource = tagStatus
        End If

    End Sub


    Private Sub RadTileView_TileStateChanged(ByVal sender As Object, ByVal e As Telerik.Windows.RadRoutedEventArgs)

        Dim item As RadTileViewItem = TryCast(e.Source, RadTileViewItem)

        If item IsNot Nothing Then

            Dim datatemplate As DataTemplate = TryCast(item.ContentTemplate, DataTemplate)

            If Not datatemplate Is Nothing Then

                Dim fluidControl As RadFluidContentControl = TryCast(datatemplate.LoadContent, RadFluidContentControl)

                If fluidControl IsNot Nothing Then
                    Select Case item.TileState
                        Case TileViewItemState.Maximized
                            fluidControl.State = FluidContentControlState.Large
                            Exit Select
                        Case TileViewItemState.Minimized
                            fluidControl.State = FluidContentControlState.Small
                            Exit Select
                        Case TileViewItemState.Restored
                            fluidControl.State = FluidContentControlState.Normal
                            Exit Select
                    End Select
                End If

            End If

        End If

    End Sub


End Class

What is missing?

[Pavel R. Pavlov]

Hi Phil,

I already answered to this question in your support ticket. However, I will post the same answer here so that others from the community will be able to find it.

Thank you for contacting us. As I can see in your code, you are using the RadTileView control in an MVVM approach. However, the article that you have followed demonstrates how you can use the RadFluidContentControl in XAML defined RadTileView control. In order to use both controls in an MVVM scenario you have to follow the approach described in this article. Also, at the end of the article you can find a link leading to a compilable project.

Please take a look at the project and let us know if you need further assistance.

Regards,
Pavel R. Pavlov
Telerik