MVVM模式--游戏地图编辑器开发随笔(3)

相较于上一篇的数据绑定问题,这次也提及相关的问题,只不过是在View层面追溯到ViewModel的绑定问题。这次主要是关于RelayCommand,以及数据绑定的问题。

在实际运用之中,我们时常需要把一个程序的一个空间包装成一个用户控件来单独编写,再添加到主窗体之中,不少这种用户控件内部都需要有指令(Command)来触发一系列动作,但是主Model和主ViewModel都在MainWindow的工程之中,这就涉及到用户控件与主窗体在MVVM模式中事件的触发与绑定。
首先假设我们有一个Menu的UserControl,这个用户控件里面只有一个Menu,然后把这个工程引用到主窗体之中,并且把空间命名为uc,那么它在主窗体的引用如下:

        <uc:MenuControl Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" 
                        DataContext="{Binding Menu}">
        <!-- Others -->

        </uc:MenuControl>

十分简单明了的引用,其中DataContext绑定的MenuControl在主窗体之中的ViewModel,这个ViewModel负责读取总体的Model以及所有MenuControl的逻辑。
现在架设一个情况,我们在点击Menu里的一个MenuItem之后需要出发一个指令,改变一个值,并且通知主窗体来完成一些逻辑。在之前的文章中我们已经说过,值在用户控件与主窗体之间的绑定依靠的是暴露成依赖属性来绑定到主窗体的ViewModel上,通过设定绑定的Mode来达到各种效果,在此就不贴代码了。那么问题就来了,UserControl本身就是一个黑盒,他自身内部的ViewModel实现的逻辑并不能与主窗体进行交互。这个时候采取一个比较巧妙的办法,我们在UserControl的后台文件(MenuControl.xaml.cs)后台定义一个事件,在View中触发这个指令的时候我们让这个指令执行这个事件,自定义路由事件(RoutedEvent)是与依赖属性一样暴露在控件之外的,可以与ViewModel中的属性绑定,再通过MVVM模式中EventToCommand标签来把事件转化为指令,再将这个指令与总窗体的ViewModel里的RelayCommand所绑定,就达到的传出的目的:

        <uc:MenuControl Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="3" 
                        DataContext="{Binding Menu}">
                <i:EventTrigger EventName="EventInMenuControl">
                    <command:EventToCommand Command="{Binding RelayCommandInMainWindow}"></command:EventToCommand>
                </i:EventTrigger>
        </uc:MenuControl>

其中在后台代码中定义路由事件:

        public event EventHandler EventInMenuControl
        {
            add { AddHandler(EventInMenuControlEvent, value); }
            remove { RemoveHandler(EventInMenuControlEvent, value); }
        }

        public static readonly RoutedEvent EventInMenuControlEvent = EventManager.RegisterRoutedEvent(
        "EventInMenuControl", RoutingStrategy.Bubble, typeof(EventHandler), typeof(MapEditorControl));

而在绑定到主窗体的RelayCommand的时候有一个MVVM小bug,一开始我遇到也是百思不得其解,后来Revert之后逐步复位才找出。
假设在主窗体MenuViewModel.cs文件中定义的RelayCommandInMainWindow如下:

    public class MenuViewModel : ViewModelBase
    {
        public RelayCommand RelayCommandInMainWindow { get; set; }
        private XmlDocument File;

        public MenuViewModel()
        {

            RelayCommandInMainWindow = new RelayCommand(() =>
            {
                File = new XmlDocument();
                File.Load("D:\\File.xml");
            });
         }
     }

在这种情况下触发这个RelayCommand的时候这个指令并不会被执行,这个是MVVM不支持弱引用的一个BUG,不能闭包引用外围变量,需要在内部定义,这个bug在5.4.0中得到了解决,但是5.4.0一直是alpha版本,详情见MVVM ToolKit

===========================================================
接下来继续讨论MenuControl内部的问题,我们在上一篇说过动态绑定数据并显示的方法,但是运用到目录中就会遇到问题,先看代码:

    <Menu Margin="0,0,0,0" SnapsToDevicePixels="True" DataContext="{Binding Source={StaticResource Locator}, Path=MenuControl}">
        <MenuItem Header="Test  " ItemsSource="{Binding MenuItem}">
            <MenuItem.ItemTemplate>
                <DataTemplate>
                    <MenuItem Header="{Binding MenuItemText}" Command="{Binding MenuCommand}"/>
                </DataTemplate>
            </MenuItem.ItemTemplate>
        </MenuItem>
    </Menu>

按照我们上次说的,这个代码已经完美的完成了绑定,的确他可以很好的显示动态数据的内容,但是你会发现指令并不会被执行。因为在MenuItem处已经指定了ItemsSource的内容,下面所有的绑定内容都会从ItemsSource绑定的集合中寻找,所以Header能够直接绑定元素名称,但是内部并没有MenuCommand这个东西。在这里需要用到RelativeSource的内容,先贴代码:

            <MenuItem Header="Test" ItemsSource="{Binding MenuItem}">
                <MenuItem.ItemContainerStyle>
                    <Style TargetType="{x:Type MenuItem}">
                        <Setter Property="Command"
                                Value="{Binding DataContext.MenuCommand,
                                                RelativeSource={RelativeSource AncestorType={x:Type MenuItem},
                                                Mode=FindAncestor, AncestorLevel=1}}"/>
                    </Style>
                </MenuItem.ItemContainerStyle>
            </MenuItem>

用RelativeSource寻找Item的祖先,把对象定义为Menu中的一个MenuItem,然后绑定到这个资源的DataContext.MenuCommand就行了,其实是很简单的问题,主要看书。
引以为戒。

欢迎指正

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容