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

[Solved] myalbums

5 Answers 253 Views

TileView

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

This question is locked. New answers and comments are not allowed.

5 Answers, 1 is accepted

answered on 15 Dec 2009, 10:00 AM

Hello Dharmesh Trivedi,

You can find the download files under your accounts at:

For Licensed users: http://www.telerik.com/account/downloads.aspx
For Trial Users: http://www.telerik.com/account/free-trials.aspx

The following dll-s should be added to the demo to run as expected:

Telerik.Windows.Controls.dll.
Telerik.Windows.Controls.Navigation.dll.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 21 Dec 2009, 08:36 AM

Hi Dharmesh ,

The ContentTemplate of TileView control is changed to contain a RadFluidContentControl. RadFluidControl has two templates for LargeContent ans SmallContent. Which of these templates will be applied depends on the size of tileview item. In the Large content there is palced a Coverflow control.

This forum thread explains how some properties of RadFluidContentControl work in more details.

<telerikNavigation:RadTileView

Margin="5"

x:Name="AlbumTileView"

MinimizedColumnWidth="220"

MaximizeMode="One" IsItemsAnimationEnabled="True">

<telerikNavigation:RadTileView.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Title}" Style="{StaticResource DetailsStyle}" />

</DataTemplate>

</telerikNavigation:RadTileView.ItemTemplate>

<telerikNavigation:RadTileView.ContentTemplate>

<DataTemplate>

<telerik:RadFluidContentControl

SmallToNormalThreshold="291, 130"

NormalToSmallThreshold="292, 131"

NormalToLargeThreshold="230, 250"

LargeToNormalThreshold="231, 251">

<telerik:RadFluidContentControl.SmallContent>

<StackPanel Orientation="Horizontal">

<Image Source="{Binding AlbumImage}"

Height="32"

Width="32"

Margin="10"

VerticalAlignment="Bottom"/>

<TextBlock Text="{Binding ImagesCount}"

FontStyle="Italic"

Margin="5,15,0,15"

VerticalAlignment="Bottom"/>

<TextBlock Text="photos"

Margin="2,15,15,15"

FontStyle="Italic"

VerticalAlignment="Bottom"/>

</StackPanel>

</telerik:RadFluidContentControl.SmallContent>

<telerik:RadFluidContentControl.LargeContent>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="*"/>

<RowDefinition/>

<RowDefinition />

</Grid.RowDefinitions>

<telerikNavigation:RadCoverFlow

CameraViewpoint="Center"

ItemScale="0.7"

DistanceFromSelectedItem="20"

Margin="10,50,10,0"

DistanceBetweenItems="50"

Grid.Row="0"

Grid.RowSpan="4"

Height="450"

x:Name="AlbumCoverFlow"

ItemsSource="{Binding Images}"

Background="Transparent">

<telerikNavigation:RadCoverFlow.ItemTemplate>

<DataTemplate>

<Image Source="{Binding ImageSource}"

Width="340" Height="200"

Stretch="Uniform"

telerikNavigation:RadCoverFlow.EnableLoadNotification="True"

/>

</DataTemplate>

</telerikNavigation:RadCoverFlow.ItemTemplate>

</telerikNavigation:RadCoverFlow>

<Border Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Bottom">

<Border.Background>

<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">

<GradientStop Color="White" Offset="0.504"/>

<GradientStop Offset="1" Color="#19FFFFFF"/>

<GradientStop Color="#19FFFFFF"/>

</LinearGradientBrush>

</Border.Background>

<Border.OpacityMask>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="White" Offset="0.876"/>

<GradientStop Offset="1"/>

<GradientStop Color="#00000000"/>

<GradientStop Color="White" Offset="0.124"/>

</LinearGradientBrush>

</Border.OpacityMask>

<StackPanel Margin="10">

<TextBlock Text="{Binding SelectedItem.Title, ElementName=AlbumCoverFlow}"

FontSize="16"

Height="20"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Style="{StaticResource DetailsStyle}"/>

<TextBlock Grid.Row="0"

Text="{Binding SelectedItem.DateCreated, ElementName=AlbumCoverFlow,Converter={StaticResource DateTimeToStringConverter}}"

FontStyle="Italic"

HorizontalAlignment="Center"

Height="20"

VerticalAlignment="Bottom"

Style="{StaticResource DetailsStyle}"/>

</StackPanel>

</Border>

</Grid>

</telerik:RadFluidContentControl.LargeContent>

<telerik:RadFluidContentControl.Content>

<Border/>

</telerik:RadFluidContentControl.Content>

</telerik:RadFluidContentControl>

</DataTemplate>

</telerikNavigation:RadTileView.ContentTemplate>

</telerikNavigation:RadTileView>

Hope this helps.

Regards,
Rosi
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.