WPF 使 ScrollViewer 透明

Question

我想让ListBox中的滚动条看透。目前我设法以负边距移动内容，但即使设置其不透明度也无法使其在 ScrollBar 下可见。

有什么想法吗？

当前 XAML（禁用选择和悬停效果）：

            <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

您必须简单地覆盖 ScrollViewer 的默认值 Style，例如，将其放在 App.xaml[=47= 的 ResourceDictionary 中] 或您的 ListBox:

通过设置ScrollContentPresenter
的ColumnSpan/RowSpan允许内容伸入滚动条的column/row
设置 Background 个 ScrollBar 元素，如果需要，也将 Rectangle 命名为 "Corner"，设置为 Transparent 或修改它们的 Opacity

要使ScrollBar opac的Thumb，override/copy全部默认ScrollBar Styles and Templates并在x:Key="ScrollBarThumb"中设置Thumb.Opacity风格。
由于您已经有了自定义的 ScrollBar，您可能想要调整当前的 Thumb 样式。

重要提示：不要忘记删除您的否定 Margin！
由于现在允许 ScrollViewer 的内容跨越完整内容主机，因此不再需要 Margin。通常应避免使用负数 Margin 来布局元素，将它们排列在列中（使用适当的跨度）会产生相同的结果。

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

WPF 使 ScrollViewer 透明

WPF Make ScrollViewer transparent

wpf

xaml

scrollviewer