你的位置:首页 > ASP.net教程

[ASP.net教程]WPF学习10:基于MVVM Light 制作图形编辑工具(1)


    图形编辑器的功能如下图所示:

    image

    除了MVVM Light 框架是一个新东西之外,本文所涉及内容之前的WPF学习0-9基本都有相关介绍。

    本节中,将搭建编辑器的界面,搭建MVVM Light 框架的使用环境。

 


 

界面

    image

<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

    首先是添加引用文件。

    image

    前三个为框架构成部分,ServiceLocation负责依赖反转。通过Interactivity我们可以扩展XAML,使得用前台代码就可以完成向ViewModel传参的功能。

    创建ViewModel文件夹,其下创建MainViewModel ViewModelLocator两个文件。

    image

    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中创建容器资源。

image

    圈出的部分为需要添加的代码。

   

    在主窗体的前台代码中配置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>

    结果:

    image

    下一节将会完成画布的生成与三个基本形状的绘制。