Question

我正在寻找将标记放在DataGrid上的垂直滚动条中。它们将显示所选项目。

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

来解决这个问题的答案

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

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

这是我的DataGrid：

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

结果如下：

screen shot

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

1 个答案: