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

  • Question


  • 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

Answers

  • Srinivasnerella,

    Waaaaaaaaaaaaaaay off topic!


    For great advice on all topics XP, visit http://www.annoyances.org/exec/forum/winxp
    • Marked as answer by JeniferA Thursday, September 11, 2008 4:32 PM
    Tuesday, August 5, 2008 2:07 PM