How to create screen like windows 8 using devexpress controls


Here what I have done is I used tile control of devexpress

I have binded the images on different interval

And video as well

<Window

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

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

xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol" x:Class="WpfDigital.TilesDemo"

Title="TilesDemo"

DataContext="{Binding RelativeSource={RelativeSource Self}}">

<Grid >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="205*"/>

<ColumnDefinition Width="308*"/>

<ColumnDefinition Width="247*"/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition Height="312*"/>

<RowDefinition Height="138*"/>

<RowDefinition Height="55*"/>

</Grid.RowDefinitions>

<dxlc:TileLayoutControl x:Name="tile1" Background="#FF111799" Margin="70,40,-70,-40" Grid.RowSpan="3" Grid.ColumnSpan="3" >

<dxlc:Tile Header="C#" Background="Bisque" Size="ExtraSmall" >

<Image Name="name" Source="Images\download (1).jpg"></Image>

</dxlc:Tile>

<dxlc:Tile Size="Large" ContentSource="{Binding call}" ContentChangeInterval="00:00:02">

<dxlc:Tile.ContentTemplate>

<DataTemplate>

<Grid>

<TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" Text="{Binding Name}"></TextBlock>

<Image HorizontalAlignment="Right" VerticalAlignment="Top" Source="{Binding Picture}"></Image>

</Grid>

</DataTemplate>

</dxlc:Tile.ContentTemplate>

</dxlc:Tile>

<dxlc:Tile Header="SILVERLIGHT" Background="Gainsboro" Size="ExtraLarge">

<Image Name="name1" Source="Images\download.jpg"></Image>

</dxlc:Tile>

<dxlc:Tile Header="SQL" >

<MediaElement Source="D:\Shoeb\Practice\WpfDigital\WpfDigital\Images\abc.mp4" HorizontalAlignment="Left" Height="250" VerticalAlignment="Top" Width="250"/>

</dxlc:Tile>

<dxlc:Tile Header="ORACLE" Background="Chocolate"/>

<dxlc:Tile Header="WPF" Background="Beige"/>

<dxlc:Tile Header="XAML" Background="DarkSeaGreen"/>

<dxlc:Tile Header="LINQ" Background="Black"/>

<dxlc:Tile Header="WWF" Background="DeepSkyBlue"/>

<dxlc:Tile Header="WCF" Background="Red"/>

<dxlc:Tile Header=".NET" Background="Yellow"/>

</dxlc:TileLayoutControl>

</Grid>

</Window>

public List<flag> call { get { return WpfDigital.TilesDemo.flags.DataSource; } }

public class flag {

public string Name { get; set; }

public string Picture { get; set; }

public ImageSource Image {

get {

return string.IsNullOrEmpty(Picture) ? null : new BitmapImage(new Uri(Picture, UriKind.Relative));

}

}

}

public static class flags

{

public static readonly List<flag> DataSource = new List<flag>

{

new flag{Name="Shoeb",Picture="Images/1.jpg"},

new flag{Name="Jhon",Picture="Images/2.jpg" }

};

}
 
 
 
 
 
 

X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now