WPF For Beginners - Learn in 3 days - Udayakumar Mathivanan

2. 2

3. 3

4. 4

6. 6

8. 8

9. 9

10. 10

11. 11

12. 12

15. 15

16. • 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 (“code-
behind”) from the view layer.

20. 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

21. 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

22. MVVM
• View knows ViewModel
• ViewModel knows Models
• But not vice versa.
View ViewModel Model

23. 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.

24. 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

25. Model
• can be Data Model, DTO, POCO, auto-
generated 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. 26

27. SharedSize

28. <Page
xmlns="http://schemas.microsoft.com/winfx/avalon/2005"
xmlns:x="http://schemas.microsoft.com/winfx/xaml/2005">
<TextBlock>Hello World!</TextBlock>
</Page>

29. 29
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();
}
}

31. <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>

32. 32
<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>

33. void innerButton_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello SDN!");
e.Handled = true;
}

35. <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>