链接到列表视图的自定义简单滚动条

Question

列表视图的默认滚动条显示在右侧。我设计了一种新样式，希望它与列表视图控件分开显示。您在图像中看到的是我现在使用混合进行设置的方式。

那么如何将自定义滚动条链接到列表视图呢？我正在使用 Blend 4。

列表视图图像位于此处：

http://i141.photobucket .com/albums/r69/thebirdbath/scroll.jpg

Answer 1

我不确定您是否要将样式添加到 ListView 的 Template 内的 ScrollViewer 中，或者是否要禁用该 < code>ScrollViewer 并将 ListView 放置在单独的 ScrollViewer 中。

要将 Style 应用于 Template 中的 ScrollViewer 并将 ScrollBar 放置在左侧，您可以修改默认值使用GridView时的模板。它将需要引用 PresentationFramework.Aero

• 在 ScrollViewer 上设置 FlowDirection="RightToLeft" 以将其放置在左侧
• Set ItemsPresenter 和 GridViewHeaderRowPresenter 上的 FlowDirection="LeftToRight" 因为它们将继承 RightToLeft否则
• 要获得 ScrollViewer 和内容之间的透明空间，请为 ListView 设置 Background="Transparent" 并设置所需的 ItemsPanel 上的背景 改为
• 使用 Padding 控制透明空间，例如 Padding="0,0,10,0"

外观像这样

<ListView xmlns:MS_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
          Padding="0,0,10,0"
          Background="Transparent"
          BorderThickness="0"
          ScrollViewer.VerticalScrollBarVisibility="Visible">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Background="White"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.Template>
        <ControlTemplate TargetType="{x:Type ListView}">
            <MS_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                <ScrollViewer Padding="{TemplateBinding Padding}"
                              Style="{YourStyle...}"
                              FlowDirection="RightToLeft">
                    <ScrollViewer.Resources>
                        <Style TargetType="GridViewHeaderRowPresenter">
                            <Setter Property="FlowDirection" Value="LeftToRight"/>
                        </Style>
                    </ScrollViewer.Resources>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    FlowDirection="LeftToRight"/>
                </ScrollViewer>
            </MS_Themes:ListBoxChrome>
            <ControlTemplate.Triggers>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListView.Template>
    <!--...-->
</ListView>

Answer 2

好的，非常接近。它可以工作，但我丢失了列标题。另外，我无法获得栏和列表视图之间的透明度。就像酒吧仍然连接着一样，我希望它们看起来像是分开的。 （请参阅我的原始图像的链接）

这非常有帮助。快到了！

我的代码如下。

<ListView
                            AlternationCount="2"
                            Padding="0,0,10,0"
                            Shared:GridViewSort.AutoSort="True"
                            Shared:GridViewSort.ShowSortGlyph="True"
                            ItemsSource="{Binding Contents}" 
                            SelectionMode="Extended" 
                            Background="Transparent" 
                            Foreground="White" 
                            SelectionChanged="ListBoxSelectionChanged"
                            BorderThickness="0"

                            ItemContainerStyle="{DynamicResource ListViewItemStyle}" 
                            Style="{DynamicResource ListViewStyle1}" Margin="0" VerticalAlignment="Top">

                            <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel Background="Transparent"/>
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.Template>
        <ControlTemplate TargetType="{x:Type ListView}">
            <MS_Themes:ListBoxChrome x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderFocused="{TemplateBinding IsKeyboardFocusWithin}" SnapsToDevicePixels="true">
                <ScrollViewer Padding="{TemplateBinding Padding}"
                              Style="{DynamicResource ScrollViewerKey}"
                              FlowDirection="RightToLeft">
                    <ScrollViewer.Resources>
                        <Style TargetType="GridViewHeaderRowPresenter">
                            <Setter Property="FlowDirection" Value="LeftToRight"/>
                        </Style>
                    </ScrollViewer.Resources>
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    FlowDirection="LeftToRight"/>
                </ScrollViewer>
            </MS_Themes:ListBoxChrome>
            <ControlTemplate.Triggers>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListView.Template>