1

这个月我是 WPF 和 MVVM 设计模式的新手，而且总体上有点不习惯。为了学习，我一直在玩文本框、矩形以及在窗口中显示它们的方法。我从 Ashley Davis 出色的“WPF 中的简单拖动选择”教程开始，介绍了为矩形集合创建视图模型、将列表框绑定到所述集合、使用画布设置列表框的样式、为矩形，以及基本的“橡皮筋”选择逻辑。

从那以后，我在本教程的基础上改进了拖动选择，使其表现得更像 Windows 资源管理器中的选择，并允许从角或边缘调整矩形的大小。

一切都很好，直到我更改了 MainWindow.xaml 以在侧面包含一个用于各种按钮和控件的列，从而将“编辑器表面”网格从主窗口上的 1x1 网格内部移动到 1x2 网格的列，将数据模板移动到网格的资源中（因为它将是窗口中唯一需要它的元素）。一旦我这样做了，我编写的与列表框交互的子例程就开始出现异常——橡皮筋选择不再起作用。没有视觉指示正在选择列表框项目（它们之前已突出显示），并且在拖动选择 mouseUp 事件后询问 listBox.SelectedItems.Count 返回零。

经过一些实验，阅读了这个网站上的许多问题和我的 WPF Unleashed 书的部分，并查看了 msdn 数据绑定概述，到今天早上我仍然找不到我的错误。我相信这是一个数据绑定错误或不正确的数据上下文。

有关所涉及的视图模型的一些详细信息：

数据字段视图模型

...实现 INotifyPropertyChanged 并公开其属性（在本例中为矩形和文本框）X、Y 位置、宽度、高度、可见性和选择状态（一种在多个橡皮筋选择操作中跟踪它的方法）

页面视图模型

...实现 INotifyPropertyChanged，除其他外，还有一个 DataFieldViewModel 类型的 ObservableCollection，称为 DataFields，并将其公开为 ReadOnly 属性。

下面看一下 MainWindow.xaml.vb 和其中一个损坏的子：

Namespace EditorUI


'
' The main window of the editor.
'
Partial Public Class MainWindow
    Inherits Window

    '
    ' Temporary.  Will be replaced with a collection of pages eventually
    '
    Private Pages As PageViewModel

（为简洁起见，删除了其余数据成员和属性）

    Public Sub New()

        InitializeComponent()
        Pages = New PageViewModel

    End Sub

（这是有问题的潜艇之一）

 '
    ' Select all the data fields that intersect the selection rectangle.
    ' Remove any selected data fields which do not.
    '
    Private Sub ApplyDragSelectionRectangle()

        If (LeftMouseDrag) Then

            Dim selectionRectangle As New Rect(Canvas.GetLeft(selectionRectangleBorder), _
                                               Canvas.GetTop(selectionRectangleBorder), _
                                               selectionRectangleBorder.Width, _
                                               selectionRectangleBorder.Height)

            '
            ' Find and select all the list box items.
            '
            For Each dataFieldViewModel As DataFieldViewModel In Me.Pages.GetDataFields
                Dim hitBox As New Rect(dataFieldViewModel.hbX, _
                                       dataFieldViewModel.hbY, _
                                       dataFieldViewModel.hbWidth, _
                                       dataFieldViewModel.hbHeight)

                If (selectionRectangle.IntersectsWith(hitBox)) Then
                    If (dataFieldViewModel.ExistingSelection) Then
                        '
                        ' data field is already part of an existing selection; unselect it
                        '
                        Me.DataFieldListBox.SelectedItems.Remove(dataFieldViewModel)
                    Else
                        Me.DataFieldListBox.SelectedItems.Add(dataFieldViewModel)
                    End If
                End If
                If Not (selectionRectangle.IntersectsWith(hitBox)) Then
                    If (dataFieldViewModel.ExistingSelection) Then
                        '
                        ' data field was part of an existing selection; reselect it
                        '
                        Me.DataFieldListBox.SelectedItems.Add(dataFieldViewModel)
                    Else
                        Me.DataFieldListBox.SelectedItems.Remove(dataFieldViewModel)
                    End If
                End If

            Next
        Else
            dragSelectionCanvas.Visibility = Visibility.Collapsed
            '
            ' update all data fields' existing selection status to the new
            ' selection (first set them all to false to catch data fields 
            ' that were removed)
            '
            For Each dataFieldViewModel As DataFieldViewModel In Me.DataFieldListBox.Items
                dataFieldViewModel.ExistingSelection = False
            Next
            For Each dataFieldViewModel As DataFieldViewModel In Me.DataFieldListBox.SelectedItems
                dataFieldViewModel.ExistingSelection = True
            Next
        End If

    End Sub

最后，这是整个 XAML：

<Window x:Class="EditorUI.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Editor_UI_Experiments.EditorUI"
    Title="Editor UI Experiments" 
    Width="900"
    Height="600"
    Loaded="Window_Loaded" 

    >

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="100" />
            <ColumnDefinition Width="778*" />
        </Grid.ColumnDefinitions>

        <Button
            Grid.Column="0"
            VerticalAlignment="Top"
            Height="25"
            Content="Explode :D"
            Name="Button1" 

            />

        <Grid
            Name="EditorSurface"
            Grid.Column="1"
            MouseDown="Editor_MouseDown"
            MouseUp="Editor_MouseUp"
            MouseMove="Editor_MouseMove"

            >

            <Grid.Background>
                <ImageBrush ImageSource="{Binding GetPageImage}" />

            </Grid.Background>

            <Grid.DataContext>

                <local:PageViewModel/>

            </Grid.DataContext>

            <Grid.Resources>
                <!--
                A data template that defines the visuals for a data field.
                -->
                <DataTemplate 
                DataType="{x:Type local:DataFieldViewModel}"
                    >
                    <!-- 
                    The data field is embedded in a Grid so that we can set the Margin
                    The margin is set so that the ListBox item selection fits nicely around the Rectangle.
                    -->
                    <Grid
                    Margin="0,2,2,2"
                        >
                        <!-- 
                        text box where the data field's response lives (it could be a Database tag,
                        or a check mark, or custom response)
                        -->
                        <TextBox
                        Width="{Binding Width}"
                        Height="{Binding Height}"
                        Background="LightBlue"
                        Cursor="IBeam"
                        MouseDown="TextBox_MouseDown"
                        MouseUp="TextBox_MouseUp"
                        MouseMove="TextBox_MouseMove"
                        Text="Example Text"
                            />
                        <!-- 
                        rectangle that lives on top of the text field to aid in positioning the data field
                        -->
                        <Rectangle
                        Width="{Binding Width}"
                        Height="{Binding Height}"
                        Stroke="LightBlue"
                        StrokeThickness="5"
                        Fill="White"
                        Opacity="0.5"
                        Cursor="SizeAll"
                        MouseDown="Rectangle_MouseDown"
                        MouseUp="Rectangle_MouseUp"
                        MouseMove="Rectangle_MouseMove"
                        Visibility="{Binding Visibility}"
                            />
                        <!--
                        Thumb "handles" to give the user a way to resize the data field
                        -->
                        <!-- 
                        These four live in the corners of a data field and allow resizing on
                        X and Y simultaneously
                        -->
                        <Rectangle
                        Width="7"
                        Height="7"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Left"
                        Margin="-1,-1,0,0"
                        Cursor="SizeNWSE"
                        Fill="LightGray"
                        Stroke="Gray"
                        Opacity="0.6"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <Rectangle
                        Width="7"
                        Height="7"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Right"
                        Margin="0,-1,-1,0"
                        Cursor="SizeNESW"
                        Fill="LightGray"
                        Stroke="Gray"
                        Opacity="0.6"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <Rectangle
                        Width="7"
                        Height="7"
                        VerticalAlignment="Bottom"
                        HorizontalAlignment="Left"
                        Margin="-1,0,0,-1"
                        Cursor="SizeNESW"
                        Fill="LightGray"
                        Stroke="Gray"
                        Opacity="0.6"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <Rectangle
                        Width="7"
                        Height="7"
                        VerticalAlignment="Bottom"
                        HorizontalAlignment="Right"
                        Margin="0,0,-1,-1"
                        Cursor="SizeNWSE"
                        Fill="LightGray"
                        Stroke="Gray"
                        Opacity="0.6"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <!--
                        These four live along the data field's edges and allow resizing in the X
                        or Y direction only.  They have zero opacity to avoid visual clutter
                        -->
                        <Rectangle
                        Height="5"
                        VerticalAlignment="Top"
                        HorizontalAlignment="Stretch"
                        Margin="7,0,7,0"
                        Cursor="SizeNS"
                        Fill="Yellow"
                        Opacity="0"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <Rectangle
                        Height="5"
                        VerticalAlignment="Bottom"
                        HorizontalAlignment="Stretch"
                        Margin="7,0,7,0"
                        Cursor="SizeNS"
                        Fill="Yellow"
                        Opacity="0"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <Rectangle
                        Width="5"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Left"
                        Margin="0,7,0,7"
                        Cursor="SizeWE"
                        Fill="Yellow"
                        Opacity="0"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />
                        <Rectangle
                        Width="5"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Right"
                        Margin="0,7,0,7"
                        Cursor="SizeWE"
                        Fill="Yellow"
                        Opacity="0"
                        Visibility="{Binding Visibility}"
                        MouseDown="Thumb_MouseDown"
                        MouseUp="Thumb_MouseUp"
                        MouseMove="Thumb_MouseMove"

                            />                            
                    </Grid>
                </DataTemplate>

            </Grid.Resources>
            <!--
            This ListBox presents the data fields

            The data template that defines the visuals for each data field is in the 
            resources section at the start of this file.
            -->

            <ListBox
                x:Name="DataFieldListBox"
                ItemsSource="{Binding GetDataFields}"
                SelectionMode="Extended"
                Background="Transparent"

                >
                <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemContainerStyle>
                        <Style
                            TargetType="ListBoxItem"

                            >
                            <Setter
                            Property="Canvas.Left"
                            Value="{Binding X}"

                            />
                            <Setter
                            Property="Canvas.Top"
                            Value="{Binding Y}"

                            />
                        </Style>
                    </ListBox.ItemContainerStyle>
            </ListBox>

            <!--
            Render a drag selection rectangle using a Canvas with a border
            -->
            <Canvas
            x:Name="dragSelectionCanvas"
            Visibility="Collapsed"

                >
                <Border 
                x:Name="selectionRectangleBorder"
                BorderBrush="Blue"
                BorderThickness="1"
                Background="LightBlue"
                CornerRadius="1"
                Opacity="0.5"

                />
            </Canvas>

    </Grid>

</Grid>

我确信我的代码充满了新手错误，但到目前为止它很有趣。希望能快速改进，也许把它变成有用的东西。欢迎提供反馈和见解。如果有人碰巧发现我哪里出错了，我会感激你的。

-汤姆

4

1 回答 1

1

我怀疑这与您DataContext在 XAML 中定义 Grid 的事实有关，但您的拖动事件在代码隐藏中引用了一个对象。因此，您ListBox正在绑定到 的 XAML 副本PageViewModel，而您的代码隐藏正在使用的不同副本PageViewModel

我建议DataContext从 XAML 中删除该属性，而是将其设置在代码隐藏中，例如Me.DataContext = Pages

请记住，设置DataContextin 代码隐藏通常是不好的做法，除非它是应用程序启动代码。

于 2012-06-18T17:44:34.833 回答