Select the product you need help with

Expression Blend - Path object used for custom scroll thumb does not resize properly

Article ID: 953532 - View products that this article applies to.

Source: Microsoft Support

RAPID PUBLISHING

RAPID PUBLISHING ARTICLES PROVIDE INFORMATION DIRECTLY FROM WITHIN THE MICROSOFT SUPPORT ORGANIZATION. THE INFORMATION CONTAINED HEREIN IS CREATED IN RESPONSE TO EMERGING OR UNIQUE TOPICS, OR IS INTENDED SUPPLEMENT OTHER KNOWLEDGE BASE INFORMATION.

Back to the top | Give Feedback

Action

Replacing a vertical scroll bar thumb with a custom path object. In this example, the scroll bar thumb is replaced by a rectangle with rounded corners and a gradient fill. Sample code for the thumb:

<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}">
        <Rectangle RadiusY="45" RadiusX="45" Margin="0,0,0,0">
          <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0.954544,0.5" EndPoint="0.0454557,0.5">
              <GradientStop Color="#FFFEFEFE" Offset="0"/>
              <GradientStop Color="#FFFF0000" Offset="1"/>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
      </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Back to the top | Give Feedback

Result

As the scroll bar thumb changes size proportionate to the content, the ends of the rectangle elongate into conical shapes rather than keeping their corners round.

Back to the top | Give Feedback

Cause

The thumb is designed to scale along the Y-axis, rather than resize.

Resizing an object changes only the object's dimensions (width and height)
Scaling applies a transform to the object that resizes the object based on a multiple of the initial X and Y values

Back to the top | Give Feedback

Resolution

Insert a grid into the thumb that has one column and three rows. The first and last row will have a fixed height and the middle row will scale proportionate to the content.

In the sample below, the first and last row include a path in the shape of a semi-circle. The middle path will use a rectangle with flat ends. The same gradient is used for all three rows. Remove strokes from your paths to prevent horizontal lines appearing between the rows in your scroll bar thumb.

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

    
    <Grid MinHeight="0">
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

        
        <Grid.RowDefinitions>
          <RowDefinition Height="11"/>
          <RowDefinition />
          <RowDefinition Height="11"/>
        </Grid.RowDefinitions>

      
      <Path x:Name="top" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Data="M320,1.2612134E-13 C320,-1.9206002E-05 640,2.2737368E-13 640,480 640,480.00057 -1.5898376E-13,480.00008 -1.5898394E-13,480 -1.1866064E-12,1.1368684E-13 320,1.2612136E-13 320,1.2612134E-13 z" Grid.RowSpan="1" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" Grid.Row="0">
        <Path.RenderTransform>
      <TransformGroup>
        <ScaleTransform ScaleX="1" ScaleY="1"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
      </TransformGroup>
        </Path.RenderTransform>
        <Path.Fill>
      <LinearGradientBrush StartPoint="0.954544,0.5" EndPoint="0.0454557,0.5">
        <GradientStop Color="#FFFEFEFE" Offset="0"/>
        <GradientStop Color="#FFFF0000" Offset="1"/>
      </LinearGradientBrush>
        </Path.Fill>
      </Path>

      
      <Rectangle x:Name="middle" RadiusY="0" RadiusX="0" Margin="0,0,0,0" Grid.Row="1">
        <Rectangle.Fill>
      <LinearGradientBrush StartPoint="0.954544,0.5" EndPoint="0.0454557,0.5">
        <GradientStop Color="#FFFEFEFE" Offset="0"/>
        <GradientStop Color="#FFFF0000" Offset="1"/>
      </LinearGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      
      <Path x:Name="bottom" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" Stretch="Fill" Data="M320,1.2612134E-13 C320,-1.9206002E-05 640,2.2737368E-13 640,480 640,480.00057 -1.5898376E-13,480.00008 -1.5898394E-13,480 -1.1866064E-12,1.1368684E-13 320,1.2612136E-13 320,1.2612134E-13 z" Grid.RowSpan="1" d:LayoutOverrides="HorizontalAlignment, VerticalAlignment" Grid.Row="2">
        <Path.RenderTransform>
      <TransformGroup>
        <ScaleTransform ScaleX="1" ScaleY="-1"/>
        <SkewTransform AngleX="0" AngleY="0"/>
        <RotateTransform Angle="0"/>
        <TranslateTransform X="0" Y="0"/>
      </TransformGroup>
        </Path.RenderTransform>
        <Path.Fill>
      <LinearGradientBrush StartPoint="0.954544,0.5" EndPoint="0.0454557,0.5">
        <GradientStop Color="#FFFEFEFE" Offset="0"/>
        <GradientStop Color="#FFFF0000" Offset="1"/>
      </LinearGradientBrush>
        </Path.Fill>
      </Path>
      </Grid>
      </ControlTemplate>
    </Setter.Value>
</Setter>
</Style>

Back to the top | Give Feedback

More Information

See Create or Edit a control template in the Expression Blend User Guide for instructions on how to work down to the scroll bar thumb template.

Back to the top | Give Feedback

DISCLAIMER

MICROSOFT AND/OR ITS SUPPLIERS MAKE NO REPRESENTATIONS OR WARRANTIES ABOUT THE SUITABILITY, RELIABILITY OR ACCURACY OF THE INFORMATION CONTAINED IN THE DOCUMENTS AND RELATED GRAPHICS PUBLISHED ON THIS WEBSITE (THE “MATERIALS”) FOR ANY PURPOSE. THE MATERIALS MAY INCLUDE TECHNICAL INACCURACIES OR TYPOGRAPHICAL ERRORS AND MAY BE REVISED AT ANY TIME WITHOUT NOTICE.

TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, MICROSOFT AND/OR ITS SUPPLIERS DISCLAIM AND EXCLUDE ALL REPRESENTATIONS, WARRANTIES, AND CONDITIONS WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING BUT NOT LIMITED TO REPRESENTATIONS, WARRANTIES, OR CONDITIONS OF TITLE, NON INFRINGEMENT, SATISFACTORY CONDITION OR QUALITY, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, WITH RESPECT TO THE MATERIALS.

Back to the top | Give Feedback