WPF學習10：基於MVVM Light 制作圖形編輯工具（1）

    圖形編輯器的功能如下圖所示：

   

    除了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>

---

 

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"
        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>

    結果：

   

    下一節將會完成畫布的生成與三個基本形狀的繪制。