Silverlight 4 MVVM开发方式(三)动态换皮-白红宇

Silverlight 4 MVVM开发方式(三)动态换皮

阅读量：4586 次

发布时间：2019-06-09

本文共 5503 字，大约阅读时间需要 18 分钟。

转自

使用MVVM开发方式，可以让程式逻辑与介面分离，

介面设计者只需要知道资料的名称就可以开发介面，

也因此动态更换介面也变得非常容易。

这边我们先设计一个简单的Model和ViewModel

Model就让他有三个栏位，姓名、电话与信箱

ViewModel就做了一个List和时分秒的栏位，以及启动与停止计时的函式，内容如下:

public class DemoViewModel : INotifyPropertyChanged{
private System.Windows.Threading.DispatcherTimer Timer;

private string _Title;
private int _Hour;
private int _Minute;
private int _Second;
private ObservableCollection
           _UserCardList;
private ICommand _StartTimerCommand;
private ICommand _EndTimerCommand;

public string Title {
get { return _Title; }
set {
_Title = value ;
Update( "Title" );
}
}


public int Hour {
get { return _Hour; }
set {
_Hour = value ;
Update( "Hour" );
}
}


public int Minute {
get { return _Minute; }
set {
_Minute = value ;
Update( "Minute" );
}
}


public int Second {
get { return _Second; }
set {
_Second = value ;
Update( "Second" );
}
}


public ObservableCollection
           UserCardList {
get { return _UserCardList; }
set {
_UserCardList = value ;
Update( "UserCardList" );
}
}

public ICommand StartTimerCommand {
get {
if (_StartTimerCommand == null ) _StartTimerCommand = new ActionCommand(StartTimer);
return _StartTimerCommand;
}
}


public ICommand EndTimerCommand {
get {
if (_EndTimerCommand == null ) _EndTimerCommand = new ActionCommand(EndTimer);
return _EndTimerCommand;
}
}


public DemoViewModel() {
_Title = "Dynamic Demo" ;
_UserCardList = new ObservableCollection
          ();
_UserCardList.Add( new UserCard( "A" , "1234567" , "a@demo.com" ));
_UserCardList.Add( new UserCard( "B" , "7654321" , "b@demo.com" ));
_UserCardList.Add( new UserCard( "C" , "1357246" , "c@demo.com" ));
_UserCardList.Add( new UserCard( "D" , "2461357" , "d@demo.com" ));
_UserCardList.Add( new UserCard( "E" , "28825252" , "e@demo.com" ));
_UserCardList.Add( new UserCard( "F" , "55178" , "f@demo.com" ));
_UserCardList.Add( new UserCard( "G" , "3345678" , "g@demo.com" ));
}

private void Timer_Tick( object sender, EventArgs e) {
Hour = DateTime.Now.Hour;
Minute = DateTime.Now.Minute;
Second = DateTime.Now.Second;
}

private void StartTimer() {
Timer = new System.Windows.Threading.DispatcherTimer();
Timer.Interval = TimeSpan.FromSeconds(1);
Timer.Tick += new EventHandler(Timer_Tick);
Timer.Start();
}

private void EndTimer() {
Timer.Stop();
}

private void Update( string name) {
if (PropertyChanged != null ) PropertyChanged( this , new PropertyChangedEventArgs(name));
}

#region INotifyPropertyChanged Members

public event PropertyChangedEventHandler PropertyChanged;

#endregion
}

然后做出一个基本款的介面，

基本介面被一个Border包起来，所以黑框内的才是预设的基本介面，之后我们另外制作一个xaml档，档名为DemoSkin001.xaml，内容如下:

< UserControl
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:sdk ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
xmlns:i ="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei ="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable ="d"
d:DesignWidth ="640" d:DesignHeight ="480" >

< Grid x:Name ="LayoutRoot" >
< sdk:DataGrid x:Name ="dataGrid" AreRowGroupHeadersFrozen ="False" HorizontalAlignment ="Left" Width ="205" ScrollViewer . HorizontalScrollBarVisibility ="Auto" ScrollViewer . VerticalScrollBarVisibility ="Auto" ItemsSource ="{Binding UserCardList}" Margin ="137,8,0,0" Height ="215" VerticalAlignment ="Top" >
< sdk:DataGrid.Columns >
< sdk:DataGridTextColumn Binding ="{Binding Name}" Header ="Name" />
< sdk:DataGridTextColumn Binding ="{Binding Phone}" Header ="Phone" />
< sdk:DataGridTextColumn Binding ="{Binding Email}" Header ="Email" />


< ComboBox Margin ="8,28,0,0" VerticalAlignment ="Top" ItemsSource ="{Binding UserCardList}" DisplayMemberPath ="Name" SelectedItem ="{Binding SelectedItem, ElementName=dataGrid, Mode=TwoWay}" HorizontalAlignment ="Left" Width ="125" d:LayoutOverrides ="HorizontalAlignment" />
< StackPanel Margin ="8,8,0,0" Orientation ="Horizontal" Height ="16" VerticalAlignment ="Top" d:LayoutOverrides ="Height" HorizontalAlignment ="Left" Width ="125" >
< TextBlock HorizontalAlignment ="Left" TextWrapping ="Wrap" Text ="现在时间:" />
< TextBlock HorizontalAlignment ="Left" TextWrapping ="Wrap" Text ="{Binding Hour}" Height ="16" Margin ="5,0,0,0" />
< TextBlock TextWrapping ="Wrap" Text ="{Binding Minute, StringFormat=':{0}'}" Height ="16" HorizontalAlignment ="Left" />
< TextBlock TextWrapping ="Wrap" Text ="{Binding Second, StringFormat=':{0}'}" Height ="16" HorizontalAlignment ="Left" />


