CODEWITHSUNDEEP
xamlwindows-phone-7styles
pearcewg
pearcewg

Reputation: 9593

WP7 - set button Background and BorderBrush in addition to Foreground color on click

There are a few questions out here which involve settings a Button background color on click. Those questions used this as the solution:

<phone:PhoneApplicationPage ...>
    <phone:PhoneApplicationPage.Resources>
        <Style x:Key="ButtonStyle1" TargetType="Button">
            <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.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ColorAnimation Duration="0" To="Cyan" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}" Background="Black">
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Button Content="Button" Style="{StaticResource ButtonStyle1}"/>
    </Grid>
</phone:PhoneApplicationPage>

I'm looking to use this template to also set the BorderBrush and Foreground colors, but my tweaking this XAML has only ended up with bad effects.

[Note: the behavior is that when I set the colors in codebehind, they don't take effect when my app is run, because the colors are overridden by the style.]

Upvotes: 2

Views: 3040

Answers (2)

JustinAngel
JustinAngel

Reputation: 16102

If you're tweaking XAML manually - You're doing it wrong.

Don't fight the Zen of XAML, flow with it. Embrace Expression Blend into your development workflow for all GUI design, or be prepared for the untold horrors of manual XAML editing.

Specifically for VisualStateManagerm manually editing XAML makes absolutely no sense as it was designed by the Silverlight Team so it could be optimally used from Expression Blend.

I strongly suggest you spend 30 minutes watching these 4 "How Do I?" VSM videos by Steve White @ http://expression.microsoft.com/en-us/cc643423.aspx

These 4 videos helped me a lot in the early days of working on VSM to understand how to use VSM and how to best articulate my UI logic into Visual States.

In Expression Blend getting the background colour to change on Click is as simple as:

  1. Drag & drop a new button in Expression Blend.
  2. Right click and "Edit Template --> Edit Copy".
  3. Choose the "Pressed" VSM state from the "States" pane.
  4. Change the background colour of "ButtonBackground".

Upvotes: 3

Boryana Miloshevska
Boryana Miloshevska

Reputation: 2730

Check this discussion: Setting a background property from a storyboard

and also Button Styles and Templates

Upvotes: 1

Related Questions