Click here to Skip to main content
15,894,825 members
Articles / Mobile Apps / Windows Phone 7

RegiRide, a complete Windows Phone application

Rate me:
Please Sign up or sign in to vote.
4.99/5 (51 votes)
24 Jun 2012CPOL17 min read 114.3K   2.5K   123  
A complete WP7 application with SQL compact database, LINQ to SQL, MVVM Light and Dropbox integration
<phone:PhoneApplicationPage
    Style="{StaticResource DefaultPage}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Navigation="clr-namespace:RegiRide.Navigation" xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    Navigation:Navigator.Source="{Binding}"
    xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    x:Class="RegiRide.Views.RideDetailView"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d" d:DesignHeight="696" d:DesignWidth="480"
    shell:SystemTray.IsVisible="True"
    DataContext="{Binding RideDetailViewModel, Source={StaticResource ViewModelLocator}}" BackKeyPress="PhoneApplicationPage_BackKeyPress">

    <phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="ListPickerDataItemTemplate">
            <toolkit:WrapPanel>
                <TextBlock TextWrapping="Wrap" Text="{Binding Model.Name}" />
            </toolkit:WrapPanel>
        </DataTemplate>
        <DataTemplate x:Name="PickerFullModeItemTemplate">
            <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
                <TextBlock Text="{Binding Model.Name}" Margin="12 0 0 0" FontSize="32" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
            </StackPanel>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

    <Custom:Interaction.Triggers>
        <Custom:EventTrigger>
            <Custom:InvokeCommandAction Command="{Binding LoadAddressCommand}"/>
        </Custom:EventTrigger>
    </Custom:Interaction.Triggers>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="{Binding LocalizedResources.ApplicationTitle, Source={StaticResource LocalizedStrings}}" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="{Binding LocalizedResources.RideDetailPageTitle, Source={StaticResource LocalizedStrings}}" Margin="12,-7,12,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,-25,12,0">
            <ScrollViewer>
                <StackPanel x:Name="rideDetailStackPanel" Orientation="Vertical">
                    <TextBlock TextWrapping="Wrap" FontSize="18" Foreground="{StaticResource PhoneSubtleBrush}" Height="24" HorizontalAlignment="Right" Width="444" Text="{Binding LocalizedResources.RideDetailStartAddress, Source={StaticResource LocalizedStrings}}"></TextBlock>
                    <StackPanel HorizontalAlignment="Left" Height="Auto" Margin="12,0,0,0" Orientation="Horizontal">
                        <toolkit:ListPicker Margin="0,0,0,12"
                                        ItemsSource="{Binding StartAddresses}" 
                                        ItemTemplate="{StaticResource ListPickerDataItemTemplate}" 
                                        FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
                                        SelectedIndex="{Binding SelectedStartAddressIndex, Mode=TwoWay}" 
                                        HorizontalAlignment="Left" Width="352" VerticalAlignment="Center"/>
                        <Button x:Name="AddStartAddress" Command="{Binding AddStartAddressCommand}" Style="{StaticResource ImageButtonStyleDark}" Width="48" Height="48" Margin="16,0,0,15" HorizontalAlignment="Center" VerticalAlignment="Bottom" Background="{StaticResource PhoneInactiveBrush}" />
                    </StackPanel>

                    <TextBlock TextWrapping="Wrap" FontSize="18" VerticalAlignment="Top" Foreground="{StaticResource PhoneSubtleBrush}" Margin="12,0,0,0" Height="24" Text="{Binding LocalizedResources.RideDetailEndAddress, Source={StaticResource LocalizedStrings}}"></TextBlock>
                    <StackPanel HorizontalAlignment="Left" Height="Auto" Margin="12,0,0,0" Width="Auto" Orientation="Horizontal">
                        <toolkit:ListPicker Margin="0,0,0,12" 
                                        ItemsSource="{Binding EndAddresses}" 
                                        ItemTemplate="{StaticResource ListPickerDataItemTemplate}" 
                                        FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
                                        SelectedIndex="{Binding SelectedEndAddressIndex, Mode=TwoWay}" 
                                        Width="352" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left" VerticalAlignment="Center">
                        </toolkit:ListPicker>
                        <Button x:Name="AddEndAddress" Command="{Binding AddEndAddressCommand}" Style="{StaticResource ImageButtonStyleDark}" Width="48" Margin="16,0,0,14" Height="48" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
                    </StackPanel>
                    <TextBlock TextWrapping="Wrap" FontSize="18" Margin="12,0,0,0" Foreground="{StaticResource PhoneSubtleBrush}" Height="24" Text="{Binding LocalizedResources.RideDetailDate, Source={StaticResource LocalizedStrings}}"></TextBlock>
                    <toolkit:DatePicker HorizontalAlignment="Left"  Width="216" Value="{Binding SelectedRide.Model.Date, Mode=TwoWay}"/>

                    <TextBlock TextWrapping="Wrap" FontSize="18" Margin="12,0,0,0" Foreground="{StaticResource PhoneSubtleBrush}" Height="24" Text="{Binding LocalizedResources.RideDetailStartMilage, Source={StaticResource LocalizedStrings}}"></TextBlock>
                    <toolkit:PhoneTextBox x:Name="CityTextBox" Text="{Binding SelectedRide.Model.StartMilage, Mode=TwoWay}" InputScope="Digits" Hint="{Binding LocalizedResources.RideDetailStartMilage, Source={StaticResource LocalizedStrings}}" Margin="0" VerticalAlignment="Top" BorderThickness="0,3,3,3" Width="372" HorizontalAlignment="Left" />

                    <TextBlock TextWrapping="Wrap" FontSize="18" Margin="12,0,0,0" Foreground="{StaticResource PhoneSubtleBrush}" Height="24" d:LayoutOverrides="GridBox, VerticalMargin" Text="{Binding LocalizedResources.RideDetailEndMilage, Source={StaticResource LocalizedStrings}}"/>
                    <toolkit:PhoneTextBox x:Name="EndMilageTextBox" Text="{Binding SelectedRide.Model.EndMilage, Mode=TwoWay}" InputScope="Digits" Hint="{Binding LocalizedResources.RideDetailEndMilage, Source={StaticResource LocalizedStrings}}" Margin="0,0,0,-8" VerticalAlignment="Bottom" BorderThickness="0,3,3,3" Height="80" Width="372" HorizontalAlignment="Left"/>
                    <TextBlock TextWrapping="Wrap" FontSize="18" Margin="12,0,0,0" Foreground="{StaticResource PhoneSubtleBrush}" Height="24" Text="{Binding LocalizedResources.RideDetailType, Source={StaticResource LocalizedStrings}}" d:LayoutOverrides="VerticalMargin"/>
                    <StackPanel Margin="12,0" Orientation="Horizontal">
                        <RadioButton Content="{Binding LocalizedResources.RideDetailOptionBusiness, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" Margin="0" IsChecked="{Binding IsBusinessType, Mode=TwoWay}"/>
                        <RadioButton Content="{Binding LocalizedResources.RideDetailOptionPrivate, Source={StaticResource LocalizedStrings}}" HorizontalAlignment="Left" Margin="48,0,0,0" IsChecked="{Binding IsPrivateType, Mode=TwoWay}"/>
                    </StackPanel>
                    <TextBlock TextWrapping="Wrap" FontSize="18" Margin="12,0,0,0" Foreground="{StaticResource PhoneSubtleBrush}" Height="24" d:LayoutOverrides="GridBox, VerticalMargin" Text="{Binding LocalizedResources.RideDetailRemark, Source={StaticResource LocalizedStrings}}"/>
                    <toolkit:PhoneTextBox x:Name="RemarkTextBox" Text="{Binding SelectedRide.Model.Remark, Mode=TwoWay}" Hint="{Binding LocalizedResources.RideDetailRemark, Source={StaticResource LocalizedStrings}}" Margin="0,0,0,-8" VerticalAlignment="Bottom" BorderThickness="0,3,3,3" Height="80"/>
                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.cancel.rest.png" Click="ApplicationBarIconButtonCancel_Click" Text="cancel"/>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.delete.rest.png" Click="ApplicationBarIconButtonDelete_Click" Text="delete"/>
            <shell:ApplicationBarIconButton IconUri="/icons/appbar.check.rest.png" Click="ApplicationBarIconButtonSave_Click" Text="save"/>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect http://www.simpletechture.nl
Netherlands Netherlands
Patrick Kalkman is a senior Software Architect with more than 20 years professional development experience. He works for SimpleTechture where he helps teams develop state of the art web applications.

Patrick enjoys writing his blog. It discusses agile software development. Patrick can be reached at patrick@simpletechture.nl.

Published Windows 8 apps:


Published Windows Phone apps:


Awards:

Best Mobile article of March 2012
Best Mobile article of June 2012

Comments and Discussions