RadFluidContentControl - MaximizeMode="One"

[Justin Lee]

I'm using a RadTileView almost exactly like this demo:
http://demos.telerik.com/silverlight/#TileView/FirstLook
    - Uses RadFluidContentControl to have different content for minimized vs. maximized tiles.

The only difference is I always want one tile expanded, so in the RadTileView, I set MaximizeMode="One".

When the page is loaded, the first tile is automatically expanded, and the TileStateChanged event is fired as expected.  However, the RadFluidContentControl is NOT found in the TileStateChanged. So the expanded tile displays the normal content (not the LargeContent).  When I select another tile, the RadFluidContentControl is found, and everything works correctly.  Its just the first selection (the autoselection).

Any ideas on how I can get this to work?

Thanks,
Justin

[Justin Lee]

Of course as soon as I posted this, I figured out a solution....  :)

In the TileStateChanged event, if the RadFluidContentControl is null, I add an event handler to the RadTileViewItem's Loaded event.  Then in the event handler, I get the RadFluidContentControl and set its state to Large.

This works for me, but if there is a better solution, let me know. 

Thanks,
Justin

private void tileView1_TileStateChanged(object sender, RadRoutedEventArgs e)
{
  RadTileViewItem item = e.OriginalSource as RadTileViewItem;
  if (item != null)
  {
    RadFluidContentControl fluid = item.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
    if (fluid != null)
    {
      // Set fluid's size
    }
    else
    {
      item.Loaded += new RoutedEventHandler(item_Loaded);
    }
  }
}

void item_Loaded(object sender, RoutedEventArgs e)
{
  RadTileViewItem item = (RadTileViewItem)sender;
  item.Loaded -= new RoutedEventHandler(item_Loaded);
  RadFluidContentControl fluid = item.ChildrenOfType<RadFluidContentControl>().FirstOrDefault();
  if (fluid != null)
  {
    //Set fluid's size
  }
}

[Zarko]

Hello Justin,
We're glad that you've found a solution for your problem. As for a better solution - I'm not sure if they are better but you could try to bind the State property of the FluidContentControl (read more here) or you could try to set the MaximizeMode=One later - maybe on ItemsCountainerGenerated:
XAML

<telerik:RadTileView x:Name="tileView"
                 MinimizedColumnWidth="250"
                 TileStateChanged="tileView_TileStateChanged">
    <telerik:RadTileView.ContentTemplate>
        <DataTemplate>
            <telerik:RadFluidContentControl ContentChangeMode="Manual">
                <telerik:RadFluidContentControl.SmallContent>
                    <Grid>
                        <TextBlock Text="small" />
                    </Grid>
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <Grid>
                        <TextBlock Text="{Binding RelativeSource={RelativeSource Self}}" />
                    </Grid>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <Grid>
                        <TextBlock Text="Large" />
                    </Grid>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>
    </telerik:RadTileView.ContentTemplate>
</telerik:RadTileView>

C#

public MainPage()
{
    InitializeComponent();

    this.tileView.ItemsSource = Enumerable.Range(0, 6);
    this.tileView.ItemContainerGenerator.StatusChanged += this.ItemContainerGenerator_StatusChanged;
}

void ItemContainerGenerator_StatusChanged(object sender, EventArgs e)
{
    var generator = sender as Telerik.Windows.Controls.ItemContainerGenerator;
    if (generator != null && generator.Status == Telerik.Windows.Controls.Primitives.GeneratorStatus.ContainersGenerated)
    {
        this.tileView.MaximizeMode = TileViewMaximizeMode.One;
    }
}

If you have further questions please feel free to ask.

Kind regards,
Zarko
the Telerik team