Transcript • MVVM was designed to make use of data binding functions in WPF to better facilitate the separation of view layer development from.

2
3
4
6
8
9
10
11
12
15
• MVVM was designed to make use of data
binding functions in WPF to better
facilitate the separation of view layer
development from the rest of the pattern
by removing virtually all GUI code (“codebehind”) from the view layer.
What's MVVM?
• is an architectural pattern created by
John Gossman from WPF team
• is a variation of MVC pattern
• is similar to Martin Fowler’s
PresentationModel pattern
• WPF Data Binding & Commanding
Motivation and benefits
• Testabiltiy ( ViewModel is easier to unit test than
code-behind or event driven code)
• Clear seperation between UX designer and
developer
• Increases the "Blendability" of your view
• Model never needs to be changed to support
changes to the view
• ViewModel rarely needs to be changed to
support changes to the view
• No duplicated code to update views
MVVM
View
ViewModel
Model
• View knows ViewModel
• ViewModel knows Models
• But not vice versa.
View
• represents the user interface that the user
will see.
• can be a user control or Data Template
• shouldn't contain any logic that you want
to test
• Keep the view as simple as possible.
View Model
An abstraction of View
Connector between View and Model
Keep View State, Value Conversion
No strong or weak (via Interface) reference
of View
• Make VM as testable as possible (e.g. no
call to Singleton class)
• No Control related Stuff in VM
•
•
•
•
Model
• can be Data Model, DTO, POCO, autogenerated proxy of domain class and UI
Model based on how you want to have the
separation between Domain Service and
Presentation Layer
• No reference to ViewModel
26
SharedSize
<Page
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<TextBlock>Hello World!</TextBlock>
</Page>
public class MyApp : Application
{
[STAThread]
static void Main(string[]
args)
{
MyApp app = new MyApp();
app.Startup +=
app.OnApplicationStartup;
app.Run(args);
}
void
OnApplicationStartup(object
sender,
StartupEventArgs e)
{
Window w = new Window();
w.Title = "Mark says:
Hello World!";
w.Show();
}
}
29
<Window x:Class="Demo4.Content.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Title="Demo4.Content">
<StackPanel Orientation=“Vertical">
<Button Name="button1">Just text</Button>
<Button Name="button2">
<Image Source="banner.jpg" Name="image1" Width="100"/>
</Button>
<Button Name="button3">
<StackPanel Orientation="Vertical">
<TextBlock>Just text<LineBreak/>The next line</TextBlock>
<Image Source="banner.jpg" Name="image1" Width="100"/>
</StackPanel>
</Button>
</StackPanel>
</Window>
<Window x:Class="Demo4.Content.Window1"
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005"
Title="Demo4.Content">
<Grid ShowGridLines="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0">Top left</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1">Middle</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2">LRight</TextBlock>
</Grid>
</Window>
32
void innerButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello SDN!");
e.Handled = true;
}
<StackPanel Name="pnlMain">
<TextBlock>Name: </TextBlock>
<TextBox Name="txtName"
Text="{Binding Path=Name}“/>
<TextBlock>City:</TextBlock>
<TextBox Name="txtCity"
Text="{Binding Path=City}“/>
<StackPanel Orientation="Horizontal">
<Button Name="btnPrevious“
Click="btnPrevious_Click">&lt;</Button>
<Button Name="btnNext“
Click="btnNext_Click">&gt;</Button>
</StackPanel>
<ListBox Name="lstCustomers“
IsSynchronizedWithCurrentItem="True“
ItemsSource="{Binding}"/>
</StackPanel>