Problem with TileState Converter

[Eduardo]

Hi, I am working on an application based on RadTileView, similar to the 'Example' that Telerik provides in

http://www.telerik.com/help/wpf/radtileview-howto-use-fluidcontentcontrol-in-tileview.html

My problem is that raises an exception when TileState property has to be bound through 'tileStateConverter'. If I change the value to Maximized, Minimized o Restored does not crash. The exception is a XamlParseException: A error raises when setting the property ''. (More or less cause the text is displayed to me in Spanish).

Here is the xaml file:

<UserControl.Resources>

        <local:FluidContentStateConverter x:Key="fluidContentStateConverter" />
        <local:TileStateConverter x:Key="tileStateConverter" />

            <!--HeaderedContentControl Resources-->
        <SolidColorBrush x:Key="Pad_BorderBrush" Color="#FF242699"/>
        <SolidColorBrush x:Key="Pad_Background" Color="#FFFFFF"/>
        <SolidColorBrush x:Key="Pad_Header_Background" Color="#FF242699"/>
        <Style x:Key="DefaultHeaderedContentControlStyle" TargetType="telerik:HeaderedContentControl">
            <Setter Property="BorderThickness" Value="1 0 1 1"/>
            <Setter Property="BorderBrush" Value="{StaticResource Pad_BorderBrush}"/>
            <Setter Property="Background" Value="{StaticResource Pad_Background}"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:HeaderedContentControl">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Border Background="{StaticResource Pad_Header_Background}" CornerRadius="4 4 0 0" Padding="10 7" Grid.Row="0">
                                <ContentPresenter ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}"/>
                            </Border>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0 0 4 4" Grid.Row="1">
                                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <DataTemplate x:Key="ItemTemplate">
            <TextBox Text="{Binding Login}" />
        </DataTemplate>

        <!-- RadTileView -->
        <DataTemplate x:Key="ContentTemplate">
            <telerik:RadFluidContentControl ContentChangeMode="Manual" State="{Binding ContentState, Converter={StaticResource fluidContentStateConverter}}">
                <telerik:RadFluidContentControl.SmallContent>
                    <TextBlock Text="Peque"></TextBlock>
                </telerik:RadFluidContentControl.SmallContent>
                <telerik:RadFluidContentControl.Content>
                    <TextBlock Text="Normal"></TextBlock>
                </telerik:RadFluidContentControl.Content>
                <telerik:RadFluidContentControl.LargeContent>
                    <TextBlock Text="Big"></TextBlock>
                </telerik:RadFluidContentControl.LargeContent>
            </telerik:RadFluidContentControl>
        </DataTemplate>

        <Style x:Key="ItemContainerStyle" TargetType="telerik:RadTileViewItem">
            <Setter Property="TileState" Value="{Binding ContentState, Mode=TwoWay, Converter={StaticResource tileStateConverter}}" />
        </Style>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="{StaticResource FondoMalva}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="150" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <telerik:HeaderedContentControl Height="300" HorizontalAlignment="Center" Width="Auto"  VerticalAlignment="Center" Name="HeaderedControlUsers" Style="{StaticResource DefaultHeaderedContentControlStyle}"
         Header="Users">
            <telerik:RadTileView Name="RadTileViewUsers"
                                 ContentTemplate="{StaticResource ContentTemplate}"
                                 ItemContainerStyle="{StaticResource ItemContainerStyle}"
                                 ItemTemplate="{StaticResource ItemTemplate}"
                                 MinimizedColumnWidth="200"
                                 MinimizedItemsPosition="Right"
                                 MinimizedRowHeight="200"/>
        </telerik:HeaderedContentControl>

And here the converter for TileState property:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Data;
using Telerik.Windows.Controls;

namespace NCOP_Mgt
{
    public class TileStateConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var contentState = (ContentState)value;
            switch (contentState)
            {
                case ContentState.SmallContent:
                    return TileViewItemState.Minimized;
                case ContentState.NormalContent:
                    return TileViewItemState.Restored;
                case ContentState.LargeContent:
                    return TileViewItemState.Maximized;
                default:
                    return TileViewItemState.Restored;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var tileState = (TileViewItemState)value;
            switch (tileState)
            {
                case TileViewItemState.Minimized:
                    return ContentState.SmallContent;
                case TileViewItemState.Restored:
                    return ContentState.NormalContent;
                case TileViewItemState.Maximized:
                    return ContentState.LargeContent;
                default:
                    return ContentState.NormalContent;
            }
        }
    }
}

I do know what is happening because for FluidContentStateConverter and its conversion seems is fine..
Thank so much (in advance).

Eduardo

[Eduardo]

Nothing??

[Zarko]

Hello Eduardo,
First of all could you please tell me what are you using Silverlight or WPF? I'm a little bit confused because you are using telerik:HeaderedContentControl which is a Silverlight only control (in WPF there's a build in HeaderedContentControl) but you are also using style binding which is (still) a WPF only feature.
I can advise you to use the build in TileToFluidStateConverter which is in the TileView namespace.
For further references could you pease examine the attached project and if you have more questions please feel free to ask.

Kind regards,
Zarko
the Telerik team

[Eduardo]

Thanks for supporting Zarko.
I am working with Silverlight 4 but the way I do seems like WPF cause is the way I know..
Related to TileState issue, finally I got the functionality I wanted. For do that I used the TileStateChanged event.
But, raises a new doubt, now related to FluidControl and TileViewItems. The idea I have is to keep the tileviewitems pinned. I have seen one of your examples and I think I would get that by handling the event 'PreviewPositionChanged'. The problem is that this event belongs to RadTileViewItem and I have a RadTileView which ContentTemplate is a RadFluidControl. Another option I thought was to add a eventsetter in the ItemContainerStyle but silverlight does not allow. I show you the code:

RadTileView:

<telerik:RadTileView Name="RadTileViewUsers"
                                 ContentTemplate="{StaticResource ContentTemplate}"
                                 ItemTemplate="{StaticResource ItemTemplate}"
                                 TileStateChanged="RadTileViewUsers_TilesStateChanged"
                                 MinimizedColumnWidth="150" MinimizedRowHeight="150"
                                 RowHeight="250"
                                 ColumnWidth="200"
                                 VerticalContentAlignment="Top"
                                 IsDockingEnabled="True"
                                 ItemContainerStyle="{StaticResource draggableItemStyle}"
                                 />

ContentTemplate:

<DataTemplate x:Key="ContentTemplate">
           <telerik:RadFluidContentControl ContentChangeMode="Manual" State="Normal">
               <telerik:RadFluidContentControl.SmallContent>
                   <Image Source="{Binding SmallImage}" />
               </telerik:RadFluidContentControl.SmallContent>
               <telerik:RadFluidContentControl.Content>
                   <Image Source="{Binding Image}" />
               </telerik:RadFluidContentControl.Content>
               <telerik:RadFluidContentControl.LargeContent>
                    <Image Source="{Binding Image}" />
               </telerik:RadFluidContentControl.LargeContent>
           </telerik:RadFluidContentControl>
       </DataTemplate>

The ItemContainerStyle where I would like to put the eventsetter:

<Style TargetType="telerik:RadTileViewItem" x:Key="draggableItemStyle">
            <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
</Style>

Do you have any idea what can I do??

Thanks so much

[Zarko]

Hi Eduardo,
The RadTileView also has a PreviewTilePositionChanged event which wraps the RadTileViewItems so you can use it. Also if don't want to be able to start dragging the pinned items you can handle the PreviewTileDragStarted event.
For further information please examine the attached project and if you have more questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[Eduardo]

Thanks again Zarko! Thanks for the fast answer ans your example xD. It has been worked as I wanted.

If I have more problems I will ask again.

Eduardo.