can any one help me how to add a image for scorllviewer thumb in wpf.

• Question

• 

  

  0

  Sign in to vote

  
  iam working with wpf scrollviewer control i added almost all styles for that but iam unable add two different images for verticalscrollbar and horizontal scrollbar.
  
  this is the styles for scorllviewer
  
    <LinearGradientBrush x:Key="NormalBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
  
                      <GradientStop Color="#E8E9E9" Offset="0.1"/>
                      <GradientStop Color="#EBEEF0" Offset="0.2"/>
                      <GradientStop Color="#EDF0F3" Offset="0.3"/>
                      <GradientStop Color="#E9EDF2" Offset="0.4"/>
                      <GradientStop Color="#E6E9F0" Offset="0.5"/>
                      <GradientStop Color="#EDF0F3" Offset="0.609"/>
                      <GradientStop Color="#CBD5E1" Offset="0.722"/>
                      <GradientStop Color="#C5D0DE" Offset="0.8"/>
                      <GradientStop Color="#BECADB" Offset="0.909"/>
                      <GradientStop Color="#C3CFDD" Offset="1.022"/>
                      <GradientStop Color="#D1DBE6" Offset="1.2"/>
                      <GradientStop Color="#E9ECF2" Offset="1.3"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="HorizontalNormalBrushSv" EndPoint="-0.009,0.494" StartPoint="1.041,0.486">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#E8E9E9" Offset="0.1"/>
                      <GradientStop Color="#EBEEF0" Offset="0.2"/>
                      <GradientStop Color="#EDF0F3" Offset="0.3"/>
                      <GradientStop Color="#E9EDF2" Offset="0.4"/>
                      <GradientStop Color="#E6E9F0" Offset="0.5"/>
                      <GradientStop Color="#EDF0F3" Offset="0.609"/>
                      <GradientStop Color="#CBD5E1" Offset="0.722"/>
                      <GradientStop Color="#C5D0DE" Offset="0.8"/>
                      <GradientStop Color="#BECADB" Offset="0.909"/>
                      <GradientStop Color="#C3CFDD" Offset="1.022"/>
                      <GradientStop Color="#D1DBE6" Offset="1.2"/>
                      <GradientStop Color="#E9ECF2" Offset="1.3"/>
  
  
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="LightBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#606F94" Offset="2.0"/>
                      <GradientStop Color="#606F94" Offset="2.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="HorizontalLightBrushSv" StartPoint="0,0" EndPoint="1,0">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#FFF" Offset="0.0"/>
                      <GradientStop Color="#EEE" Offset="1.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="DarkBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#FFF" Offset="0.0"/>
                      <GradientStop Color="#AAA" Offset="1.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="PressedBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#BBB" Offset="0.0"/>
                      <GradientStop Color="#EEE" Offset="0.1"/>
                      <GradientStop Color="#EEE" Offset="0.9"/>
                      <GradientStop Color="#FFF" Offset="1.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <SolidColorBrush x:Key="DisabledForegroundBrushSv" Color="#888" />
  
          <SolidColorBrush x:Key="DisabledBackgroundBrushSv" Color="#EEE" />
  
          <SolidColorBrush x:Key="WindowBackgroundBrushSv" Color="#FFF" />
  
          <SolidColorBrush x:Key="SelectedBackgroundBrushSv" Color="#DDD" />
  
          <!-- Border Brushes -->
  
          <LinearGradientBrush x:Key="NormalBorderBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#898989" Offset="0.0"/>
                      <GradientStop Color="#898989" Offset="1.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="HorizontalNormalBorderBrushSv" StartPoint="0,0" EndPoint="1,0">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#898989" Offset="0.0"/>
  
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="DefaultedBorderBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#777" Offset="0.0"/>
                      <GradientStop Color="#000" Offset="1.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="MouseHoverBrush" EndPoint="0.5,1" StartPoint="0.5,0">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#EFF0F1" Offset="0"/>
                      <GradientStop Color="#EDEFF0" Offset="0.987"/>
                      <GradientStop Color="#EBECEE" Offset="0.138"/>
                      <GradientStop Color="#E9EBED" Offset="0.236"/>
                      <GradientStop Color="#E8E9EB" Offset="0.382"/>
                      <GradientStop Color="#E6E7E9" Offset="0.489"/>
                      <GradientStop Color="#E4E6E8" Offset="0.6"/>
                      <GradientStop Color="#E2E3E6" Offset="0.804"/>
                      <GradientStop Color="#C0C3C9" Offset="0.956"/>
                      <GradientStop Color="#BEC2C9" Offset="1"/>
  
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <LinearGradientBrush x:Key="PressedBorderBrushSv" StartPoint="0,0" EndPoint="0,1">
              <GradientBrush.GradientStops>
                  <GradientStopCollection>
                      <GradientStop Color="#444" Offset="0.0"/>
                      <GradientStop Color="#888" Offset="1.0"/>
                  </GradientStopCollection>
              </GradientBrush.GradientStops>
          </LinearGradientBrush>
  
          <SolidColorBrush x:Key="DisabledBorderBrushSv" Color="#AAA" />
  
          <SolidColorBrush x:Key="SolidBorderBrushSv" Color="#888" />
  
          <SolidColorBrush x:Key="LightBorderBrushSv" Color="#AAA" />
          <SolidColorBrush x:Key="MouseHoverBorder" Color="#898989" />
          <!-- Miscellaneous Brushes -->
          <SolidColorBrush x:Key="GlyphBrushSv" Color="#444" />
  
          <SolidColorBrush x:Key="LightColorBrushSv" Color="#DDD" />
          <Style x:Key="LeftScrollViewer" TargetType="{x:Type ScrollViewer}">
              <Setter Property="OverridesDefaultStyle" Value="True"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type ScrollViewer}">
                          <Grid>
                              <Grid.ColumnDefinitions>
                                  <ColumnDefinition Width="*">
  
                                  </ColumnDefinition>
                                  <ColumnDefinition Width="Auto"></ColumnDefinition>
                              </Grid.ColumnDefinitions>
                              <Grid.RowDefinitions>
                                  <RowDefinition Height="*"/>
                                  <RowDefinition Height="Auto"/>
                              </Grid.RowDefinitions>
                              <ScrollContentPresenter Grid.Column="0"/>
                              <ScrollBar Name="PART_VerticalScrollBar" Grid.Column="1"
              Value="{TemplateBinding VerticalOffset}"
              Maximum="{TemplateBinding ScrollableHeight}"
              ViewportSize="{TemplateBinding ViewportHeight}"
              Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                              <ScrollBar Name="PART_HorizontalScrollBar"
              Orientation="Horizontal"
              Grid.Row="1"
              Grid.Column="0"
              Value="{TemplateBinding HorizontalOffset}"
              Maximum="{TemplateBinding ScrollableWidth}"
              ViewportSize="{TemplateBinding ViewportWidth}"
              Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
  
                          </Grid>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
          <Style x:Key="ScrollBarLineButtonSv" TargetType="{x:Type RepeatButton}">
              <Setter Property="SnapsToDevicePixels" Value="True"/>
              <Setter Property="OverridesDefaultStyle" Value="true"/>
              <Setter Property="Focusable" Value="false"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type RepeatButton}">
                          <Border
            Name="Border"
            Margin="1"
            CornerRadius="0"
            Background="{StaticResource NormalBrushSv}"
            BorderBrush="{StaticResource NormalBorderBrushSv}"
            BorderThickness="1">
                              <Path
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Fill="{StaticResource GlyphBrushSv}"
              Data="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" />
                          </Border>
                          <ControlTemplate.Triggers>
                              <Trigger Property="IsPressed" Value="true">
                                  <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrushSv}" />
                              </Trigger>
                              <Trigger Property="IsEnabled" Value="false">
                                  <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrushSv}"/>
                              </Trigger>
                              <Trigger Property="IsMouseOver" Value="True">
                                  <Setter Property="Background" TargetName="Border" Value="{StaticResource MouseHoverBrush}" />
                                  <Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource MouseHoverBorder}"></Setter>
                              </Trigger>
                          </ControlTemplate.Triggers>
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
  
  
  
  
  
          <Style x:Key="ScrollBarPageButtonSv" TargetType="{x:Type RepeatButton}">
              <Setter Property="SnapsToDevicePixels" Value="True"/>
              <Setter Property="OverridesDefaultStyle" Value="true"/>
              <Setter Property="IsTabStop" Value="false"/>
              <Setter Property="Focusable" Value="false"/>
              <Setter Property="Template">
                  <Setter.Value>
                      <ControlTemplate TargetType="{x:Type RepeatButton}">
                          <Border Background="Transparent" />
                      </ControlTemplate>
                  </Setter.Value>
              </Setter>
          </Style>
  
          <Style x:Key="ScrollBarThumb" TargetType="{x:Type Thumb}">
  
  
              <Setter Property="SnapsToDevicePixels" Value="True"/>
              <Setter Property="OverridesDefaultStyle" Value="true"/>
              <Setter Property="IsTabStop" Value="false"/>
              <Setter Property="Focusable" Value="false"/>
              <Setter Property="Template">
                  <Setter.Value>
  
                      <ControlTemplate TargetType="{x:Type Thumb}">
                          <Grid>
                              <Border  Name="Border"
            CornerRadius="0"
             Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
           
            BorderThickness="1" />
                          </Grid>
                          <ControlTemplate.Triggers>
  
                              <Trigger Property="IsMouseOver" Value="True">
                                  <Setter Property="Background" TargetName="Border" Value="{StaticResource MouseHoverBrush}" />
                                  <Setter Property="BorderBrush" TargetName="Border" Value="{StaticResource MouseHoverBorder}"></Setter>
                              </Trigger>
                            
                          </ControlTemplate.Triggers>
  
                      </ControlTemplate>
  
  
                  </Setter.Value>
              </Setter>
          </Style>
  
          <ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
           
              <Grid >
                  <Grid.RowDefinitions>
                      <RowDefinition MaxHeight="18"/>
                      <RowDefinition Height="0.00001*"/>
                      <RowDefinition MaxHeight="18"/>
                  </Grid.RowDefinitions>
   
                 
                  <Border
        Grid.RowSpan="3"
        CornerRadius="2"
        Background="#F0F0F0" />
                  <RepeatButton
        Grid.Row="0"                          
           Style="{StaticResource ScrollBarLineButtonSv}"
        Height="18"
        Command="ScrollBar.LineUpCommand"
        Content="M 0 4 L 8 4 L 4 0 Z" />
  
                  <Track
        Name="PART_Track"
        Grid.Row="1"
        IsDirectionReversed="true">
                      <Track.DecreaseRepeatButton>
                          <RepeatButton
            Style="{StaticResource ScrollBarPageButtonSv}"
            Command="ScrollBar.PageUpCommand" />
                      </Track.DecreaseRepeatButton>
                     
                      <Track.Thumb>
             
                          <Thumb
            Style="{StaticResource ScrollBarThumb}"
            Margin="1,0,1,0" 
            Background="Red"
                          
            
                           
  
            BorderBrush="{StaticResource HorizontalNormalBorderBrushSv}" >  </Thumb>
                      </Track.Thumb>
  
  
                   
  
  
                          <Track.IncreaseRepeatButton>
                          <RepeatButton
            Style="{StaticResource ScrollBarPageButtonSv}"
            Command="ScrollBar.PageDownCommand" />
                      </Track.IncreaseRepeatButton>
                  </Track>
                  <RepeatButton
        Grid.Row="3"
        Style="{StaticResource ScrollBarLineButtonSv}"
        Height="18"
            
        Command="ScrollBar.LineDownCommand"
        Content="M 0 0 L 4 4 L 8 0 Z">
                  </RepeatButton>
  
              </Grid>
        
          
          </ControlTemplate>
  
          <ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
              <Grid >
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition MaxWidth="18"/>
                      <ColumnDefinition Width="0.00001*"/>
                      <ColumnDefinition MaxWidth="18"/>
                  </Grid.ColumnDefinitions>
                  <Border
        Grid.ColumnSpan="3"
        CornerRadius="2"
        Background="#F0F0F0" />
                  <RepeatButton
        Grid.Column="0"                          
      Style="{StaticResource ScrollBarLineButtonSv}"
        Width="18"
        Command="ScrollBar.LineLeftCommand"
        Content="M 4 0 L 4 8 L 0 4 Z" />
                  <Track
        Name="PART_Track"
        Grid.Column="1"
        IsDirectionReversed="False">
                      <Track.DecreaseRepeatButton>
                          <RepeatButton
            Style="{StaticResource ScrollBarPageButtonSv}"
            Command="ScrollBar.PageLeftCommand" />
                      </Track.DecreaseRepeatButton>
                      <Track.Thumb>
                          <Thumb
            Style="{StaticResource ScrollBarThumb}"
            Margin="0,1,0,1" 
            Background="{StaticResource NormalBrushSv}"
            BorderBrush="{StaticResource NormalBorderBrushSv}"
                              />
                      </Track.Thumb>
                      <Track.IncreaseRepeatButton>
                          <RepeatButton
            Style="{StaticResource ScrollBarPageButtonSv}"
            Command="ScrollBar.PageRightCommand" />
                      </Track.IncreaseRepeatButton>
                  </Track>
                  <RepeatButton
        Grid.Column="3"
        Style="{StaticResource ScrollBarLineButtonSv}"
        Width="18"
        Command="ScrollBar.LineRightCommand"
        Content="M 0 0 L 4 4 L 0 8 Z"/>
              </Grid>
          </ControlTemplate>
  
          <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
              <Setter Property="SnapsToDevicePixels" Value="True"/>
              <Setter Property="OverridesDefaultStyle" Value="true"/>
              <Style.Triggers>
                  <Trigger Property="Orientation" Value="Horizontal">
                      <Setter Property="Width" Value="Auto"/>
                      <Setter Property="Height" Value="18" />
                      <Setter Property="Template" Value="{StaticResource HorizontalScrollBar}" />
                  </Trigger>
                  <Trigger Property="Orientation" Value="Vertical">
                      <Setter Property="Width" Value="18"/>
                      <Setter Property="Height" Value="Auto" />
                      <Setter Property="Template" Value="{StaticResource VerticalScrollBar}" />
                  </Trigger>
              </Style.Triggers>
          </Style>
  
  
  i need scrollbar exactly look like microsoft office out look
  
  

  Tuesday, August 5, 2008 1:13 PM