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

Article ID: 953532 - View products that this article applies to.
Expand all | Collapse all
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.

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>

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.

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


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 -->
    <Grid MinHeight="0">
        <Grid.ColumnDefinitions>
          <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <!-- Set the row heights; first and last are fixed, middle row scales proportionate to the content -->
        <Grid.RowDefinitions>
          <RowDefinition Height="11"/>
          <RowDefinition />
          <RowDefinition Height="11"/>
        </Grid.RowDefinitions>

      <!-- Top row path -->
      <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>

      <!-- Middle row rectangle that scales -->
      <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>

      <!-- Bottom row path -->
      <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>

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.

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.

Properties

Article ID: 953532 - Last Review: May 22, 2008 - Revision: 1.0
APPLIES TO
  • Microsoft Expression Blend
  • Microsoft Expression Blend 2
Keywords: 
kbnomt kbrapidpub KB953532

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com