為什么當鼠標懸停在ScrollViewer上時，為什么我的WPF樣式觸發器無法僅顯示水平滾動條？

Question

我想創建一個只在鼠標懸停時顯示水平滾動條的ScrollView，所以我嘗試了以下操作（請注意，當鼠標懸停時，我只是嘗試嘗試將Horizo​​ntalScrollBarVisibility觸發為Auto，並預先定義ScrollViewer為Disabled Horizo​​ntalScrollBarVisibility）：

<Window x:Class="OnMouseOverStackPanel.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="Triggers" TargetType="ScrollViewer">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button Grid.Row="0" Content="I'm a content filler."/>
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" Style="{StaticResource Triggers}">
            <StackPanel Orientation="Horizontal" Height="30">
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
                <Button Content="Hey, I'm a button!"/>
            </StackPanel>
        </ScrollViewer>
        <Button Grid.Row="2" Content="I'm a content filler."/>
    </Grid>
</Window>

不幸的是，這不適用於我。 如何將觸發器附加到此對象以使其正常工作？

Answer 1

如果直接設置屬性，則它優先於Style因此在您的情況下， Style無法修改直接在ScrollViewer上設置的HorizontalScrollBarVisibility 。

因此，更改將是刪除元素上的設置HorizontalScrollBarVisibility="Disabled" ，而是通過Style設置默認值，並讓觸發器在應用時修改默認值。 通常，在觸發器具有修改元素屬性的情況下，最好指定Style默認值。 您可以將默認值設置為“ Hidden或“ Disabled也可以將默認值設置為c。

嘗試：

<Window.Resources>
  <Style x:Key="Triggers"
          TargetType="ScrollViewer">
    <Setter Property="HorizontalScrollBarVisibility" Value="Hidden" />
    <Style.Triggers>
      <Trigger Property="IsMouseOver" Value="true">
        <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
      </Trigger>
    </Style.Triggers>
  </Style>
</Window.Resources>
<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Button Grid.Row="0"
          Content="I'm a content filler." />
  <ScrollViewer Grid.Row="1"
                Style="{StaticResource Triggers}"
                VerticalScrollBarVisibility="Disabled">
    <StackPanel Height="30"
                Orientation="Horizontal">
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
      <Button Content="Hey, I'm a button!" />
    </StackPanel>
  </ScrollViewer>
  <Button Grid.Row="2"
          Content="I'm a content filler." />
</Grid>

Answer 2

可能最簡單的方法是從滾動查看器中刪除Horizo​​ntalScrollBarVisibility =“ Disabled”並在樣式中添加2種狀態。

    <Style x:Key="Triggers" TargetType="ScrollViewer">
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="true">
                <Setter Property="HorizontalScrollBarVisibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="false">
                <Setter Property="HorizontalScrollBarVisibility" Value="Disabled"/>
            </Trigger>
        </Style.Triggers>
    </Style>

這應該給您帶來您想要的效果。