WPF Make ScrollViewer transparent

Question

I would like to get scrollbar in ListBox see through. Currently I managed to move contents under with negative margin, but I cannot make it visible under ScrollBar even setting its Opacity.

Any ideas?

Current XAML (to disable selection and hover effects):

            <ListBox x:Name="TestIC" Grid.Row="1"
                ScrollViewer.CanContentScroll="True"  
                VirtualizingPanel.IsVirtualizing="True"
                VirtualizingPanel.VirtualizationMode="Recycling" >
            <ListBox.Resources>
                <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">100</sys:Double>
            </ListBox.Resources>
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem"  BasedOn="{StaticResource {x:Type ListBoxItem}}">
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="Margin" Value="0,0,-100,0"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
                    <Setter Property="Padding" Value="2,0,0,0"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsSelected" Value="true">
                                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                                    </Trigger>
                                    <MultiTrigger>
                                        <MultiTrigger.Conditions>
                                            <Condition Property="IsSelected" Value="true"/>
                                            <Condition Property="Selector.IsSelectionActive" Value="false"/>
                                        </MultiTrigger.Conditions>
                                        <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/>
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}}"/>
                                    </MultiTrigger>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>

Answer 1

You must simply override the default Style of the ScrollViewer and e.g., place it in the ResourceDictionary of App.xaml or your ListBox:

• Allow the content to stretch into the scroll bar's column/row by setting the ColumnSpan/RowSpan of the ScrollContentPresenter
• Set Background of ScrollBar elements, and if required the Rectangle named "Corner" too, to Transparent or modify their Opacity

To make the Thumb of the ScrollBar opac, override/copy all the default ScrollBar Styles and Templates and set the Thumb.Opacity in the x:Key="ScrollBarThumb" style.
As you already have a customized ScrollBar, you probably want to adjust your current Thumb style instead.

Important: don't forget to remove your negative Margin!
Since the content of the ScrollViewer is now allowed to span accross the full content host, the Margin is no longer needed. You should generally avoid a negative Margin in order to layout elements, when arranging them in columns (using proper spanning) yield the same result.

<Color x:Key="BorderMediumColor">#FF888888</Color>
      
<Style TargetType="{x:Type ScrollViewer}">
  <Setter Property="OverridesDefaultStyle" Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ScrollViewer}">
        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>

          <Border Grid.ColumnSpan="2" Grid.RowSpan="2"
                  BorderThickness="0,1,1,1">
            <Border.BorderBrush>
              <SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
            </Border.BorderBrush>
            <ScrollContentPresenter CanContentScroll="{TemplateBinding CanContentScroll}" />
          </Border>
          <ScrollBar x:Name="PART_VerticalScrollBar"
                     Grid.Column="1"                         
                     Background="Transparent"
                     Value="{TemplateBinding VerticalOffset}"
                     Maximum="{TemplateBinding ScrollableHeight}"
                     ViewportSize="{TemplateBinding ViewportHeight}"
                     Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
          <ScrollBar x:Name="PART_HorizontalScrollBar"
                     Grid.Row="1" 
                     Background="Transparent"
                     Orientation="Horizontal"
                     Value="{TemplateBinding HorizontalOffset}"
                     Maximum="{TemplateBinding ScrollableWidth}"
                     ViewportSize="{TemplateBinding ViewportWidth}"
                     Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}" />

          <Rectangle x:Name="Corner"
                     Grid.Column="1" Grid.Row="1"
                     Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>