XBOX menu using TileList and CoverFlow

2 posts, 0 answers
  1. Jhon s
    Jhon s avatar
    7 posts
    Member since:
    Dec 2007

    Posted 16 Dec 2013 Link to this post

    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


  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 16 Dec 2013 Link to this post

    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 >>
  3. DevCraft banner
Back to Top