Question : Silverlight ContentPresenter in Button Template

Hello Experts,

I have been working with Silverlight controls for a couple months now and have created a template for a button. I have added a contentpresenter to the template and the button does show the content that has been added. However, the content is very faded. You can only see the content if you are looking very close. I have been tweeking brushes, colors, visibility and opacity properties in both the contentpresenter and button styles in Blend 4 and VS 2010 for a couple hours now in order to get the content to appear more prominent. Nothing I have done has touched the appearance of the content. I know this has got to be a simple property setting but I can't find it.

Your help is appreciated.
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:
226:
227:
228:
229:
230:
231:
232:
233:
234:
235:
236:
237:
238:
239:
240:
241:
242:
243:
244:
245:
246:
247:
248:
249:
250:
251:
252:
253:
254:
255:
256:
257:
258:
259:
260:
261:
262:
263:
264:
265:
266:
267:
268:
269:
270:
271:
272:
273:
274:
275:
276:
277:
278:



<Style TargetType="Button"
               x:Key="LT_ButtonStyle">
            <Setter Property="Background"
                    Value="#FF1F3B53" />
            <Setter Property="Foreground"
                    Value="#FF000000" />
            <Setter Property="Padding"
                    Value="3" />
            <Setter Property="BorderThickness"
                    Value="1" />
            <Setter Property="BorderBrush">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.5,1"
                                         StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9"
                                      Offset="0" />
                        <GradientStop Color="#FF8399A9"
                                      Offset="0.375" />
                        <GradientStop Color="#FF718597"
                                      Offset="0.375" />
                        <GradientStop Color="#FF617584"
                                      Offset="1" />
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Storyboard.TargetName="BackgroundAnimation" />
                                            <ColorAnimation Duration="0"
                                                            To="#F2FFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#CCFFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#7FFFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                                          Storyboard.TargetName="FocusVisualElement">
                                                <EasingColorKeyFrame KeyTime="0"
                                                                     Value="#FF757AA1" />
                                                <EasingColorKeyFrame KeyTime="0:0:0.5"
                                                                     Value="#FF181BF1" />
                                            </ColorAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.RadiusX)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="8" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="8" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="1" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="0.196" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="0.298" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0"
                                                            To="#FF6DBDD1"
                                                            Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                            Storyboard.TargetName="Background" />
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Storyboard.TargetName="BackgroundAnimation" />
                                            <ColorAnimation Duration="0"
                                                            To="#D8FFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#C6FFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#8CFFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <ColorAnimation Duration="0"
                                                            To="#3FFFFFFF"
                                                            Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
                                                            Storyboard.TargetName="BackgroundGradient" />
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="1" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="1" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="0.196" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="0.222" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
                                                                          Storyboard.TargetName="FocusVisualElement">
                                                <EasingColorKeyFrame KeyTime="0"
                                                                     Value="#FF757AA1" />
                                                <EasingColorKeyFrame KeyTime="0:0:0.5"
                                                                     Value="#FF4E4899" />
                                            </ColorAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="1" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="1.1" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                                                           Storyboard.TargetName="FocusVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="0.9" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="1.5" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To=".55"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Storyboard.TargetName="DisabledVisualElement" />
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                                          Storyboard.TargetName="DisabledVisualElement">
                                                <EasingColorKeyFrame KeyTime="0"
                                                                     Value="White" />
                                                <EasingColorKeyFrame KeyTime="0:0:0.5"
                                                                     Value="#FF97989D" />
                                            </ColorAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)"
                                                                           Storyboard.TargetName="DisabledVisualElement">
                                                <EasingDoubleKeyFrame KeyTime="0"
                                                                      Value="0.385" />
                                                <EasingDoubleKeyFrame KeyTime="0:0:0.5"
                                                                      Value="0.159" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0"
                                                             To="1"
                                                             Storyboard.TargetProperty="Opacity"
                                                             Storyboard.TargetName="FocusVisualElement" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="Background"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Background="White"
                                    CornerRadius="3">
                                <Grid Background="{TemplateBinding Background}"
                                      Margin="1">
                                    <Border x:Name="BackgroundAnimation"
                                            Background="#FF448DCA"
                                            Opacity="0" />
                                    <Rectangle x:Name="BackgroundGradient">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush EndPoint=".7,1"
                                                                 StartPoint=".7,0">
                                                <GradientStop Color="#FFFFFFFF"
                                                              Offset="0" />
                                                <GradientStop Color="#F9FFFFFF"
                                                              Offset="0.375" />
                                                <GradientStop Color="#E5FFFFFF"
                                                              Offset="0.625" />
                                                <GradientStop Color="#C6FFFFFF"
                                                              Offset="1" />
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                </Grid>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter"
                                              Opacity="100"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Content="{TemplateBinding Content}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              Margin="{TemplateBinding Padding}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                            <Rectangle x:Name="DisabledVisualElement"
                                       IsHitTestVisible="false"
                                       Opacity="0"
                                       RadiusY="3"
                                       RadiusX="3">
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1"
                                                         MappingMode="RelativeToBoundingBox"
                                                         StartPoint="0.5,0">
                                        <GradientStop Color="Black"
                                                      Offset="0" />
                                        <GradientStop Color="White"
                                                      Offset="1" />
                                        <GradientStop Color="#FF3A3A3C"
                                                      Offset="0.385" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="FocusVisualElement"
                                       IsHitTestVisible="false"
                                       Margin="1"
                                       Opacity="0.845"
                                       RadiusY="12"
                                       RadiusX="8"
                                       Stroke="#FF0F1862"
                                       StrokeThickness="2"
                                       RenderTransformOrigin="0.5,0.5">
                                <Rectangle.RenderTransform>
                                    <CompositeTransform />
                                </Rectangle.RenderTransform>
                                <Rectangle.Effect>
                                    <DropShadowEffect BlurRadius="8"
                                                      Opacity="0.85"
                                                      ShadowDepth="4" />
                                </Rectangle.Effect>
                                <Rectangle.Fill>
                                    <LinearGradientBrush EndPoint="0.5,1"
                                                         MappingMode="RelativeToBoundingBox"
                                                         StartPoint="0.5,0">
                                        <GradientStop Color="#FF565764" />
                                        <GradientStop Color="#FF9DA6EF"
                                                      Offset="1" />
                                        <GradientStop Color="#FF757AA1"
                                                      Offset="0.196" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
Answer : Silverlight ContentPresenter in Button Template

This is because the <Rectangle x:Name="FocusVisualElement"> is displayed on top of the ContentPresenter.
The opacity of this Rectangle is 0.845.

Normally, in the Visual tree for the template which you have defined, the elements which you have declared at the end, are displayed at the top most.

So in your template, first your Border (Name="Background") is drawn, followed by the ContentPresenter, then the <Rectangle x:Name="DisabledVisualElement"
> followed by <Rectangle x:Name="FocusVisualElement">.

This is why your Content looks dimmed.

Declare your ContentPresenter tag after the <Rectangle x:Name="FocusVisualElement">. This will solve your problem.
