Question

我正在尝试创建一个大部分不透明的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
    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我如何让它真正有用？

Answer 1

这就是我最终得到的结果：

<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}" />

我认为在第一次发布之前我至少尝试了一次，但我猜不是。无论如何，它现在很好用。

使用GridSplitter的数据触发器

1 个答案: