Fluid Content Control problem

4 posts, 0 answers
  1. Guillaume LUJAN
    Guillaume LUJAN avatar
    1 posts
    Member since:
    Jan 2010

    Posted 03 Dec 2010 Link to this post

    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"
            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.

  2. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 06 Dec 2010 Link to this post

    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
    Browse the videos here>> to help you get started with RadControls for WPF
  3. UI for WPF is Visual Studio 2017 Ready
  4. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 18 Jun 2013 Link to this post

    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"
            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?


  5. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 19 Jun 2013 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top