第一个MVVM wp7程序

创建一个MVVM wp7程序,从手动组建MVVM程序到使用MVVM Light Toolkit快速创建MVVM程序

一、一步步走向MVVM(一个简单的好友列表)

打开vs2010 Express for windows phone,创建一个Windows Phone Application

image

这是开始的项目结构

image

创建连个文件夹Model和ViewModel,并在ViewModel中添加类ViewModel,实现INotifyPropertyChanged接口,并对PropertyChanged进行一点封装

MainViewModel.cs

MainViewModel
using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.ComponentModel;

using System.Collections.ObjectModel;



using HelloWp7.Model;

namespace HelloWp7.ViewModel

{

    public class MainViewModel : INotifyPropertyChanged

    {

        

        public MainViewModel()

        {

            //初始化数据

            _title = "Friends Book";

            _friends = new ObservableCollection<Friend>(friendService.GetFriends());

        }



        #region dataServices

        private FriendService friendService=new FriendService();

        #endregion



        /// <summary>

        /// 应用名称

        /// </summary>

        private string _appName;

        public string AppName

        {

            get

            {

                return _appName;

            }

            set

            {

                if (_appName == value)

                {

                    return;

                }

                _appName = value;

                RaisePropertyChanged("AppName");

            }

        }





        private string _title;

        /// <summary>

        /// 标题

        /// </summary>

        public string Title

        {

            get

            {

                return _title;

            }

            set

            {

                if (_title == value)

                {

                    return;

                }

                _title = value;

                RaisePropertyChanged("Title");

            }

        }



        

        private ObservableCollection<Friend> _friends;

        public ObservableCollection<Friend> Friends

        {

            get

            {

                return _friends;

            }

            set

            {

                if (value == _friends)

                {

                    return;

                }

                _friends = value;

                RaisePropertyChanged("Friends");

            }

        }







        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

    }

}

 

前台界面:

1.先添加对ViewModel的命名空间的引用

xmlns:mv="clr-namespace:HelloWp7.ViewModel"

 

2.将MainViewModel作为资源配置在页面上

<phone:PhoneApplicationPage.Resources>

        <!--配置ViewModel为资源,执行时会直接初始化-->

        <mv:MainViewModel x:Name="MainViewModel"></mv:MainViewModel>

    </phone:PhoneApplicationPage.Resources>

 

3.将MainViewModel作为DataContext绑定到页面最顶层的Controll上

<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MainViewModel}">

     
4.到具体要显示的控件上绑定要显示的内容就行了
MainPage.xaml
<phone:PhoneApplicationPage 

    x:Class="HelloWp7.MainPage"

    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:mv="clr-namespace:HelloWp7.ViewModel"

    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

    FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    shell:SystemTray.IsVisible="True">



    <phone:PhoneApplicationPage.Resources>

        <!--配置ViewModel为资源,执行时会直接初始化-->

        <mv:MainViewModel x:Name="MainViewModel"></mv:MainViewModel>

    

        

        <DataTemplate x:Name="FriendTemplate" >

            <StackPanel Width="400" Margin="0,5" VerticalAlignment="Top">

                <TextBlock FontSize="39" Text="{Binding Name}"></TextBlock>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Text="{Binding Address}" VerticalAlignment="Top"></TextBlock>                    

                    <TextBlock Text="{Binding PhoneNum}" Margin="10,0" VerticalAlignment="Top"></TextBlock>

                </StackPanel>

            </StackPanel>

        </DataTemplate>

        

        

        <Style x:Key="frdlist" TargetType="ListBox">

            <Setter Property="BorderBrush" Value="White"></Setter>

        </Style>

    </phone:PhoneApplicationPage.Resources>

    

    

    <!--LayoutRoot is the root grid where all page content is placed-->

    <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MainViewModel}">

        <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 AppName}" Style="{StaticResource PhoneTextNormalStyle}"/>

            <TextBlock x:Name="PageTitle" Text="{Binding Title}" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

        </StackPanel>



        <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid> 

        <Canvas Grid.Row="1">

            <ListBox ItemsSource="{Binding Friends}" ItemTemplate="{StaticResource FriendTemplate}" Width="468" Height="370" Canvas.Top="0" />           

        </Canvas>

    </Grid>

 

    <!--Sample code showing usage of ApplicationBar-->

    <!--<phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>

            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>

                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>

    </phone:PhoneApplicationPage.ApplicationBar>-->



</phone:PhoneApplicationPage>

 

MainPage.xaml.cs中没有任何代码(MVVM中不会有事件处理了而是用Command绑定就可以了)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;



namespace HelloWp7

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

    }

}

 

另外两个Model类

Friend.cs

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;



namespace HelloWp7.Model

{

    public class Friend

    {        

        public string Name { get; set; }

        public string Address { get; set; }

        public string Pic { get; set; }

        public string PhoneNum { get; set; }

    }

}

 

FriendService.cs

using System;

using System.Collections.Generic;



namespace HelloWp7.Model

{

    public class FriendService

    {

        public List<Friend> GetFriends()

        {

            List<Friend> friends = new List<Friend>() { 

                new Friend(){ Name="Johnny", Address="北京", PhoneNum="13621010899"},   

                new Friend(){ Name="David", Address="上海", PhoneNum="23621010899"},   

                new Friend(){ Name="John", Address="天津", PhoneNum="33621010899"},   

                new Friend(){ Name="Susan", Address="武汉", PhoneNum="43621010899"},   

                new Friend(){ Name="Badboy", Address="深圳", PhoneNum="53621010899"},

                new Friend(){ Name="Jobs", Address="广州", PhoneNum="11621010899"},   

                new Friend(){ Name="kevin", Address="深圳", PhoneNum="53621010899"}



            };

            return friends;

        }

    }

}

 

项目目前结构为:

image

按F5发布到模拟器(Windows Phone Emulator)中效果为

image

 

下载源码

你可能感兴趣的:(wp7)