MVVM Pada Windows Presentation Foundation (WPF)
Menerapkan SVVM Pada WPF
Ubah kode pada MainWindow.xaml menjadi seperti berikut
<
Window
x:Class
=
"LatihanMVVM.MainWindow"
Title
=
"MainWindow"
Height
=
"356"
Width
=
"528"
>
<
Window.Resources
>
<
Style
TargetType
=
"TextBlock"
>
<
Setter
Property
=
"FontSize"
Value
=
"20"
/>
<
Setter
Property
=
"FontFamily"
Value
=
"Myriad Pro"
/>
<
Setter
Property
=
"FontWeight"
Value
=
"SemiBold"
/>
<
Setter
Property
=
"Background"
>
<
Setter.Value
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FF508FC4"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FF6F94AD"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFC7F3FF"
Offset
=
"0.302"
/>
</
LinearGradientBrush
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Foreground"
>
<
Setter.Value
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FF5252CE"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FF0000DB"
Offset
=
"0.953"
/>
<
GradientStop
Color
=
"#FF6363CB"
Offset
=
"0.337"
/>
</
LinearGradientBrush
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
TargetType
=
"Label"
>
<
Setter
Property
=
"FontSize"
Value
=
"14"
/>
</
Style
>
<
Style
TargetType
=
"TextBox"
>
<
Setter
Property
=
"Language"
Value
=
"in-IN"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
>
<
Border
x:Name
=
"customBorder"
Background
=
"{TemplateBinding Background}"
CornerRadius
=
"5"
BorderThickness
=
"2"
BorderBrush
=
"Gray"
>
<
ScrollViewer
x:Name
=
"PART_ContentHost"
/>
</
Border
>
<
ControlTemplate.Triggers
>
<
Trigger
Property
=
"IsKeyboardFocused"
Value
=
"True"
>
<
Setter
TargetName
=
"customBorder"
Property
=
"Effect"
>
<
Setter.Value
>
<
DropShadowEffect
BlurRadius
=
"10"
ShadowDepth
=
"0"
Color
=
"#578EC9"
/>
</
Setter.Value
>
</
Setter
>
</
Trigger
>
<
Trigger
Property
=
"IsKeyboardFocused"
Value
=
"False"
>
<
Setter
Property
=
"Foreground"
Value
=
"Gray"
/>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
TargetType
=
"Button"
>
<
Setter
Property
=
"Background"
Value
=
"#DEF2FC"
/>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"FontSize"
Value
=
"15"
/>
<
Setter
Property
=
"Effect"
>
<
Setter.Value
>
<
DropShadowEffect
BlurRadius
=
"10"
ShadowDepth
=
"0"
Color
=
"#578EC9"
/>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"{x:Type Button}"
>
<
Border
x:Name
=
"customBorder"
Background
=
"{TemplateBinding Background}"
CornerRadius
=
"4"
BorderThickness
=
"2"
BorderBrush
=
"Gray"
>
<
ContentPresenter
Content
=
"{TemplateBinding Content}"
HorizontalAlignment
=
"Center"
/>
</
Border
>
<
ControlTemplate.Triggers
>
<
Trigger
Property
=
"IsMouseOver"
Value
=
"True"
>
<
Setter
Property
=
"Background"
Value
=
"#2394CC"
/>
<
Setter
Property
=
"Foreground"
Value
=
"White"
/>
</
Trigger
>
<
Trigger
Property
=
"IsPressed"
Value
=
"True"
>
<
Setter
Property
=
"Effect"
Value
=
"{x:Null}"
/>
</
Trigger
>
<
Trigger
Property
=
"IsEnabled"
Value
=
"False"
>
<
Setter
Property
=
"Effect"
>
<
Setter.Value
>
<
BlurEffect
Radius
=
"3"
/>
</
Setter.Value
>
</
Setter
>
</
Trigger
>
</
ControlTemplate.Triggers
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
</
Style
>
</
Window.Resources
>
<
Grid
>
<
Label
Content
=
"Nama Barang:"
Height
=
"29"
HorizontalAlignment
=
"Left"
Margin
=
"0,49,0,0"
Name
=
"label2"
VerticalAlignment
=
"Top"
HorizontalContentAlignment
=
"Right"
Width
=
"107"
/>
<
TextBox
Height
=
"23"
HorizontalAlignment
=
"Stretch"
Margin
=
"112,55,12,0"
Name
=
"textBox1"
VerticalAlignment
=
"Top"
/>
<
Label
Content
=
"Jumlah:"
Height
=
"27"
HorizontalAlignment
=
"Left"
Margin
=
"1,86,0,0"
Name
=
"label3"
VerticalAlignment
=
"Top"
Width
=
"106"
HorizontalContentAlignment
=
"Right"
/>
<
TextBox
Height
=
"23"
HorizontalAlignment
=
"Left"
Margin
=
"113,90,0,0"
Name
=
"textBox2"
VerticalAlignment
=
"Top"
Width
=
"62"
/>
<
Label
Content
=
"Harga:"
Height
=
"28"
HorizontalAlignment
=
"Left"
Margin
=
"12,122,0,0"
Name
=
"label4"
VerticalAlignment
=
"Top"
HorizontalContentAlignment
=
"Right"
Width
=
"95"
/>
<
TextBox
Height
=
"23"
HorizontalAlignment
=
"Left"
Margin
=
"113,127,0,0"
Name
=
"textBox3"
VerticalAlignment
=
"Top"
Width
=
"124"
/>
<
Button
Content
=
"Simpan"
Height
=
"27"
HorizontalAlignment
=
"Left"
Margin
=
"207,228,0,0"
Name
=
"button1"
VerticalAlignment
=
"Top"
Width
=
"82"
/>
<
Label
Content
=
"Diskon (%):"
Height
=
"33"
HorizontalAlignment
=
"Left"
Margin
=
"12,161,0,0"
Name
=
"label5"
VerticalAlignment
=
"Top"
HorizontalContentAlignment
=
"Right"
Width
=
"95"
/>
<
TextBox
Height
=
"23"
HorizontalAlignment
=
"Left"
Margin
=
"113,165,0,0"
Name
=
"textBox4"
VerticalAlignment
=
"Top"
Width
=
"62"
/>
<
Label
Content
=
"Total:"
Height
=
"33"
HorizontalAlignment
=
"Left"
Margin
=
"12,194,0,0"
Name
=
"label6"
VerticalAlignment
=
"Top"
HorizontalContentAlignment
=
"Right"
Width
=
"95"
/>
<
Label
Content
=
"Label"
Height
=
"28"
HorizontalAlignment
=
"Left"
Margin
=
"113,194,0,0"
Name
=
"label7"
VerticalAlignment
=
"Top"
Width
=
"402"
/>
<
TextBlock
Height
=
"28"
HorizontalAlignment
=
"Stretch"
Name
=
"textBlock1"
Text
=
"Tambah Item Penjualan"
VerticalAlignment
=
"Top"
TextAlignment
=
"Center"
Margin
=
"0,12,0,0"
/>
<
Grid.Background
>
<
LinearGradientBrush
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"#FFB7CEFF"
Offset
=
"0.192"
/>
<
GradientStop
Color
=
"White"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FF1648AD"
Offset
=
"0"
/>
</
LinearGradientBrush
>
</
Grid.Background
>
</
Grid
>
</
Window
>
Buat sebuah model baru dengan nama ItemPenjualan
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Text;
using
System.ComponentModel.DataAnnotations;
using
System.ComponentModel.DataAnnotations.Schema;
namespace
LatihanMVVM
{
public
class
ItemPenjualan
{
public
ItemPenjualan()
{
DiskonPersen = 0;
}
public
long
Id {
get
;
set
; }
public
string
NamaBarang {
get
;
set
; }
public
int
Jumlah {
get
;
set
; }
public
decimal
Harga {
get
;
set
; }
public
decimal
DiskonPersen {
get
;
set
; }
public
decimal
Total()
{
decimal
total = Jumlah * Harga;
return
total - (DiskonPersen / 100 * total);
}
}
}
Buat view model baru dengan nama ItemPenjualanViewModel
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Text;
using
System.ComponentModel;
namespace
LatihanMVVM
{
class
ItemPenjualanViewModel : INotifyPropertyChanged
{
public
event
PropertyChangedEventHandler PropertyChanged;
private
ItemPenjualan model;
public
ItemPenjualanViewModel(ItemPenjualan itemPenjualan =
null
)
{
this
.model = itemPenjualan ??
new
ItemPenjualan();
}
public
string
NamaBarang
{
get
{
return
model.NamaBarang; }
set
{
if
(value != model.NamaBarang)
{
model.NamaBarang = value;
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"NamaBarang"
));
}
}
}
public
int
Jumlah
{
get
{
return
model.Jumlah; }
set
{
if
(value != model.Jumlah)
{
model.Jumlah = value;
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"Jumlah"
));
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"Total"
));
}
}
}
public
decimal
Harga
{
get
{
return
model.Harga; }
set
{
if
(value != model.Harga)
{
model.Harga = value;
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"Harga"
));
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"Total"
));
}
}
}
public
decimal
DiskonPersen
{
get
{
return
model.DiskonPersen; }
set
{
if
(value != model.DiskonPersen)
{
model.DiskonPersen = value;
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"DiskonPersen"
));
PropertyChanged(
this
,
new
PropertyChangedEventArgs(
"Total"
));
}
}
}
public
string
Total
{
get
{
decimal
? total = model.Total();
if
(!total.HasValue)
{
return
"-"
;
}
else
{
return
total.Value.ToString(
"C"
);
}
}
}
public
ItemPenjualan Model
{
get
{
return
this
.model; }
}
}
}
Komentar
Posting Komentar