Re: Custom style overridden by theming

pyt — Mon, 06 Jul 2009 14:40:07 GMT

Ok here is my custom style:

                    <Style x:Key="styleButtonTopMenu" TargetType="Button">
                        <Setter Property="Width" Value="140"/>
                        <Setter Property="VerticalAlignment" Value="Stretch"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                    <Grid>
                                        <Rectangle>
                                            <Rectangle.Fill>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFff9f58"/>
                                                    <GradientStop Color="#FF8e3c00" Offset="1"/>
                                                    <GradientStop Color="#FFfb6c00" Offset="0.84"/>
                                                </LinearGradientBrush>
                                            </Rectangle.Fill>
                                        </Rectangle>
                                        <TextBlock FontFamily="Trebuchet MS" FontSize="16" Foreground="White" Margin="8" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Text="{TemplateBinding Tag}">
                                <TextBlock.Effect>
                                    <DropShadowEffect Color="#FFB44B19" ShadowDepth="0" BlurRadius="4" Opacity="1"/>
                                </TextBlock.Effect>
                                        </TextBlock>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>

The button I want to style:

            <Button Tag="Home" Style="{StaticResource styleButtonTopMenu}"/>

The default button style in my theme:

    <Style TargetType="Button">
        <Setter Property="Height" Value="36"/>
        <Setter Property="Cursor" Value="Hand"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <vsm:VisualStateManager.VisualStateGroups>
                            <vsm:VisualStateGroup x:Name="CommonStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.3000000"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#BEFFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.403"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.7"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="1.7"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentControl" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FF111111"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentControl" Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFB0E7FF"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FF75A4B9"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                                <vsm:VisualState x:Name="Normal"/>
                                <vsm:VisualState x:Name="Pressed"/>
                                <vsm:VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFFFFFFF"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFE7E7E7"/>
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFA4A4A4"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </vsm:VisualState>
                            </vsm:VisualStateGroup>
                            <vsm:VisualStateGroup x:Name="FocusStates">
                                <vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualTransition GeneratedDuration="00:00:00.2000000"/>
                                </vsm:VisualStateGroup.Transitions>
                                <vsm:VisualState x:Name="Unfocused"/>
                                <vsm:VisualState x:Name="Focused"/>
                            </vsm:VisualStateGroup>
                        </vsm:VisualStateManager.VisualStateGroups>
                        <Rectangle x:Name="rectangle" RadiusX="4" RadiusY="4" Stroke="#FF62757E">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFC2ECFF" Offset="0"/>
                                    <GradientStop Color="#FF66D0FF" Offset="0.885"/>
                                    <GradientStop Color="#FF4C98B9" Offset="1"/>
                                </LinearGradientBrush>

                            </Rectangle.Fill>
                            <Rectangle.Effect>
                                <DropShadowEffect ShadowDepth="0" Opacity="0.5"/>
                            </Rectangle.Effect>
                        </Rectangle>
                        <ContentControl x:Name="contentControl" Margin="6,3,6,3" 
    							HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
    							VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
    							Content="{TemplateBinding Content}" Foreground="#FF111111">
                            <ContentControl.Effect>
                                <DropShadowEffect Color="#FFFFFDC2" ShadowDepth="0"/>
                            </ContentControl.Effect>
                        </ContentControl>
                        <Rectangle x:Name="glass" RadiusX="4" RadiusY="4" Clip="M298,15 C298,-118 -19,-126 -22,15 C-22,15 298,15 298,15 z" Margin="3,3,3,3">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#3FFFFFFF"/>
                                    <GradientStop Color="#59FFFFFF" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <controls:Viewbox>
                            <Ellipse x:Name="ellipse" Stroke="{x:Null}" Width="24" Height="10" Clip="M1.9375,-0.5 L21.5625,-0.5 C23.771637,-0.5 25.25,5.5 25.25,5.5 C25.25,5.6666665 -1,5.354167 -1,5.6875 C-1,5.6875 -0.27163899,-0.5 1.9375,-0.5 z" Margin="0,12,0,-4" RenderTransformOrigin="0.5,0.5">
                                <Ellipse.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Ellipse.RenderTransform>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#7FFFFFFF" Offset="0.333"/>
                                        <GradientStop Color="#00FFFFFF" Offset="1"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                        </controls:Viewbox>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I wonder if this problem could be related to the fact that I override the default template in my theme version of the style.

Re: Custom style overridden by theming

Jac_P — Mon, 06 Jul 2009 14:24:56 GMT

Can you post may be the section of your xaml page file containing this portion (Button)?

Thanks

Jac

Re: Custom style overridden by theming

pyt — Mon, 06 Jul 2009 14:09:27 GMT

It's currently in my App.xaml resources sections. I tried putting it in my theme.xaml file but the problem remains the same.

Re: Custom style overridden by theming

elmore.adam — Fri, 03 Jul 2009 19:54:33 GMT

Where are you currently storing your custom Button Style (MyCustomStyle)?

Custom style overridden by theming

pyt — Thu, 02 Jul 2009 18:06:16 GMT

Hi all,

I have a application using the theming functionality of the toolkit.

I'm trying to set a custom style on a button like so:

I don't want this button to get the theme style. However when I run the app my custom style is replaced by the default style for the Button control.

What can I do to fix this?

Thanks.

Silverlight Controls and Silverlight Toolkit

Re: Custom style overridden by theming

Re: Custom style overridden by theming

Re: Custom style overridden by theming

Re: Custom style overridden by theming

Custom style overridden by theming