I would like to have a SuperSlider so that the first 20% is gray, the next 60% is white and the last 20% is red.  I created an image with these colors the same size as my SuperSlider and assigned it to Fill using an ImageBrush.  However, I do not seem to get the effect I desire.  If I set the ImageBrush Stretch=Fill then I get all three colors stretched to the size of the SuperSlider at the time.  No matter how I set the ImageBrush, I never get the desired effect.  Any suggestions on how I can achieve this look?

Can you create a ticket and a simple repo project?  I think the proper solution is to use a linear gradient brush instead of an image honestly.  The XAML below will do a sharp line between colors.  Grey is on the left in this example.

I also think you wanted "UniformToFill" on your brush

<c4f:SuperSlider 
	Title="Slider with thumb, custom sizing and &quot;flair&quot;"
	BackgroundSize="12"
	ProgressSize="24">
	<c4f:SuperSlider.Background>
		<LinearGradientBrush EndPoint="1,0">
			<GradientStop Offset="0.0" Color="Gray"/>
			<GradientStop Offset="0.2" Color="Gray"/>
			<GradientStop Offset="0.2" Color="White"/>
			<GradientStop Offset="0.8" Color="White"/>
			<GradientStop Offset="0.8" Color="Red"/>
		</LinearGradientBrush>
	</c4f:SuperSlider.Background>
</c4f:SuperSlider>

I opened issue Id #7984for this.  I tried the lineargradientbrush with the same result.  The issue has a project attached that illustrates the problem.