Disabled Button background disappears

Question

I'm really surprised about it but it appears that disabling a button on Windows Phones leads its background to disappear.

I've read some XAML solutions, however, my buttons are created programatically (I won't change that) and I have no idea about how to deal with that. Does anyone have an idea how to solve this?

table[i, j] = new Button();
table[i, j].Content = "";
table[i, j].BorderThickness = new Thickness(0, 0, 0, 0);
table[i, j].Height = 70;
table[i, j].Width = 70;
table[i, j].Background = brush1;
Thickness m = table[i, j].Margin;
m.Left = -18;
m.Top = -20;
table[i, j].Foreground = new SolidColorBrush(Colors.White);
table[i, j].Margin = m;
table[i, j].Tap += CoolMethod;
//The button is Added to a Grid
//Visible
//.......

//CoolMethod(){
table[i, j].IsEnabled = false;
//No longer visible
table[i, j].Background = brush2;
//Still not visible

The background resource is for now an ImageBrush like this :

ImageBrush buttonUnavailableImage = new ImageBrush();
BitmapImage imageDisabled = new BitmapImage(new Uri("Images/caseinactiv.png", UriKind.Relative));
buttonUnavailableImage.ImageSource = imageDisabled;

Answer 1

The behavior you’re observing is caused by the button’s default control template.

To view the default style for WP7.1, open the file "C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Design\System.Windows.xaml" file and search for <Style x:Key="PhoneButtonBase" TargetType="ButtonBase">.

<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
    <!-- skipped.. -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed"><!-- skipped.. --></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" Value="{StaticResource PhoneDisabledBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}" >
                        <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>

You see what happens under <VisualState x:Name="Disabled"> element? The background of the border is replaced by the Transparent brush.

To modify that style, copy and paste that style into your app.xaml, and edit the Disabled visual state of the button's control template however you want.

Specify no x:Key attribute to apply that style to all buttons in your application. Alternatively, you can specify some key, and in your button creation code add the following line to apply that style manually: theButton.Style = (Style)Application.Current.Resources[ "styleKey" ];