This is a migrated thread and some comments may be shown as answers.

RadFluidContentControl trashholds not applied when using ContentTemplates

9 Answers 125 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Halász Levente
Top achievements
Rank 1
Halász Levente asked on 14 Aug 2010, 07:43 AM
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>

9 Answers, 1 is accepted

Sort by
0
Viktor Tsvetkov
Telerik team
answered on 18 Aug 2010, 04:44 PM
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
0
Halász Levente
Top achievements
Rank 1
answered on 19 Aug 2010, 06:12 AM
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
0
Viktor Tsvetkov
Telerik team
answered on 19 Aug 2010, 08:38 AM
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
0
Halász Levente
Top achievements
Rank 1
answered on 19 Aug 2010, 02:13 PM
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
0
Viktor Tsvetkov
Telerik team
answered on 19 Aug 2010, 02:31 PM
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
0
Halász Levente
Top achievements
Rank 1
answered on 19 Aug 2010, 03:35 PM
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">
0
Viktor Tsvetkov
Telerik team
answered on 19 Aug 2010, 04:26 PM
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
0
Veda
Top achievements
Rank 1
answered on 22 Jun 2011, 12:22 PM
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
0
Zarko
Telerik team
answered on 24 Jun 2011, 11:25 AM
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
Tags
TileView
Asked by
Halász Levente
Top achievements
Rank 1
Answers by
Viktor Tsvetkov
Telerik team
Halász Levente
Top achievements
Rank 1
Veda
Top achievements
Rank 1
Zarko
Telerik team
Share this question
or