使用WPF创建MS Word插入表行为

时间:2013-04-10 10:35:12

标签: wpf xaml templates styles

我试图在插入表时获得与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>

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

1 个答案:

答案 0 :(得分:0)

我成功了!

如果有人想知道解决方案,我就这样做了:

  1. 我已将样式从resourcedictionary移动到Window(以便能够添加MouseEnter事件)。
  2. 我在BoardTileViewModel中实现了一个INotifyPropertyChanged并添加了一个Fill属性。我将Fill属性绑定到矩形的填充。
  3. 在MouseEnter事件中,我获取其他矩形并设置其Fill属性。
  4. 这使Trigger无用,所以我从ControlTemplate中删除了它。