Tuesday, March 19, 2013

Silverlight sample contact page using MVVM

<UserControl x:Class="x.ViewPage.ContactPage"
    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"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.SL5"
    xmlns:lib="clr-namespace:PrismEmpire.Lib.Tools"
    x:Name="userControl"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="720">
    <UserControl.Resources>
        <lib:AIVisibilityConverter x:Key="VisibilityConverter"/>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" To="#FF555555" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                            <ColorAnimation Duration="0" To="#FF444444" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled"/>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="rectangle" Fill="#FF333333" Stroke="#FF444444" StrokeThickness="2"/>
                            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{TemplateBinding Content}" VerticalAlignment="Center" TextAlignment="Center" Foreground="#FF999999" FontSize="{TemplateBinding FontSize}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Contact, Source={StaticResource Locator}}">
        <TextBlock HorizontalAlignment="Center" Height="38" Margin="119,47,111,0" TextWrapping="Wrap" Text="Welcome to Prism Empire, thank you for your interest in our Business Solutions. Please fill in the form below and we will contact you within 24 hours." VerticalAlignment="Top" Width="490" Foreground="#FF999999" FontSize="12"/>
        <TextBlock HorizontalAlignment="Center" Height="19" Margin="119,85,380,0" TextWrapping="Wrap" Text="Email: noreply@prismempire.com" VerticalAlignment="Top" Width="221" Foreground="White" FontSize="12"/>
        <TextBlock HorizontalAlignment="Left" Height="30" Margin="119,127,0,0" TextWrapping="Wrap" Text="Contact Name" VerticalAlignment="Top" Width="164" Foreground="#FF999999"/>
        <TextBlock HorizontalAlignment="Left" Height="28" Margin="119,10,0,0" TextWrapping="Wrap" Text="Contact Us" VerticalAlignment="Top" Width="207" Foreground="#FF999999" FontSize="24"/>
        <TextBlock HorizontalAlignment="Left" Height="30" Margin="119,162,0,0" TextWrapping="Wrap" Text="Phone Number" VerticalAlignment="Top" Width="164" Foreground="#FF999999"/>
        <TextBlock HorizontalAlignment="Left" Height="30" Margin="119,197,0,0" TextWrapping="Wrap" Text="Email" VerticalAlignment="Top" Width="164" Foreground="#FF999999"/>
        <TextBlock HorizontalAlignment="Left" Height="30" Margin="119,232,0,0" TextWrapping="Wrap" Text="Company" VerticalAlignment="Top" Width="164" Foreground="#FF999999"/>
        <TextBlock HorizontalAlignment="Left" Height="30" Margin="119,267,0,0" TextWrapping="Wrap" Text="Message" VerticalAlignment="Top" Width="164" Foreground="#FF999999"/>
        <TextBox x:Name="contactName" Text="{Binding Model.ContactName, Mode=TwoWay}" HorizontalAlignment="Left" Height="25" Margin="242,123,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="240"/>
        <TextBlock Visibility="{Binding IsContactNameValid, Converter={StaticResource VisibilityConverter}, Mode=TwoWay}"
                   HorizontalAlignment="Left" Height="30" Margin="489,127,0,0" TextWrapping="Wrap" Text="Contact name is empty." VerticalAlignment="Top" Width="164" Foreground="Red"/>
        <TextBox x:Name="phoneNumber" Text="{Binding Model.PhoneNumber, Mode=TwoWay}" HorizontalAlignment="Left" Height="25" Margin="242,158,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="240"/>
        <TextBox x:Name="email" Text="{Binding Model.Email, Mode=TwoWay}" HorizontalAlignment="Left" Height="25" Margin="242,193,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="240"/>
        <TextBox x:Name="companyName" Text="{Binding Model.CompanyName, Mode=TwoWay}" HorizontalAlignment="Left" Height="25" Margin="242,228,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="240"/>
        <TextBox x:Name="message" Text="{Binding Model.Message, Mode=TwoWay}" HorizontalAlignment="Left" Height="57" Margin="242,263,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="240"/>
        <TextBlock Visibility="{Binding IsEmailValid, Converter={StaticResource VisibilityConverter}, Mode=TwoWay}"
                   HorizontalAlignment="Left" Height="30" Margin="489,197,0,0" TextWrapping="Wrap" Text="Email format is incorrect." VerticalAlignment="Top" Width="164" Foreground="Red"/>
        <Button Content="Send" HorizontalAlignment="Left" Height="25" Margin="397,365,0,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top" Width="85">
            <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <cmd:EventToCommand Command="{Binding SendCommand}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        </Button>
        <Button Content="Clear" HorizontalAlignment="Left" Height="25" Margin="307,365,0,0" Style="{StaticResource ButtonStyle1}" VerticalAlignment="Top" Width="85">
            <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <cmd:EventToCommand
                                    Command="{Binding Contact.ClearCommand, Source={StaticResource Locator}}"
                                    CommandParameter="{Binding ElementName=userControl}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left" Height="30" Margin="242,325,0,0" TextWrapping="Wrap"
                   Text="{Binding IsSentMail, Mode=TwoWay}" VerticalAlignment="Top" Width="240" Foreground="White"/>
    </Grid>
</UserControl>

No comments: