使用 WPF 创建类似于 MS Word 插入表的行为答案

【问题标题】：Create MS Word Insert Table like behaviour with WPF使用 WPF 创建类似于 MS Word 插入表的行为
【发布时间】：2013-04-10 10:35:11
【问题描述】：

我试图在插入表格时获得与 MS Word 中相同的行为。当我在矩形网格上移动时，我希望矩形变成蓝色，显示表格应该有多少列和行。

我改编了我找到的一个示例，但是当我希望当前矩形左侧和上方的所有矩形都更改填充时，我遇到了困难。

在我的 ViewModel 中，我创建了一个包含 8 个项目的集合：

ObservableCollection<BoardTileViewModel> board = new ObservableCollection<BoardTileViewModel>();
for (int i = 0; i < 8; i++)
{
    board.Add(new BoardTileViewModel(this, i % 4, i / 4));
}
this.Board = new ReadOnlyObservableCollection<BoardTileViewModel>(board);

如您所见，BoardTileViewModel 通过构造函数获取 X/Y 坐标，因此可以用它来做一些事情。我对 ItemsControl 使用以下样式：

<ResourceDictionary
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="TileButtonStyle" TargetType="Button">
        <Setter Property="Margin" Value="0 0 1 1" />
        <Setter Property="Width" Value="30" />
        <Setter Property="Height" Value="30" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Rectangle x:Name="PART_Rectangle" Fill="White" Stroke="Black"></Rectangle>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="PART_Rectangle" Property="Fill" Value="RoyalBlue" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="BoardItemsControlStyle" TargetType="ItemsControl">
        <Setter Property="Width" Value="124" />
        <Setter Property="Height" Value="62" />
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Button Style="{StaticResource TileButtonStyle}" Command="{Binding Check}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

有没有人建议如何设置鼠标所在矩形左侧和上方的所有矩形的填充？

【问题讨论】：

标签： wpf xaml templates styles

【解决方案1】：

我成功了！

如果有人想知道解决方案，我就是这样做的：

我已将样式从资源字典移至窗口（以便能够添加 MouseEnter 事件）。
我在 BoardTileViewModel 中实现了一个 INotifyPropertyChanged 并添加了一个 Fill 属性。我将 Fill 属性绑定到 Rectangle 的 Fill。
在 MouseEnter 事件中，我为其他矩形获取并设置它们的 Fill 属性。

这使得触发器无用，因此我将其从 ControlTemplate 中删除。

【讨论】：