Telerik Forums / UI for Silverlight Forum / TileView /

RadFluidContentControl trashholds not applied when using ContentTemplates

Telerik UI for Silverlight
Resources Buy Try

10 posts, 0 answers

Halász Levente

21 posts

Member since:
Feb 2010

Posted 14 Aug 2010 Link to this post

I just noticed, that RadFluidContentControl (placed in RadTileViewItem at least) has some state change bug, when instead of setting Content, SmallContent or LargeContent directly, I use templates.

This way it doesn't work:

<DataTemplate x:Key="SmallTemplate">

            <Border BorderBrush="Red" BorderThickness="3" Width="50" Height="50">

            <Grid>

                <TextBlock Text="Small" FontWeight="Bold" />

            </Grid>

            </Border>

        </DataTemplate>

        <DataTemplate x:Key="NormalTemplate">

            <Border BorderBrush="Green" BorderThickness="3" Width="150" Height="150">

                <Grid>

                    <TextBlock Text="Normal" FontWeight="Bold" />

                </Grid>

            </Border>

        </DataTemplate>

        <DataTemplate x:Key="LargeTemplate">

            <Border BorderBrush="Yellow" BorderThickness="3" Width="350" Height="350">

                <Grid>

                    <TextBlock Text="Large" FontWeight="Bold" />

                </Grid>

            </Border>

        </DataTemplate>

<telerik:RadTileView.ContentTemplate>

                <DataTemplate>

                    <telerik:RadFluidContentControl

                SmallToNormalThreshold="150, 150" NormalToSmallThreshold="150, 150"

                NormalToLargeThreshold="350, 350" LargeToNormalThreshold="350, 350"

                        SmallContentTemplate="{StaticResource SmallTemplate}"

                        ContentTemplate="{StaticResource NormalTemplate}"

                        LargeContentTemplate="{StaticResource LargeTemplate}"/>

                </DataTemplate>

</telerik:RadTileView.ContentTemplate>

Can you confirm this behavior. I'm using 2010 Q2 Trial version.

Edit: a workaround I found looks like this:

<telerik:RadFluidContentControl

                SmallToNormalThreshold="150, 150" NormalToSmallThreshold="150, 150"

                NormalToLargeThreshold="350, 350" LargeToNormalThreshold="350, 350">

                        <telerik:RadFluidContentControl.SmallContent>

                                <ContentControl ContentTemplate="{StaticResource SmallTemplate}"/>

                        </telerik:RadFluidContentControl.SmallContent>

                        <telerik:RadFluidContentControl.Content>

                                <ContentControl ContentTemplate="{StaticResource NormalTemplate}"/>

                        </telerik:RadFluidContentControl.Content>

                        <telerik:RadFluidContentControl.LargeContent>

                                <ContentControl ContentTemplate="{StaticResource LargeTemplate}"/>

                        </telerik:RadFluidContentControl.LargeContent>
Viktor Tsvetkov
Admin

382 posts

Posted 18 Aug 2010 Link to this post

Hi Halász Levente,

In the first code snippet you are not getting the desired behavior, because using templates with no content is meaningless, because the idea of the templates is to match them with some content. In your case instead of making templates you can directly set the appropriate <Border... to the SmallContent, Content and LargeContent properties of the RadFluidContentControl. If you have further questions do not hesitate to ask.

On a side note, I'd like to inform you that we've just released an online tool that allows you to reduce the size of your Silverlight applications. For more information, please visit http://blogs.telerik.com/blogs/posts/10-06-10/telerik_assembly_minifier.aspx

Sincerely yours,
Viktor Tsvetkov
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
Halász Levente

21 posts

Member since:
Feb 2010

Posted 19 Aug 2010 Link to this post

Hello Viktor,

You are right, In my project I will use the templates as you stated, that snippet is cut of from my trial application. Anyway can you confirm that the problem exists?

Best regards,

Levente
Viktor Tsvetkov
Admin

382 posts

Posted 19 Aug 2010 Link to this post

Hi Halász Levente,

Could you please explain me what do you mean with "the problem exists"? If your RadFluidContentControl is not databound or if you have not set any content, you are not supposed to set templates, because they have to be applied to some content.

Sincerely yours,
Viktor Tsvetkov
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
Halász Levente

21 posts

Member since:
Feb 2010

Posted 19 Aug 2010 Link to this post

Here is my complete code the way it works as it should:

<DataTemplate x:Key="TileViewHeaderTemplate">

            <TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap">

                <bindingUtils:BindingUtil.MultiBindings>

                <bindingUtils:MultiBindings>

                    <bindingUtils:MultiBinding TargetProperty="Text" Converter="{StaticResource employeeNameDeskNameJoin}">

                    <bindingUtils:MultiBinding.Bindings>

                            <bindingUtils:BindingCollection>

                                                <Binding Path="EmployeeName"/>

                                                <Binding Path="DeskName"/>

                            </bindingUtils:BindingCollection>

                            </bindingUtils:MultiBinding.Bindings>

                            </bindingUtils:MultiBinding>

                    </bindingUtils:MultiBindings>

                </bindingUtils:BindingUtil.MultiBindings>

            </TextBlock>

        </DataTemplate>

        <DataTemplate x:Key="ItemSmallContentTemplate">

            <Border MaxWidth="128" MaxHeight="128" DataContext="{Binding DataSource, ElementName=dataContextProxyTileViewContentTemplate}" >

                    <Image Source="{Binding Path=Picture, Converter={StaticResource fileCacheConverter}}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"/>

            </Border>

        </DataTemplate>

        <DataTemplate x:Key="ItemContentTemplate">

            <Grid MinWidth="250" MinHeight="250" DataContext="{Binding DataSource, ElementName=dataContextProxyTileViewContentTemplate}">

                <Grid.RowDefinitions>

                    <RowDefinition Height="*"/>

                    <RowDefinition Height="*"/>

                    <RowDefinition Height="*"/>

                    <RowDefinition Height="*"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="128"/>

                    <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <ContentControl Grid.Column="0" Grid.RowSpan="6" ContentTemplate="{StaticResource ItemSmallContentTemplate}"/>

                <TextBlock Text="{Binding Path=TicketNumber}" Grid.Column="1" Grid.Row="0" TextWrapping="Wrap"/>

                <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap">

                    <bindingUtils:BindingUtil.MultiBindings>

                    <bindingUtils:MultiBindings>

                        <bindingUtils:MultiBinding TargetProperty="Text" Converter="{StaticResource segmentNameServiceNameServiceCodeJoin}">

                        <bindingUtils:MultiBinding.Bindings>

                                <bindingUtils:BindingCollection>

                                                    <Binding Path="SegmentName"/>

                                                    <Binding Path="ServiceName"/>

                                                    <Binding Path="ServiceCode"/>

                                </bindingUtils:BindingCollection>

                                </bindingUtils:MultiBinding.Bindings>

                                </bindingUtils:MultiBinding>

                        </bindingUtils:MultiBindings>

                    </bindingUtils:BindingUtil.MultiBindings>

                </TextBlock>

                <TextBlock Grid.Column="1" Grid.Row="2" TextWrapping="Wrap">

                        <bindingUtils:BindingUtil.MultiBindings>

                        <bindingUtils:MultiBindings>

                            <bindingUtils:MultiBinding TargetProperty="Text" Converter="{StaticResource workStatusNameDurationJoin}">

                            <bindingUtils:MultiBinding.Bindings>

                                    <bindingUtils:BindingCollection>

                                            <Binding Path="WorkStatusName"/>

                                            <Binding Path="Duration"/>

                                    </bindingUtils:BindingCollection>

                                    </bindingUtils:MultiBinding.Bindings>

                                    </bindingUtils:MultiBinding>

                            </bindingUtils:MultiBindings>

                        </bindingUtils:BindingUtil.MultiBindings>

                </TextBlock>

                <CheckBox Grid.Column="1" Grid.Row="3" Content="{Binding AllowBackOfficeWork, Source={StaticResource languageResources}}"/>

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="ItemLargeContentTemplate">

            <telerik:RadTabControl MinWidth="350" MinHeight="350" DataContext="{Binding DataSource, ElementName=dataContextProxyTileViewContentTemplate}">

                <telerik:RadTabItem Header="{Binding TellerDetailCaption, Source={StaticResource languageResources}}" ContentTemplate="{StaticResource ItemContentTemplate}"/>

                <telerik:RadTabItem Header="{Binding AssignedServicesCaption, Source={StaticResource languageResources}}">

                    <Border Regions:RegionManager.RegionName="OfficeOverviewAssignedServices" Regions:RegionManager.RegionContext="{Binding Converter={StaticResource viewModelWrapperConverter}, ConverterParameter=RegionAssignedServiceProperties}"/>

                </telerik:RadTabItem>

                <telerik:RadTabItem Header="{Binding PrefereceRatesCaption, Source={StaticResource languageResources}}" >

                    <Border Regions:RegionManager.RegionName="OfficeOverviewPreferredServices" Regions:RegionManager.RegionContext="{Binding Converter={StaticResource viewModelWrapperConverter}, ConverterParameter=RegionPreferredServiceProperties}"/>

                </telerik:RadTabItem>

            </telerik:RadTabControl>

        </DataTemplate>

        <DataTemplate x:Key="TileViewContentTemplate">

            <Grid>

                <slControls:DataContextProxy x:Name="dataContextProxyTileViewContentTemplate"/>

                <telerik:RadFluidContentControl

                SmallToNormalThreshold="250, 150" NormalToSmallThreshold="249, 149"

                NormalToLargeThreshold="350, 250" LargeToNormalThreshold="349, 249">

                    <telerik:RadFluidContentControl.SmallContent>

                        <ContentControl ContentTemplate="{StaticResource ItemSmallContentTemplate}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

                    </telerik:RadFluidContentControl.SmallContent>

                    <telerik:RadFluidContentControl.Content>

                        <ContentControl ContentTemplate="{StaticResource ItemContentTemplate}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

                    </telerik:RadFluidContentControl.Content>

                    <telerik:RadFluidContentControl.LargeContent>

                        <ContentControl ContentTemplate="{StaticResource ItemLargeContentTemplate}" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

                    </telerik:RadFluidContentControl.LargeContent>

                </telerik:RadFluidContentControl>

            </Grid>

        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" >

            <telerik:RadTileView

                    MinimizedItemsPosition="Right"

                    ItemsSource="{Binding Employees}"

                    ItemTemplate="{StaticResource TileViewHeaderTemplate}"

                    ContentTemplate="{StaticResource TileViewContentTemplate}" IsAnimationOptimized="True" IsItemDraggingEnabled="False" IsItemsAnimationEnabled="False">



                <telerik:RadTileView.ItemContainerStyle>

                    <Style TargetType="telerik:RadTileViewItem">

                        <Setter Property="MinimizedWidth" Value="180"/>

                        <Setter Property="MinimizedHeight" Value="180"/>

                    </Style>

                </telerik:RadTileView.ItemContainerStyle>

            </telerik:RadTileView>

    </Grid>

If I change the TileViewContentTemplate to this

<DataTemplate x:Key="TileViewContentTemplate">

            <Grid>

                <slControls:DataContextProxy x:Name="dataContextProxyTileViewContentTemplate"/>

                <telerik:RadFluidContentControl

                SmallToNormalThreshold="250, 150" NormalToSmallThreshold="249, 149"

                NormalToLargeThreshold="350, 250" LargeToNormalThreshold="349, 249"

                    SmallContentTemplate="{StaticResource ItemSmallContentTemplate}"

                    ContentTemplate="{StaticResource ItemContentTemplate}"

                    LargeContentTemplate="{StaticResource ItemLargeContentTemplate}"/>

            </Grid>

        </DataTemplate>

All I will get the small content. The other to will never show up, no matter how big the render size of the fluid content control is. Hope this way is more clear what I did. Thank you for your effort.

Regards,

Levente
Viktor Tsvetkov
Admin

382 posts

Posted 19 Aug 2010 Link to this post

Hello Halász Levente,

I understand what you have done and in the first code snippet it is fine (because you have explicitly set content). In the second code snippet there is no bug or problem or something else, you just can not do it this way, because it is wrong to set templates when you have no content (you have to explicitly set content or to databind if you want to set templates).

Regards,
Viktor Tsvetkov
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
Halász Levente

21 posts

Member since:
Feb 2010

Posted 19 Aug 2010 Link to this post

Please correct me if I'm wrong, but I do have content trough binding. The FluidControl is part of the ContentTemplate of a RadTileView, which has ItemsSource binded.

<telerik:RadTileView

                    MinimizedItemsPosition="Right"

                    ItemsSource="{Binding Employees}"

                    ItemTemplate="{StaticResource TileViewHeaderTemplate}"

                    ContentTemplate="{StaticResource TileViewContentTemplate}" IsAnimationOptimized="True" IsItemDraggingEnabled="False" IsItemsAnimationEnabled="False">
Viktor Tsvetkov
Admin

382 posts

Posted 19 Aug 2010 Link to this post

Hi Halász Levente,

The RadTileView is databound, not the RadFluidContetnControl. The SmallContent, Content and LargeContent should be explicitly set or databound and then you can apply templates.

Kind regards,
Viktor Tsvetkov
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
Veda

18 posts

Member since:
May 2011

Posted 22 Jun 2011 Link to this post

Hi,
I want to set the height of smallcontent for RadFluidContentControl. Regardless of number of items in RadFluidContentControl, i want the height of smallcontent to be same. I have used the border with in small content but not working.

<telerik:RadFluidContentControl.SmallContent>
                        <Border Height="30">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="15" />
                                <RowDefinition Height="15" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100" />
                                <ColumnDefinition Width="100" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="hi" />
                            <TextBlock Text="hello" Grid.Column="1"/>

                            <TextBlock Text="one" Grid.Row="0" />
                            <TextBlock Text="Two" Grid.Row="1" Grid.Column="1"/>
                        </Grid>
                        </Border>
                    </telerik:RadFluidContentControl.SmallContent>

Please help me.

Regards,
Veda
Zarko
Admin

755 posts

Posted 24 Jun 2011 Link to this post

Hello Veda,
When you set the Borders Height to 30 the small contents height is really 30px, but this doesn't affect the RadTileViewItems height. There are a couple of ways to set the height of the RadTileViewItem in small state:
You can set the MInimizedRowHeight property of the RadTileView to something like 80 and then all minimized items will have Height 80.
You can set the MInimizedRowHeight to Auto and then the minimized items height will depend on their content and on their MinimizedHeight property (if you've set it).
For further references could you please examine the attached project and if you have more questions please feel free to ask.

Best wishes,
Zarko
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

RadFluidContentControl trashholds not applied when using ContentTemplates

Halász Levente

Viktor Tsvetkov

Halász Levente

Viktor Tsvetkov

Halász Levente

Viktor Tsvetkov

Halász Levente

Viktor Tsvetkov

Veda

Zarko