Alternating an image and color as button background depending on state in XAML

1
votes

I have an image that I'm using as a background for my buttons. If the button is disabled, I want it to be a certain color, in this case, #FFCCCCCC, but when it is enabled, I want it to use the image as the background. Is this possible? I'm modifying the template in Expression Blend, but I can't find the right combination. It seems that either the button has an image background or a color background, but can't change according to state.

I'm using Windows Phone 7 / Silverlight.

My XAML is below:

    <Style x:Key="SiteKeyButtonStyle" TargetType="Button">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="HorizontalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="24" />
        <Setter Property="Foreground" Value="#FFFFFF" />
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="MinWidth" Value="140" />
        <Setter Property="Height" Value="50" />
        <Setter Property="Padding" Value="24, 0, 24, 0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" >
                                                <DiscreteObjectKeyFrame.Value>
                                                    <SolidColorBrush Color="#FFCCCCCC"/>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" >
                            <Border.Background>
                                <ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/>
                            </Border.Background>
                            <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
2
silverlightxamlwindows-phone-7expression-blend

2 Answers

2
votes

The typical approach to this sort of thing is to add a Rectangle element to the core design like this:-

                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" >
                         <Rectangle x:Name="BackgroundElement">
                             <Rectangle.Fill>
                                 <ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/>
                             </Rectangle.Fill>
                         </Rectangle>
                         <ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                     </Border>

You can now change the Disabled VisualState so that background is not Transparent but #FFCCCCCC. Also add a DoubleAnimation to set the Opacity of the "BackgroundElement" to 0 in both the Disabled and Pressed states.

So when enabled the the image in the rectangle is seen beding any content in the content container. When disabled the image is transparent and the #FFCCCCCC color is seen. When pressed the PhoneForegroundBrush color is seen.

0
votes

you can change the entire controltemplate in the trigger so something like this. i didn't test this but hopefully it will give u a good idea of how to do it.

 <Style TargetType="{x:Type Button}">
     <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
     <Style.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <ControlTemplate TargetType="{x:Type Button}">

                    </ControlTemplate>
                </Trigger>
     </Style.Trigger>
    </Style>