Set image for disabled button in windows phone 8 - windows-phone-7

Question

I'm using the below ControlTemplate for image button in my application.
Control Template in App.xaml is below.
<!--Below is the style for all ImageButtons in this project -->
<Style x:Key="ButtonStyleIB" 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 x:Name="grid" Background="Transparent">
<Grid.Projection>
<PlaneProjection/>
</Grid.Projection>
<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>
<DoubleAnimation Duration="0" To="-25" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="grid" />
<!--d:IsOptimized="True"-->
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.CenterOfRotationX)" Storyboard.TargetName="grid" />
<!--d:IsOptimized="True"-->
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now in my page i'm creating the button as below.
<Button x:Name="saveButton" Style ="{StaticResource ButtonStyleIB}" VerticalAlignment="Center" Click="save_button_clicked">
<Image Source="/STCDirectory;component/Images/save.png" Stretch="Fill" />
</Button>
Upto this it is fine. So when i run the application the button with image is displaying.
And it is working fine.
Now based on some internal condition i want to disable the image button.
So for disable the button i'm using the below code.
saveButton.IsEnabled = false;
So then image button is not clickable according to the above step.
But i want to change the image also whenever the button is disabled.
How could i achive this.

Answer 1

Dont give direct uri of the image in the buttons
you can bind it with a string property and on button click you can change the that string to another uri then it will change the image of the button to new image.
i hope this might help ...

Answer 2

you can do it using imagesource binding ..first define your button like this.
<Button Grid.Row="1" x:Name="saveButton" Style ="{StaticResource ButtonStyleIB}" VerticalAlignment="Center" Click="saveButton_Click_1" Width="300" Height="50">
<Image Source="{Binding ImageSource}" Stretch="Fill" />
</Button>
and in your page.xaml.cs create property ImageSource like this.
public partial class MainPage : PhoneApplicationPage , INotifyPropertyChanged
{
// Constructor
public MainPage()
{
InitializeComponent();
ImageSource = "/Assets/1.jpg";
this.DataContext = this;
}
private string _ImageSource;
public string ImageSource
{
get
{
return _ImageSource;
}
set
{
_ImageSource = value;
FirePropertyChanged("ImageSource");
}
}
public event PropertyChangedEventHandler PropertyChanged;
protected void FirePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
private void saveButton_Click_1(object sender, RoutedEventArgs e)
{
ImageSource = "/Assets/2.jpg";
saveButton.IsEnabled = false;
}
}
here 1.jpg and 2.jpg are images i have toggled.