3

目标：
我正在尝试创建一个手风琴风格Grid，仅使用几列（ColumnDefinition）。

预期行为：
当鼠标光标位于列上方时，ColumnDefinition Width应该会增加。2*它应该返回到1*它不是的时候。

预期行为，例如红色列上方的光标。

实际结果：
列不对其上方的光标作出反应。宽度保持固定，即1*。

我试过的：

  • Style对Grid元素本身进行完全相同的测试（仅切换Grid Background属性代替ColumnDefinition Width，但仍然由相同的 触发IsMouseOver，它工作正常。）（在下面的第一次编辑中添加了与此相关的内容。）
  • 将Background="Transparent"属性添加到Grid元素，以防光标没有“粘”到。（当然，没有Background属性ColumnDefinition可以尝试相同的。）
  • 限制高度Rectangles以查看触发器是否发生在它们上方或在同一列但在它们上方/下方。把所有的Rectangles东西都去掉（然而，甚至看不到触发效果）。
  • 添加/删除首字母Setter Property="Width" Value="1*"（Style.Triggers标签上方）
  • 明确指的是Style带有它的x:Key属性。
  • 在 WPF Core .NET 5.0 上尝试过。和 WPF .NET 框架 4.7.2。

我知道还有其他方法可以完成这项工作（将Column宽度保留为Auto并使用Widthsof Rectangles，或者可能更改Column Widths 代码隐藏中的通过事件）。但是使用宽度的行/列星形单位和单一样式似乎是完美的方式，无需编写任何额外的逻辑。我真的不明白为什么这行不通。我猜现在光标在列区域中根本无法识别，但我无法理解原因。

    <Window.Resources>
        <Style TargetType="ColumnDefinition" x:Key="ColumnAccordionStyle">
            <Setter Property="Width" Value="1*"></Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="False">
                    <Setter Property="Width" Value="1*"></Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Width" Value="2*"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    
    <Grid Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
            <ColumnDefinition Style="{StaticResource ColumnAccordionStyle}"/>
        </Grid.ColumnDefinitions>
    
        <Rectangle Fill="Blue" Grid.Column="0"/>
        <Rectangle Fill="Red" Grid.Column="1"/>
        <Rectangle Fill="Green" Grid.Column="2"/>
        <Rectangle Fill="Yellow" Grid.Column="3"/>
    </Grid>

编辑：

4

0 回答 0