如何更改 DataGrid 上垂直滚动条的模板

Question

我正在考虑在我的 DataGrid 上的垂直滚动条中放置标记。他们将显示选择了哪些项目。

我已经看到了关于如何使用单个水平滚动条并添加内容控件here

的答案

所以我的问题是如何专门将它添加到垂直滚动条？

我认为可以使用嵌套样式或DataGrid.Resources，但是如何下到实际的垂直滚动条呢？我想要的是一切都是标准的，但是添加内容控件。如果有人可以帮助我获得垂直滚动条控件模板，我已经有了 DataGrid 样式，如果有帮助的话，或者可能通过 DataGrid.Resources？！

这是我的数据网格：

<DataGrid Name="GenericDataGrid" Background="Transparent" 
          BorderThickness="0" 
          CanUserReorderColumns="True" 
          AutoGenerateColumns="False" 
          ItemsSource="{Binding UserCollection}"
          HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
          CanUserAddRows="False">
     <DataGrid.Resources>
     </DataGrid.Resources>

风格如下：

    <Style TargetType="{x:Type DataGrid}" >
        <Setter Property="RowHeaderWidth" Value="25" />
        <Setter Property="HorizontalGridLinesBrush" Value="Transparent" />
        <Setter Property="VerticalGridLinesBrush" Value="DimGray" />
        <Setter Property="RowBackground" Value="{StaticResource RowBrush}"></Setter>
        <Setter Property="AlternatingRowBackground" Value="White"></Setter>
    </Style>

Answer 1

您可以从链接文章中获取解决方案，并进行以下修改：

使用垂直滚动条的控件模板，而不是水平滚动条。 在ItemsControl 中，将HorizontalAlignment 与VerticalAlignment 和Canvas.Left 与Canvas.Top 交换。

这是一个完整的例子：

<Window x:Class="WpfApplication25.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <SolidColorBrush x:Key="RowBrush" Color="LightYellow"/>
    </Window.Resources>
    <Grid>
        <DataGrid Name="GenericDataGrid" Background="Transparent" 
          BorderThickness="0" 
          CanUserReorderColumns="True" 
          AutoGenerateColumns="False" 
          ItemsSource="{Binding UserCollection}"
          HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
          CanUserAddRows="False">
            <DataGrid.Resources>
                <Style TargetType="{x:Type DataGrid}" >
                    <Setter Property="RowHeaderWidth" Value="25" />
                    <Setter Property="HorizontalGridLinesBrush" Value="Transparent" />
                    <Setter Property="VerticalGridLinesBrush" Value="DimGray" />
                    <Setter Property="RowBackground" Value="{StaticResource RowBrush}"></Setter>
                    <Setter Property="AlternatingRowBackground" Value="White"></Setter>
                </Style>
                <SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
                <Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" SnapsToDevicePixels="true" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="VerticalScrollBarPageButton" TargetType="{x:Type RepeatButton}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Focusable" Value="false"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type RepeatButton}">
                                <Rectangle Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
                    <Setter Property="OverridesDefaultStyle" Value="true"/>
                    <Setter Property="IsTabStop" Value="false"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type Thumb}">
                                <Microsoft_Windows_Themes:ScrollChrome x:Name="Chrome" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsDragging}" SnapsToDevicePixels="true" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="{TemplateBinding Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
                <Style TargetType="{x:Type ScrollBar}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ScrollBar}">
                                <Grid x:Name="Bg" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                                    <Grid.RowDefinitions>
                                        <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                        <RowDefinition Height="0.00001*"/>
                                        <RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
                                    </Grid.RowDefinitions>
                                    <RepeatButton Command="{x:Static ScrollBar.LineUpCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="UpArrow"/>
                                    <Track x:Name="PART_Track" IsDirectionReversed="true" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1">
                                        <Track.DecreaseRepeatButton>
                                            <RepeatButton Command="{x:Static ScrollBar.PageUpCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                        </Track.DecreaseRepeatButton>
                                        <Track.IncreaseRepeatButton>
                                            <RepeatButton Command="{x:Static ScrollBar.PageDownCommand}" Style="{StaticResource VerticalScrollBarPageButton}"/>
                                        </Track.IncreaseRepeatButton>
                                        <Track.Thumb>
                                            <Thumb Style="{StaticResource ScrollBarThumb}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="VerticalGripper"/>
                                        </Track.Thumb>
                                    </Track>
                                    <!-- BEGIN This part is taken from http://stackoverflow.com/questions/2114965/how-to-put-image-placemarkers-inside-a-scrollbar-in-wpf: -->
                                    <ItemsControl Grid.Column="1" VerticalAlignment="Stretch">
                                        <sys:Double>10</sys:Double>
                                        <sys:Double>50</sys:Double>
                                        <sys:Double>100</sys:Double>
                                        <sys:Double>140</sys:Double>
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <Rectangle Fill="Orange" Width="16" Height="3"/>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                        <ItemsControl.ItemContainerStyle>
                                            <Style TargetType="ContentPresenter">
                                                <Setter Property="Canvas.Top" Value="{Binding}" />
                                            </Style>
                                        </ItemsControl.ItemContainerStyle>
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <Canvas/>
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                    </ItemsControl>
                                    <!-- END -->
                                    <RepeatButton Command="{x:Static ScrollBar.LineDownCommand}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Style="{StaticResource ScrollBarButton}" Microsoft_Windows_Themes:ScrollChrome.ScrollGlyph="DownArrow"/>
                                </Grid>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsEnabled" Value="false">
                                        <Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </DataGrid.Resources>
            <!-- Layout for the sample data: -->
            <DataGrid.Columns>
                <DataGridTextColumn Binding="{Binding FontFamily.Source}" Header="Family"/>
                <DataGridTextColumn Binding="{Binding Weight}" Header="Weight"/>
                <DataGridTextColumn Binding="{Binding Style}" Header="Style"/>
                <DataGridTextColumn Binding="{Binding Stretch}" Header="Stretch"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

而对应的代码隐藏是这样的；

using System.Collections.Generic;
using System.Linq;
using System.Windows;
using System.Windows.Media;

namespace WpfApplication25
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // This is just some sample data:
            UserCollection = Fonts.GetTypefaces(@"C:\Windows\Fonts").ToList();

            DataContext = this;
        }

        // Property to gain access to the sample data:
        public List<Typeface> UserCollection { get; private set; }
    }
}

结果如下：