图形编辑器的功能如下图所示：
除了MVVM Light 框架是一个新东西之外，本文所涉及内容之前的WPF学习0-9基本都有相关介绍。
本节中，将搭建编辑器的界面，搭建MVVM Light 框架的使用环境。
界面
<Window x:Class="GraphEditor.MainWindow" ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Background="#FFFFFF"> <Window.Resources> <Style x:Key="StatusBarButton" TargetType="RadioButton"> <Setter Property="Width" Value="30"/> <Setter Property="Height" Value="30"/> <Setter Property="Margin" Value="0 10 0 0"/> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="1"/> </Style> </Window.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <!--工具栏--> <StackPanel Grid.Row="0" Orientation="Horizontal" Margin="5 5 5 5" Grid.ColumnSpan="2"> <Button Margin="10 0 10 0">配置</Button> <TextBlock VerticalAlignment="Center">外框颜色：</TextBlock> <ComboBox Width="100" Margin="0 0 10 0" ItemsSource="{Binding AvailiableColors}" SelectedItem="{Binding BorderColor}"> <ComboBox.ItemTemplate> <DataTemplate> <Rectangle Width="100" Height="15" Fill="{Binding}"></Rectangle> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> <TextBlock VerticalAlignment="Center">填充颜色：</TextBlock> <ComboBox Width="100" Margin="0 0 10 0"></ComboBox> <Button Margin="0 0 10 0">输出</Button> </StackPanel> <!--状态选择栏--> <ToolBarTray Grid.Column="0" Grid.RowSpan="2" Margin="0 50 0 0" Orientation="Vertical"> <ToolBar> <RadioButton Style="{StaticResource StatusBarButton}">缩放</RadioButton> <RadioButton Style="{StaticResource StatusBarButton}">移动</RadioButton> <RadioButton Style="{StaticResource StatusBarButton}"> <Line X1="0" Y1="0" X2="15" Y2="15" Stroke="Black" StrokeThickness="1"></Line> </RadioButton> <RadioButton Style="{StaticResource StatusBarButton}"> <Rectangle Width="20" Height="15" Stroke="Black" StrokeThickness="1"></Rectangle> </RadioButton> <RadioButton Style="{StaticResource StatusBarButton}"> <Ellipse Width="20" Height="20" Stroke="Black" StrokeThickness="1"></Ellipse> </RadioButton> </ToolBar> </ToolBarTray> <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Grid.Column="1" Grid.Row="1"> <Canvas> <Border> <Image></Image> </Border> </Canvas> </ScrollViewer> </Grid></Window>
MVVM Light
首先是添加引用文件。
前三个为框架构成部分，ServiceLocation负责依赖反转。通过Interactivity我们可以扩展XAML，使得用前台代码就可以完成向ViewModel传参的功能。
创建ViewModel文件夹，其下创建MainViewModel ViewModelLocator两个文件。
MainViewModel继承ViewModelBase即可,我们在这里写一个Command的例子。
class MainViewModel : ViewModelBase{ private ICommand _showPrompt; public ICommand ShowPrompt { get { //前一个Lambda为Excute,后一个为CanExcute return _showPrompt ?? (_showPrompt = new RelayCommand(() => MessageBox.Show("Hello World"), () => true)); } }}
在Locator中对ViewModel进行注册
class ViewModelLocator{ public ViewModelLocator() { ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); SimpleIoc.Default.Register<MainViewModel>(); } public MainViewModel Main { get { return ServiceLocator.Current.GetInstance<MainViewModel>(); } } public static void Cleanup() { }} 在App.xaml中创建容器资源。
圈出的部分为需要添加的代码。
在主窗体的前台代码中配置DataContext，顺便添加Interactivity的引用。
<Window x:Class="GraphEditor.MainWindow" ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Background="#FFFFFF" ="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" DataContext="{Binding Main, Source={StaticResource ResourceKey=Locator}}"> 我们修改一下代码，用于测试是否成功使用了框架。
<Button Margin="0 0 10 0" Command="{Binding ShowPrompt}">输出</Button> 结果：
下一节将会完成画布的生成与三个基本形状的绘制。
原标题：WPF学习10：基于MVVM Light 制作图形编辑工具（1）
关键词：wpf
我知道了 