如何更改DataGrid上垂直滾動條的模板

我正在查看將標記放置在我的DataGrid的垂直滾動條上。他們將顯示選擇的項目。如何更改DataGrid上垂直滾動條的模板

我看到的這怎麼會用一個單一的水平滾動條來實現和添加內容控制here

所以我的問題是我怎麼能添加到這個垂直滾動條明確的答案？

我可以使用圖嵌套樣式或DataGrid.Resources，但如何得到實際的垂直滾動條？我希望所有東西都是標準的，但是要加入內容控制。如果有人可以幫助我到垂直滾動條控件模板，我已經有了DataGrid樣式，如果有幫助，或者可以通過DataGrid.Resources？！

這裏是我的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>

來源

2014-06-07 Hank

您可以從鏈接的文章的解決方案進行了以下修改：

使用控制模板對於垂直滾動條，而不是水平滾動條。在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>

以及相應的後臺代碼如下所示;

結果看起來是這樣的：

screen shot

來源

2014-06-07 05:12:50

如何更改DataGrid上垂直滾動條的模板

回答

相關問題