DataGrid의 세로 스크롤 막대 템플릿을 변경하는 방법

Question

DataGrid의 세로 스크롤 막대에 마커를 배치하는 방법을 모색 중입니다. 선택한 항목이 표시됩니다.

나는 이것이 단수 수평 스크롤 달성하고 here이

그래서 내 질문에 내가 특별히 수직 스크롤이 어떻게 추가 할 수있는 콘텐츠 컨트롤을 추가 할 수있는 방법에 대한 답변을 보았는가?

중첩 스타일을 사용하거나 DataGrid.Resources를 사용할 수 있지만 실제 수직 스크롤바를 사용하는 방법은 무엇입니까? 내가 원하는 것은 모든 것이 표준이 될 수 있지만 콘텐츠 컨트롤을 추가하는 것입니다. 다른 사람이 세로 스크롤 막대 컨트롤 템플릿을 얻는 데 도움이 될 수 있다면 DataGrid 스타일을 이미 사용하고 있거나 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

:

사용하여 컨트롤 템플릿 여기

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

는 스타일 : 여기

내 데이터 그리드입니다 수직 스크롤 바의 경우, 수평 스크롤 바 대신에 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> 

그리고 해당 코드 숨김 다음과 같다;

결과는 다음과 같습니다