zoukankan      html  css  js  c++  java
  • WPF学习10:基于MVVM Light 制作图形编辑工具(1)

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

        image

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

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


     

    界面

        image

    <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

        首先是添加引用文件。

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

        结果:

        image

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

  • 相关阅读:
    Android中ScrollView嵌套GridView,解决GridView显示不全的问题
    Android图片缓存的框架ImageLoader的使用
    iOS调用系统的电话功能
    SVN提交.a文件的方法
    使用NSURLSession请求需要AD认证的HTTPS服务器
    Android基本控件属性设置
    iOS获取运营商的相关信息
    Android中颜色的设置
    UICollectionView未充满时也可以滚动
    cocos2dx for lua 截屏功能
  • 原文地址:https://www.cnblogs.com/E-WALKER/p/4460898.html
Copyright © 2011-2022 走看看