WPF使ScrollViewer透明

我想在 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>

uj5u.com熱心網友回復：

你必須簡單地替代默認Style的ScrollViewer，并且例如，將其放置在ResourceDictionary的App.xaml中或您ListBox：

• 通過設定允許內容伸入滾動條的列/行ColumnSpan/RowSpan的ScrollContentPresenter
• 設定Background的ScrollBar元素，如果需要的Rectangle命名"Corner"也是如此，Transparent或者修改它們的Opacity

為了使Thumb該的ScrollBarOPAC，覆寫/復制所有的默認滾動條樣式和模板，并設定Thumb.Opacity在x:Key="ScrollBarThumb"風格。
由于您已經有一個自定義的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>

標籤：小白 xaml 滚动查看器

上一篇：選中ToggleButton時，如何更改ToggleButton的邊框角半徑？

下一篇：根據選定的Tab在Tabcontrol之外更改控制元件屬性