How to create Metro style window on WPF using Elysium

Based on the previous blog post – steb-by-step guide to install Elysium, this tutorial shows how to create Metro style window on WPF XAML using Elysium. This tutorial will start with a project which Elysium library are references (both in project reference and XAML namespace reference), please refer to the previous tutorial on how to setup the project if it’s not clear to you.

1. Add reference to Elysium

Add project reference to Elysium and Elysium.Notifications libraries. Add Elysium toggle switch to Window so Elysium xml namespace (xmlns) are added automatically to the XAML file.

Step 1 Add Elysium Reference

2. Copy and replace the XAML of MainWindow.xaml

<Controls:Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:Elysium.Controls;assembly=Elysium"
        xmlns:params="http://schemas.codeplex.com/elysium/params" x:Class="WinPos.App.TestElysium"
        WindowStartupLocation="CenterScreen"
        params:Design.Theme="Dark"
        params:Manager.Theme="Dark" >
    <Controls:Window.ApplicationBar>
        <Controls:ApplicationBar>
            <!-- Right Click on the UI to open Application Bar -->
            <controls:<span class="hiddenSpellError">DropDownCommandButton  Header="THEME"/>
        </Controls:ApplicationBar>
    </Controls:Window.ApplicationBar>
    <Grid>
        <TabControl>
            <TabItem Header="DASHBOARD">
                <Grid>
                    <TextBlock>The Metro UI Dashboard here.
                </Grid>
            <!--<span class="hiddenSpellError" pre=""-->TabItem>
            <TabItem Header="SALES">
                <Grid>
                    <TextBlock>Sales Board here.</TextBlock>
                    <controls:<span class="hiddenSpellError">ProgressRing State="Indeterminate" Width="64" Height="64"/>
                </Grid>
            <!--<span class="hiddenSpellError" pre=""-->TabItem>
            <TabItem Header="PRODUCTS">
                <Grid>
                    <TextBlock>Product Board here.</TextBlock>
                    <controls:<span class="hiddenSpellError">ProgressRing State="Busy" Width="64" Height="64"/>
                </Grid>
            </TabItem>
            <TabItem Header="SAMPLE">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition></RowDefinition>
                        <RowDefinition></RowDefinition>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0">Sample text.</TextBlock>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Controls:Window>

3. Change MainWindow class to inherit Elysium.Controls.Window

namespace Elysium.MetroWindow
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Elysium.Controls.Window
    {
        public MainWindow()
        {

        }
    }
}

Below is the print screen of the result. 🙂

How to add Elysium Light Theme

4. Change to Elysium Dark Theme

Just in case you prefer dark theme over light theme, just edit the code according to the code below.

<Controls:Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Controls="clr-namespace:Elysium.Controls;assembly=Elysium"
        xmlns:params="http://schemas.codeplex.com/elysium/params" x:Class="WinPos.App.TestElysium"
        WindowStartupLocation="CenterScreen"
        params:Design.Theme="Dark"
        params:Manager.Theme="Dark" >

How to install Metro Style using Elysium Dark ThemeYou can download the source code of this example online using this link – Elysium Sample

Advertisements

419 comments

  1. Pingback: how to create a budget | android firmware download

  2. Hey I am so excited I found your site, I really found you by mistake, while I was looking on Askjeeve for something else, Regardless I
    am here now and would just like to say many thanks for
    a remarkable post and a all round thrilling blog (I also love
    the theme/design), I don’t have time to go through it all at the minute but
    I have bookmarked it and also added your RSS feeds,
    so when I have time I will be back to read much more, Please do keep
    up the excellent b.

    Like

  3. Pingback: How To Make A Horse Using Text | Fix How To

  4. Arash the supposed anonymous poster (comment #2), may I remind you that until you apologize to me and the blg1#&82o7;s viewers for your excessive use of uncivilized profanity, you are banned from commenting here.

    Like


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s