<metro:Window x:Class="Client.MainWindow"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:Controls="clr-namespace:Client.Controls"
              xmlns:metro="http://schemas.codeplex.com/elysium/theme"
              Title="Messaging Client"
              Width="550"
              Height="625"
              MinWidth="450"
              MinHeight="625"
              Closed="Window_Closed"
              Icon="Images\client.ico">

    <Window.Resources>
        <Storyboard x:Key="OrderStoryboard" Completed="OnOrderStoryboardCompleted">
            <DoubleAnimation x:Name="moveOrder"
                             Duration="00:00:05"
                             From="0"
                             Storyboard.TargetName="imageOrder"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             To="440" />
        </Storyboard>
        <Storyboard x:Key="PaymentStoryboard" Completed="OnPaymentStoryboardCompleted">
            <DoubleAnimation x:Name="movePayment"
                             Duration="00:00:05"
                             From="0"
                             Storyboard.TargetName="imagePayment"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             To="440" />
        </Storyboard>
        <Storyboard x:Key="DeliveryStoryboard" Completed="OnDeliveryStoryboardCompleted">
            <DoubleAnimation x:Name="moveDelivery"
                             Duration="00:00:05"
                             From="0"
                             Storyboard.TargetName="imageDelivery"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             To="440" />
        </Storyboard>
        <Storyboard x:Key="FadeInGiftStoryboard">
            <DoubleAnimation Duration="00:00:02"
                             From="0"
                             Storyboard.TargetName="imageGift"
                             Storyboard.TargetProperty="Opacity"
                             To="1" />
        </Storyboard>
    </Window.Resources>

    <TabControl>
        <TabItem Header="place order">
            <Grid HorizontalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="200" />
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="200" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="300" />
                    <RowDefinition Height="150" />
                    <RowDefinition Height="75" />
                </Grid.RowDefinitions>

                <Canvas Grid.Row="0"
                        Grid.Column="0"
                        Grid.ColumnSpan="3">

                    <Image x:Name="imageOrder"
                           Canvas.Left="0"
                           Canvas.Top="20"
                           Height="60"
                           HorizontalAlignment="Left"
                           Source="Images\order.png" />

                    <Image x:Name="imagePayment"
                           Canvas.Left="0"
                           Canvas.Top="120"
                           Height="60"
                           HorizontalAlignment="Left"
                           Source="Images\payment.png" />

                    <Image x:Name="imageDelivery"
                           Canvas.Left="0"
                           Canvas.Top="220"
                           Height="60"
                           HorizontalAlignment="Left"
                           Source="Images\delivery.png" />
                </Canvas>

                <Image x:Name="imageGift"
                       Grid.Row="1"
                       Grid.Column="1"
                       Opacity="0"
                       Source="Images\gift.png" />

                <Controls:UIMessage x:Name="NotificationLeft"
                                    Grid.Row="2"
                                    Grid.Column="0" />

                <Button Name="btnSubmit"
                        Grid.Row="2"
                        Grid.Column="1"
                        Margin="10"
                        Click="btnSubmit_Click"
                        Content="Submit" />

                <Controls:UIMessage x:Name="NotificationRight"
                                    Grid.Row="2"
                                    Grid.Column="2" />
            </Grid>
        </TabItem>
    </TabControl>
</metro:Window>