Windows Phone 7 Slider Accent Both Foreground and Background Colors

Question

I need to create a slider with two colors, so that when you slide one direction or the other it appears as though one color has a higher percent over the other, or vice versa. However, when I apply the code below, wp7 automatically dims the background color, so it's not the proper color. The slider is in a list box which iterates over objects, so the colors are constantly changing. Any way to make the color of the foreground match the color of the background? (so that #ffffff would appear white on both sides of the slider, and not white on one and a gray on the other?)

Code is below.

                <Slider
                    Grid.Column="0"
                    Grid.ColumnSpan="3"
                    Grid.Row="1"
                    Background="{Binding AwayTeam.Color}"
                    Foreground="{Binding HomeTeam.Color}"
                    FlowDirection=""
                    Value="4.7"
                    />

Ok, so I'm adding some clarification. Look at the picture at this link. Slider Example

The bottom background (right hand side) is what I need the slider to look like, and that blue is what the color is supposed to look like. But, when I set that blue as the background color, wp7 makes it darker. The top slider is what wp7 currently does to the background color, and the bottom is what I need the background color to look like.

Answer 1

You just need to make a minor modification to the sliders template:

1. Open the project in Expression Blend.
2. Select the slider in the "Objects and Timeline" window.
3. Right click on it and select: Edit Template > Edit a copy

4. In the xaml for the template, find this line

   <Rectangle x:Name="HorizontalTrack" Grid.Column="2" Fill="{TemplateBinding Background}"
          Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
   

5. remove Opacity="0.2"

6. Accept this answer. :)