CODEWITHSUNDEEP
c#.netwpfxamlscrollviewer
Alexandru
Alexandru

Reputation: 12892

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

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?

Upvotes: 1

Views: 1463

Answers (2)

daniellepelley
daniellepelley

Reputation: 1979

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.

Upvotes: 2

Viv
Viv

Reputation: 17380

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>

Upvotes: 3

Related Questions