Triggering the style of a WPF button when a dependency property changes - wpf

Question

I've created a button control template where I want to change the color of the button depending on the mode of the button (whether its in Go mode or Stop mode). The XAML looks like :
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="innerCircle" RenderTransformOrigin=".5,.5">
<Ellipse.RenderTransform>
<ScaleTransform ScaleX=".8" ScaleY=".8"/>
</Ellipse.RenderTransform>
<Ellipse.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStopCollection>
<GradientStop Offset="0" Color="Green"/>
<GradientStop Offset="1" Color="Transparent"/>
</GradientStopCollection>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Viewbox>
<ContentPresenter Margin="{TemplateBinding Padding}"/>
</Viewbox>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsGo}" Value="True">
<Setter TargetName="outerCircle" Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStopCollection >
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="Red"/>
</GradientStopCollection>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="innerCircle" Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStopCollection>
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="1" Color="Transparent"/>
</GradientStopCollection>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Background="Transparent" Content="STOP" Padding="10" Template="{StaticResource buttonTemplate}" Height="84" Width="87" Click="Button_Click"></Button>
</Grid>
In my DataTrigger i have a binding to a IsGo DP property which i have defined in the code behind (of type boolean). I have a click handler which toggles the state of this DP in the code behind :
/// <summary>
/// Interaction logic for GoButton.xaml
/// </summary>
public partial class GoButton
{
public GoButton()
{
InitializeComponent();
}
public static readonly DependencyProperty IsGOProperty = DependencyProperty.Register("IsGo", typeof(Boolean), typeof(GoButton), new PropertyMetadata(false));
public Boolean IsGo
{
get { return (Boolean)GetValue(IsGOProperty); }
set { SetValue(IsGOProperty, value); }
}
private void Button_Click(object sender, RoutedEventArgs e)
{
IsGo = !IsGo;
}
}
However, when i click my button, nothing happens - although the click handler code executes and toggles the DP property, the colour of the button stays green and doesn't change to red. Any ideas what i'm doing wrong ?
thanks

Answer 1

You need to trigger the dependency property to refresh. You can do that by implementing INotifyPropertyChanged, removing IsGOProperty and then implementing IsGo like this:
private bool _isgo = false;
public bool IsGo {
get
{
return _isgo;
}
set
{
_isgo = value;
PropertyChanged(new PropertyChangedEventArgs("IsGo");
}
}

Answer 2

Your TemplatedParent is (I'm guessing) the button you're templating. The codebehind where you've defined your property most likely isn't a control derived from button, so I'm guessing your trigger's binding is incorrect...
If you could post the rest of your XAML and/or confirm which codebehind your property is in, this could be confirmed.
EDIT: Your comment confirms my theory: you're binding to TemplatedParent but the property isn't on TemplatedParent, it's on your usercontrol. The easist solution is to add a x:Name="root" tag to your UserControl's root element, and then change the trigger's binding to {Binding ElementName=root, Path=IsGo}.