W dzisiejszym poście przyglądniemy się dość ciekawej wtyczce rozszerzającej możliwości Visual Studio.
XAML Power Toys jest generatorem widoków, który automatycznie tworzy kod XAML na podstawie wcześniej przygotowanego view-model-u. Siłą rzeczy, skorzystamy z niego najlepiej stosując w naszej aplikacji wzorzec MVVM, chociaż nie jest to oczywiście warunek konieczny.
Wtyczka, w swoim założeniu, ma zdjąć z nas żmudną część pisania XAML-a pozostawiając nam jedynie kwestie związane z jego stylizowaniem i drobnymi korektami.
Wtyczkę zainstalujemy w VS2015, VS2017 i VS2019 za pomocą Manage Extensions:
Przetestujemy wtyczkę w projekcie WPF-owym. Spróbujmy więc teraz stworzyć sobie solucję WPF i stworzyć jakiś testowy view-model dla naszego widoku:
class TestViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private string _name;
private string _surname;
private string _emailAddress;
private int _age;
private bool _isRegistered;
public string Name
{
get => _name;
set
{
_name = value;
OnPropertyChanged();
}
}
public string Surname
{
get => _surname;
set
{
_surname = value;
OnPropertyChanged();
}
}
public string EmailAddress
{
get => _emailAddress;
set
{
_emailAddress = value;
OnPropertyChanged();
}
}
public int Age
{
get => _age;
set
{
_age = value;
OnPropertyChanged();
}
}
public bool IsRegistered
{
get => _isRegistered;
set
{
_isRegistered = value;
OnPropertyChanged();
}
}
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Zanim skorzystamy z dobrodziejstw XAML Power Toys musimy zbudować projekt. Podobnie należy postąpić przy jakiejkolwiek zmianie w view-model. XAML Power Toys wykorzystuje mechanizm reflekcji aby uzyskać meta dane o modelach i view-modelach a następnie wykorzystać je do prezentacji opcji możliwych do wykorzystania przy generowaniu widoku.
To co musimy teraz zrobić, to wewnątrz pustego widoku XAML wcisnąć prawy przycisk myszy i z menu podręcznego wybrać pozycję Xaml Power Toys.
Uruchomimy w ten sposób kreator, który pozwoli nam najpierw wybrać klasę zawierającą nasz view-model:
<Border BorderThickness="1" BorderBrush="Gray" Padding="10" CornerRadius="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="XPowerToysTest" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="85"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Content="Name" />
<TextBox Text="{Binding Path=Name, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True}" Grid.Column="1" Grid.Row="0" x:Name="name" />
<Label Content="Surname" Grid.Row="1" />
<TextBox Text="{Binding Path=Surname, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True}" Grid.Column="1" Grid.Row="1" x:Name="surname" />
<Label Content="Age" Grid.Row="2" />
<TextBox Text="{Binding Path=Age, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True}" Grid.Column="1" Grid.Row="2" x:Name="age" />
<Label Content="Email Address" Grid.Row="3" />
<TextBox Text="{Binding Path=EmailAddress, Mode=TwoWay, ValidatesOnDataErrors=True, ValidatesOnNotifyDataErrors=True, ValidatesOnExceptions=True}" Grid.Column="1" Grid.Row="3" x:Name="emailAddress" />
<Label Content="Is Registered" Grid.Row="4" />
<CheckBox IsChecked="{Binding Path=IsRegistered, Mode=TwoWay}" Grid.Column="1" Grid.Row="4" x:Name="isRegistered" />
</Grid>
</Grid>
</Border>
I to w zasadzie wszystko. Tylko tyle i aż tyle.