How to assign RadFluidContentControl.SmallContent to minimized view of TileViewItem

[Shanthi Gangatharan]

hi,

I have a tileview with multiple items. maximizing the items is working fine
but when i minimize the tileviewitem, the large content is compressed and displayed in the minimized view.

how can i set the SmallContent to tileviewitem when it was minimized.

[Tihomir Petkov]

Hello Shanthi,

There are two ways to do that:

- if you have a rather static layout with fixed sizes, you can set the threshold properties of the FluidContentControl. Here is a thread that explains the purpose of the threshold properties and how to set them to proper values:
http://www.telerik.com/community/forums/silverlight/tileview/radtileview.aspx#987640

- if your layout is dynamic and the size of the TileView can vary, you can set the ContentChangeMode property of the FluidContentControl to "Manual" and change the visible content on your own. You can do this by attaching to the TileStateChanged event of the TileView. Below is an example of to change the visible content of the FluidContentControl:

private void tileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
{
 RadTileViewItem item = e.Source as RadTileViewItem;
 if (item != null)
 {
  RadFluidContentControl fluidControl = item.ChildrenOfType<RadFluidContentControl>().First();
  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;
   }
  }
 }
}

Let me know if you have further questions.

Sincerely yours,
Tihomir Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Shanthi Gangatharan]

hi Tihomir Petkov,

Thanks for your suggestions
it works for me,
your quick response is helpful for us

[Dharmesh Trivedi]

I get an error at this line
RadFluidContentControl fluidControl = item.ChildrenOfType<RadFluidContentControl>().First();

"Sequence contains no elements"

<UserControl.Resources>
        <DataTemplate x:Key="HeaderTemplate">
            <TextBlock Text="{Binding MonthYear}" />
        </DataTemplate>

        <DataTemplate x:Key="ContentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual"
                                                SmallToNormalThreshold="291, 130"
                                                NormalToSmallThreshold="292, 131"
                                                NormalToLargeThreshold="230, 250"
                                                LargeToNormalThreshold="231, 251">
                <!-- Small Content -->
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Text="Promotion For: " FontWeight="Bold" />
                        <TextBlock Text="{Binding MonthYear}" Grid.Column="1" HorizontalAlignment="Left" />
                    </Grid>
                </telerik:RadFluidContentControl.SmallContent>

                <!-- Normal Content -->
                <telerik:RadFluidContentControl.LargeContent >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <telerikNavigation:RadCoverFlow   
                                        CameraViewpoint="Center"
                                        ItemScale="0.7"
                                        DistanceFromSelectedItem="20"
                                        Margin="10,50,10,0"
                                        DistanceBetweenItems="50"
                                        Grid.Row="0"
                                         Grid.RowSpan="4"
                                        Height="450"
                                        x:Name="AlbumCoverFlow"
                                        Loaded="AlbumCoverFlow_Loaded"
                                        Background="Transparent">
                            <telerikNavigation:RadCoverFlow.ItemTemplate>
                                <DataTemplate>
                                    <Image  Source="{Binding filename}"
                                                       Width="340" Height="200"  
                                                       Stretch="Fill"
                                                       telerikNavigation:RadCoverFlow.EnableLoadNotification="True"
                                                       />
                                </DataTemplate>
                            </telerikNavigation:RadCoverFlow.ItemTemplate>
                        </telerikNavigation:RadCoverFlow>
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
              
              
            </telerik:RadFluidContentControl>
        </DataTemplate>
    </UserControl.Resources>


<Grid>

                                    <telerikNavigation:RadTileView x:Name="tileView"
                                       Grid.Row="1"  Margin="5"    MinimizedItemsPosition="Right" MinimizedRowHeight="20"
                                                                      MinimizedColumnWidth="220"
                                    MaximizeMode="One" IsItemsAnimationEnabled="True"
                                       TileStateChanged="tileView_TileStateChanged"
                                       ItemTemplate="{StaticResource HeaderTemplate}"
                                       ContentTemplate="{StaticResource ContentTemplate}" />
                                </Grid>

[Miroslav]

Hello Dharmesh Trivedi,

Normally the ChildrenOfType method will not work if the visual tree is not created yet. This may be because you are calling the method before the control has appeared.

Could you try putting this method call in a dispatcher?

Normally then the method will be called after the control has been created, i.e.

this.Dispatcher.BeginInvoke( () =>
{
    RadFluidContentControl fluidControl = item.ChildrenOfType<RadFluidContentControl>().First();
    // etc...
});


Kind regards,
Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Dharmesh Trivedi]

it did the trick . not sure why everyone in example works and mine didn't but you said did the magic


thank you :)

[Igor Yalovoi]

Why TileState is not bindable? User should be able to bind to it. MVVM and other advanced patterns is impossible with such nobindable design.

[Tihomir Petkov]

Hi Igor,

We are not aware of issues affecting scenarios that involve binding to the TileState property of RadTileViewItems. Please take a look at the sample project I prepared for you.

What am I missing?

Best wishes,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Igor Yalovoi]

Thank you for your time and efforts to create this demo.

It seems I lack knowledge about RadTileView. I use data binding scenario, so RadTileViewItems are not accessible directly. I made an assumption, that ItemContainerStyle is style of RadTileVewItem, but it seems not, because I have runtime error. How to bind TileState of each RadTileViewItem to ViewModel in my scenario?

            <telerikNavigation:RadTileView Visibility="{Binding TilesViewVisibility}" ItemsSource="{Binding Items}" x:Name="rtvEmployees">

                <telerikNavigation:RadTileView.ItemTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding FullName}" />

                    </DataTemplate>

                </telerikNavigation:RadTileView.ItemTemplate>

                <telerikNavigation:RadTileView.ItemContainerStyle>

                    <Style TargetType="telerikNavigation:RadTileViewItem">

                        <Setter Property="TileState" Value="{Binding TileState}" />

                    </Style>

                </telerikNavigation:RadTileView.ItemContainerStyle>

                <telerikNavigation:RadTileView.ContentTemplate>

                    <DataTemplate>

                        <Views:EmployeeView />

                    </DataTemplate>

                </telerikNavigation:RadTileView.ContentTemplate>

            </telerikNavigation:RadTileView>

[Tihomir Petkov]

Hi Igor,

Thank you for your feedback. I investigated the case and it turned out you have discovered a bug we were not aware of. As you noted, the there is a problem with setting the TileState property via data binding. As a matter of fact, you need to use a ContainerBinding in order to bind it to a property of your business object, but it turned out the bug affects this as well. I logged the issue in our bug tracking system and added 1000 Telerik points to your client account.

Just to let you know, we recently discovered another similar bug that was introduced in the latest release. It affects binding within a ContentTemplate of a RadTileViewItem. We are working on resolving this issue, but cannot commit to releasing a patch in a specific release yet.

Again, thank you for your feedback.

Greetings,
Tihomir Petkov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Alexander Kotchkin]

It says in the release notes of 2010 Q2 that this issue has been fixed.
How do I implement this?  Can you post a sample project?
Thanks,

Jesus

[Valentin.Stoychev]

Hello Jesus Janne,

Can you tell us what scenario you want to see implemented. Please check the demos here and let us know if you need more help:
http://demos.telerik.com/silverlight/#TileView/FirstLook

Sincerely yours,
Valentin.Stoychev
the Telerik team

[Alexander Kotchkin]

My scenario is the same explaine in a previous post:

I am binding the itemsSource to my viewmodel and I need to bind the TitleState as well.  I have a button inside the control that should trigger the tilestate to change, but I need to handle this in my viewmodel.
Also I would like to disable the tresholds, in other words, I just want the control to have 3 states and be independent of the size of the control. 

Sample code:

<telerikNavigation:RadTileView Visibility="{Binding TilesViewVisibility}" ItemsSource="{Binding Items}" x:Name="rtvEmployees">

                <telerikNavigation:RadTileView.ItemTemplate>

                    <DataTemplate>

                        <TextBlock Text="{Binding FullName}" />

                    </DataTemplate>

                </telerikNavigation:RadTileView.ItemTemplate>

                <telerikNavigation:RadTileView.ItemContainerStyle>

                    <Style TargetType="telerikNavigation:RadTileViewItem">

                        <Setter Property="TileState" Value="{Binding TileState}" />

                    </Style>

                </telerikNavigation:RadTileView.ItemContainerStyle>

                <telerikNavigation:RadTileView.ContentTemplate>

                    <DataTemplate>

                        <Views:EmployeeView />

                    </DataTemplate>

                </telerikNavigation:RadTileView.ContentTemplate>

            </telerikNavigation:RadTileView>


Thanks,

Jesus

[Kiril Stanoev]

Hello Jesus,

I've managed to reproduce the issue and I can confirm that container binding in WPF does not work for the TIleState property of RadTileViewItem. We are still not sure what is causing the issue and we will continue on investigating it. Let us know if you have further questions or comments regarding this issue.

Greetings,
Kiril Stanoev
the Telerik team

[Giorgio Galante]

Any progress on this issue?  It's a show-stopper for me at the moment.

[Kiril Stanoev]

Hello Giorgio,

We managed to fix the issue and the fix will be available with this week's internal build. Give it a try and let me know if you experience the same problem again.

Best wishes,
Kiril Stanoev
the Telerik team