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

XBOX menu using TileList and CoverFlow

1 Answer 8 Views
TileList
This is a migrated thread and some comments may be shown as answers.
Jhon s
Top achievements
Rank 1
Jhon s asked on 16 Dec 2013, 08:43 AM

I created a nice menu like xbox dashboard using TileLIst and cover flow.

here is the code sample:



-----------------Xaml:



<UserControl xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="Tiles.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

d:DesignHeight="600" d:DesignWidth="1200">

<UserControl.Resources>

<Style TargetType="telerik:Tile" x:Key="normal">

<Setter Property="Background" Value="Green"></Setter>

<Setter Property="Cursor" Value="Hand"></Setter>

</Style>

<Style TargetType="telerik:Tile" x:Key="hover">

<Setter Property="Background" Value="Red"></Setter>

</Style>

<Style TargetType="TextBlock" x:Key="menuNormal">

<Setter Property="TextDecorations" Value="Underline"></Setter>

</Style>

<Style TargetType="TextBlock" x:Key="menuSelected">

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White" >

<StackPanel>

<StackPanel x:Name="menuHeader" Orientation="Horizontal" HorizontalAlignment="Center" Margin="8">

<TextBlock Text="Item1" Margin="20,3,20,3" Style="{StaticResource menuSelected}"></TextBlock>

<TextBlock Text="Item2" Margin="20,3,20,3"></TextBlock>

<TextBlock Text="Item3" Margin="20,3,20,3"></TextBlock>

<TextBlock Text="Item4" Margin="20,3,20,3"></TextBlock>

<TextBlock Text="Item5" Margin="20,3,20,3"></TextBlock>

<TextBlock Text="Item6" Margin="20,3,20,3"></TextBlock>

<TextBlock Text="Item7" Margin="20,3,20,3"></TextBlock>

<TextBlock Text="Item8" Margin="20,3,20,3"></TextBlock>

</StackPanel>

<telerik:RadCoverFlow x:Name="RadCoverFlow1" RotationY="0" Height="600" VerticalAlignment="Center" IsReflectionEnabled="False" SelectionChanged="RadCoverFlow1_SelectionChanged" DistanceBetweenItems="1000" >

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

<telerik:RadCoverFlowItem Width="1000" Height="600" >

<telerik:RadTileList HorizontalAlignment="Center" telerik:StyleManager.Theme="Windows8">

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

<telerik:Tile>

<TextBlock Text="Tile Item"></TextBlock>

</telerik:Tile>

</telerik:RadTileList>

</telerik:RadCoverFlowItem>

</telerik:RadCoverFlow>

</StackPanel>

</Grid>

</UserControl>









------Source:



Partial Public Class MainPage

Inherits UserControl

Public Sub New()

InitializeComponent()

For Each cover As Telerik.Windows.Controls.RadCoverFlowItem In RadCoverFlow1.Items

Dim tileList As Telerik.Windows.Controls.RadTileList = cover.Content

For Each tile As Telerik.Windows.Controls.Tile In tileList.Items

tile.Style = Me.Resources("normal")

AddHandler tile.MouseEnter, AddressOf tile_MouseEnter

AddHandler tile.MouseLeave, AddressOf tile_MouseLeave

Next

 

Next

RadCoverFlow1.SelectedIndex = 0

For Each tb As TextBlock In menuHeader.Children

AddHandler tb.MouseLeftButtonDown, AddressOf menu_MouseLeftButtonDown

Next

End Sub

Private Sub tile_MouseEnter(sender As Object, e As MouseEventArgs)

Dim tile As Telerik.Windows.Controls.Tile = sender

tile.Style = Me.Resources("hover")

End Sub

Private Sub tile_MouseLeave(sender As Object, e As MouseEventArgs)

Dim tile As Telerik.Windows.Controls.Tile = sender

tile.Style = Me.Resources("normal")

End Sub

Private Sub RadCoverFlow1_SelectionChanged(sender As System.Object, e As System.Windows.Controls.SelectionChangedEventArgs)

For Each tb As TextBlock In menuHeader.Children

tb.Style = Me.Resources("menuNormal")

Next

CType(menuHeader.Children(RadCoverFlow1.SelectedIndex), TextBlock).Style = Me.Resources("menuSelected")

End Sub

Private Sub menu_MouseLeftButtonDown(sender As Object, e As MouseButtonEventArgs)

Dim Index As Integer = 0

For Each tb As TextBlock In menuHeader.Children

If tb.Equals(sender) Then

RadCoverFlow1.SelectedIndex = Index

Exit For

End If

Index += 1

Next

End Sub

End Class


1 Answer, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 16 Dec 2013, 05:14 PM
Hello Jhon,

Thank you for sharing your project with the community. I have updated your telerik points. 


Regards,
Maya
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
TileList
Asked by
Jhon s
Top achievements
Rank 1
Answers by
Maya
Telerik team
Share this question
or