1

我正在尝试创建一个GridSplitter主要是不透明的，然后在鼠标悬停时，动画变得完全可见。这是我尝试过的：

风格：

<Style x:Key="SplitterStyle" TargetType="{x:Type GridSplitter}">
  <Setter Property="Opacity" Value="0.2" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type GridSplitter}">
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                </Storyboard>
              </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
              <BeginStoryboard>
                <Storyboard>
                  <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
                </Storyboard>
              </BeginStoryboard>
            </Trigger.ExitActions>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

GridSplitter：

<GridSplitter 
    ResizeDirection="Columns"
    Grid.Column="0"
    Background="Red"
    VerticalAlignment="Stretch"
    Width="4"
    Style="{StaticResource SplitterStyle}" />

我检查了 MSDN，GridSplitter 具有我正在使用的所有属性，所以看起来应该没问题，但也许我忽略了一些明显的东西？

编辑：

是否可以将 GridSplitter 放入另一个元素中？我改变了我的风格：

<Style x:Key="SplitterStyle" TargetType="{x:Type Border}">
    <Setter Property="Opacity" Value="0.2" />

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
             </Trigger.EnterActions>
             <Trigger.ExitActions>
                 <BeginStoryboard>
                     <Storyboard>
                         <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
                     </Storyboard>
                 </BeginStoryboard>
             </Trigger.ExitActions>
         </Trigger>
     </Style.Triggers>
 </Style>

然后，我将 GridSplitter 放入 Border 并将样式应用于边框，而不是：

<Border
    Style="{StaticResource SplitterStyle}"
    Background="{StaticResource WindowBorderBrush}"
    VerticalAlignment="Stretch"
    Width="4"
    Grid.Column="0"
    HorizontalAlignment="Right">
    <GridSplitter ResizeDirection="Columns" Background="Red" ResizeBehavior="CurrentAndNext"/>
</Border>

边框效果很好！但是现在，找不到 GridSplitter（没有显示红色背景，当我将鼠标悬停在边框上时光标不会改变，并且没有任何东西可以拖动来调整大小）。为什么是这样？

编辑：

好的，我发现我必须为GridSplitter. 另外，我将背景更改为GridSplitter透明，因为我从未打算使用红色。现在，它显示并且看起来很棒，但它实际上仍然没有调整任何东西：P 我如何让它真正有用？

4

1 回答 1

2

这就是我最终得到的，它奏效了：

<Style x:Key="SplitterStyle" TargetType="{x:Type GridSplitter}">
    <Setter Property="Opacity" Value="0.2" />

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.EnterActions>
            <Trigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
                    </Storyboard>
                </BeginStoryboard>
            </Trigger.ExitActions>
        </Trigger>
    </Style.Triggers>
</Style>

和

<GridSplitter
    Background="{StaticResource WindowBorderBrush}"
    VerticalAlignment="Stretch"
    Width="4"
    Grid.Column="0"
    ResizeDirection="Columns" 
    Style="{StaticResource SplitterStyle}" />

我以为我在第一次发布之前至少尝试过一次，但我想不是。无论如何，它现在工作得很好。

于 2013-07-22T21:40:58.473 回答