Minimized vs. Maximized display

[Pete Davis]

I'm struggling with the RadFluidContentControl and the RadTileView and just can't seem to get it figured out.

I've attached the XAML.

What I'm trying to do is set it up so that I have one template for the minimized version (just an image) and one template for the maximized version (with text and buttons and stuff)

From an earlier post, I took this code and modified it for my needs:

        private void 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.Normal;
                             break;
                         case TileViewItemState.Minimized:
                             fluidControl.State = FluidContentControlState.Small;
                             break;
                         case TileViewItemState.Restored:
                             fluidControl.State = FluidContentControlState.Normal;
                             break;
                     }
                 }
             }
        }

But I get an exception on the line item.ChildrenOfType<>() in the .First() call. It's a "Sequence contains no elements" InvalidOperationException.

I'm really struggling and I'm really new to silverlight, so if my xaml is a mess that's why.

Thanks for any help you can provide.

[Pete Davis]

Weird. I thought when I originally posted, I had attached the XAML as separate file, but apparently that's not possible since you only allow image attachments.

Anyway, here's my xaml.

<UserControl x:Class="DVCMaker.ReviewDVCs"
    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="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    mc:Ignorable="d"
    d:DesignHeight="768" d:DesignWidth="1224" >
 
    <ScrollViewer>
        <Canvas x:Name="LayoutRoot" Height="768" Width="1224">
            <telerikNavigation:RadTileView Canvas.Left="0" Canvas.Top="0" Height="768" MinimizedColumnWidth="250" MaximizeMode="One" Name="dvcTileView" Width="1024" TileStateChanged="TileStateChanged" >
                <telerikNavigation:RadTileView.ItemContainerStyle>
                    <Style TargetType="telerikNavigation:RadTileViewItem">
                        <Setter Property="MinimizedHeight" Value="200" />
                    </Style>
                </telerikNavigation:RadTileView.ItemContainerStyle>
                <telerikNavigation:RadTileView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding SubmitterName}" />
                    </DataTemplate>
                </telerikNavigation:RadTileView.ItemTemplate>
                <telerikNavigation:RadTileView.ContentTemplate>
                    <DataTemplate>
                        <Grid>
                            <telerik:RadFluidContentControl SmallToNormalThreshold="110, 80"
								NormalToSmallThreshold="110, 80" NormalToLargeThreshold="200, 150"
								LargeToNormalThreshold="200, 150" x:Name="radFluid">
                                <telerik:RadFluidContentControl.SmallContent>
                                    <Grid>
                                        <Image Source="{Binding DVCImage}" Stretch="Uniform"/>
                                    </Grid>
                                </telerik:RadFluidContentControl.SmallContent>
                                <telerik:RadFluidContentControl.Content>
                                    <Grid>
                                        <StackPanel Margin="40" HorizontalAlignment="Left"
                                VerticalAlignment="Top">
                                            <StackPanel Orientation="Horizontal">
                                                <TextBlock Text="User:" FontWeight="Bold"
                                        FontSize="12" FontFamily="Verdana" />
                                                <TextBlock Text="{Binding SubmitterName}" FontSize="12"
                                        FontFamily="Verdana" />
                                            </StackPanel>
                                            <StackPanel Orientation="Horizontal" Margin="0, 0, 0, 20" >
                                                <TextBlock Text="Submit Date:" FontWeight="Bold"
                                        FontSize="12" FontFamily="Verdana" />
                                                <TextBlock Text="{Binding SubmitDate}" FontSize="12"
                                        FontFamily="Verdana"/>
                                            </StackPanel>
                                            <Border BorderBrush="Black" BorderThickness="2">
                                                <Image Source="{Binding DVCImage}" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="1" />
                                            </Border>
                                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
                                                <Button Content="Accept" Click="AcceptClicked" Width="80" Height="40" Margin="4"/>
                                                <Button Content="Reject" Click="RejectClicked" Width="80" Height="40" Margin="4"/>
                                            </StackPanel>
                                            <StackPanel x:Name="spRejectReason" Orientation="Horizontal" Visibility="Collapsed" Margin="0, 5, 0, 0"  HorizontalAlignment="Center" >
                                                <TextBlock Text="Rejection Reason:"  Margin="0, 4, 0, 0" />
                                                <TextBox x:Name="txtReason" Width="400" TextChanged="ReasonTextChanged" Margin="4, 0, 4, 0"/>
                                                <Button x:Name="btnConfirm" Content="Confirm" Click="ConfirmClick" IsEnabled="False" />
                                            </StackPanel>
                                        </StackPanel>
                                    </Grid>
                                </telerik:RadFluidContentControl.Content>
                                <telerik:RadFluidContentControl.LargeContent>
                                    <Grid>
                                        <Image Source="{Binding DVCImage}" Stretch="Uniform"/>
                                    </Grid>
                                </telerik:RadFluidContentControl.LargeContent>
                            </telerik:RadFluidContentControl>
                        </Grid>
                    </DataTemplate>
                </telerikNavigation:RadTileView.ContentTemplate>
            </telerikNavigation:RadTileView>
        </Canvas>
    </ScrollViewer>
</UserControl>

[Tina Stancheva]

Hello Pete Davis,

It would be better to use the FindChildByType() method to get the RadFluidContentControl child of the TileViewItem.

I also noticed that in the definition of the RadFluidContentControl the threshold properties are set. However, since you are using the control with RadTileView, you should keep in mind that using both the threshold properties and the TileStateChanged() event handler to control the displayed content, inside the RadTileViewItems, may lead to unexpected behavior. Therefore an additional property should be taken into consideration - ContentChangeMode. RadFluidContentControl's ContentChangeMode property allows to manually change the State of the control, and thus the visible content. Setting the property to "Manual", tells RadFluidContentControl to completely disregard its threshold properties, thus making you responsible for switching the visible content. Setting the property to "Automatic" makes the control use the thresholds again.

You can find more info about the RadFluidContentControl here and here.

In most cases it is better to either set the ContentChangeMode to Manual and control the visible content through the TileStateChanged() event, or use the threshold properties instead.
However, there are scenarios where both approaches can be used. For example, I noticed that in your RadTileView definition, the MaximizeMode is set to One. In this case, you can use the threshold properties to define how to initially display the TileViewItems content. Afterwards, when an item is minimized, the RadFluidContentControl ContentChangeMode can be changed to Manual thus leaving only the TileStateChanged() event handler responsible for switching the visible content.

I prepared a sample project illustrating this approach. Please take a look at it and let me know if it works for you or if you need more info.

Sincerely yours,
Tina Stancheva
the Telerik team