Problem with TileState Converter

6 posts, 0 answers
  1. Eduardo
    Eduardo avatar
    14 posts
    Member since:
    Jul 2011

    Posted 07 Jul 2011 Link to this post

    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
  2. Eduardo
    Eduardo avatar
    14 posts
    Member since:
    Jul 2011

    Posted 11 Jul 2011 Link to this post

    Nothing??
  3. UI for WPF is Visual Studio 2017 Ready
  4. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 12 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. Eduardo
    Eduardo avatar
    14 posts
    Member since:
    Jul 2011

    Posted 13 Jul 2011 Link to this post

    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
  6. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 13 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  7. Eduardo
    Eduardo avatar
    14 posts
    Member since:
    Jul 2011

    Posted 14 Jul 2011 Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready