CODEWITHSUNDEEP
c#wpfwindows-phone-7
Divya
Divya

Reputation: 2622

Why does disabling a button remove its background color?

I have a button whose background is specified by a LinearGradientBrush. I need to disable this button. So, I just set its isEnabled property to "false". But, that removes the background too and since my button doesn't have a border, what I have left is just the text on the button. Here's the xaml code for my button:

<Button x:Name="create" Content="Create a new one?" Margin="12, 0, 12, 0" ClickMode="Release" Click="create_click" MinWidth="330" MinHeight="50" BorderThickness="0" Height="110" Foreground="Black">
    <Button.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
             <GradientStop Color="#FFFA2FC5" Offset="0.279" />
             <GradientStop Color="#FF5904A0" Offset="1" />
        </LinearGradientBrush>
    </Button.Background>
</Button>

And when I set isEnabled to "true" again, the background comes back and everything is good again.

Is this what is supposed to happen?
What should I do if I just want to make the button non-functional for a while without changing its appearance?

Upvotes: 2

Views: 2107

Answers (3)

GameAlchemist
GameAlchemist

Reputation: 19294

well much simpler way is to define a style that has a trigger on IsEnabled which will set the background you want.

  <Button >
    <Button.Style>
           <Style   TargetType="{x:Type Button}" >
             <Setter Property="Background" Value=" the Enabled color i want"/>
                   <Style.Triggers>
                         <Trigger Property="IsEnabled" Value="True">
                           <Setter Property="Background" Value=" the Disabled color i want"/>
                         </Trigger>
                    </Style.Triggers>
            </Style>
      </Button.Style>
    </Button>

or define your style in resources if you plan to use it several times.

Upvotes: 1

ZombieSheep
ZombieSheep

Reputation: 29953

You need to edit the appropriate VisualState to change the look of the disabled button. The easiest way to do this is to use Expression Blend.

With the form open, Right click on the button and select Edit Template -< Edit a copy. This will put a chunk of XAML in the page resources section which defines the VisualStates of the control, as well as binding the style of the instance to the newly defined style. The Xaml will look like this...

 <Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    <Setter Property="Padding" Value="10,3,10,5"/>
    <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="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </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>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And the bit you are concerned with is the VisualState element with the name "Disabled". There is already a background of "Transparent" defined, so you just need to edit that.

If you are doing this manually, you will need to set Style="{StaticResource ButtonStyle1}" on your button for this to take effect.

Upvotes: 3

Samuel Slade
Samuel Slade

Reputation: 8613

In WPF/Silverlight, the Button control has its Style overly defined. So whenever you try to change something, such as the Background, certain Triggers that have already been defined will override the custom style. Such as in the way you have experienced.

To overcome this, you need to create your own ControlTemplate for the button, inside which you can explicitly define it's Background, and never add a Trigger to change it when it's disabled.

Upvotes: 0

Related Questions