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

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}.