圖形編輯器的功能以下圖所示:架構
除了MVVM Light 框架是一個新東西以外,本文所涉及內容以前的WPF學習0-9基本都有相關介紹。框架
本節中,將搭建編輯器的界面,搭建MVVM Light 框架的使用環境。編輯器
<Window x:Class="GraphEditor.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="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>
首先是添加引用文件。ide
前三個爲框架構成部分,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進行註冊spa
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中建立容器資源。code
圈出的部分爲須要添加的代碼。xml
在主窗體的前臺代碼中配置DataContext,順便添加Interactivity的引用。
<Window x:Class="GraphEditor.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Background="#FFFFFF" xmlns:i="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>
結果:
下一節將會完成畫布的生成與三個基本形狀的繪製。