Why won't my WPF style trigger work to only show the horizontal scroll bar when the mouse is over my ScrollViewer?

1
votes

I want to create a ScrollView that only shows the horizontal scroll bar when the mouse is over it, so I tried the following (note how I simply try to trigger the HorizontalScrollBarVisibility to Auto when the mouse is over and predefine my ScrollViewer to have a Disabled HorizontalScrollBarVisibility):

<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>

Unfortunately this isn't working for me. How can I append triggers to this object to get it to work?

2
c#.netwpfxamlscrollviewer
When you say it isn't working for you do you mean it shows the scrollbar when it shouldn't or it doesn't when it should? – Simon Belanger
@SimonBelanger It doesn't seem to ever show the scroll bar using the code above. – Alexandru
Well auto is only if one is need. Is one needed? Try visible. – paparazzo
@Blam Yeah, its needed. Even with Visible it gives me the same problem. – Alexandru
Without the style and with HorizontalScrollBarVisibility="Auto" on the scroll viewer, the horizontal scroll bar does show up, as expected. I only want it be visible when the mouse is over it, though. – Alexandru

2 Answers

3
votes

If you set a property directly, then it takes precedence over the Style hence in your case the Style was never able to modify the HorizontalScrollBarVisibility which was set directly on the ScrollViewer.

So changes would be to remove setting HorizontalScrollBarVisibility="Disabled" on the element and instead setting a default via the Style and let the trigger modify the default when it applies. It's generally good practice to specify a Style default when you have a trigger modifying a property of the element. You can set the default value to Hidden or Disabled or anything you choose ofc for default.

Try:

<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>
2
votes

Probably the easiest way to get this to work is to remove the HorizontalScrollBarVisibility="Disabled" from your scrollviewer and put 2 states in your style.

    <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>

This should give you the effect you are after.