how to bind to property without destroying the control template Features?

Question

I made a Control Template which it's target type if button. Tow of it's event triggers is belong to the IsEnable and IsnotEnable property. when the control template is enable I made the opacity 100% and when its not I made the opacity go down to 40%.

in my GUI Window I defined a new button like this:

<Button x:Name="JoinB" 
        IsEnabled="{Binding Path=GroupStatus,Converter={StaticResource EnableConverter}}"  
        Template="{DynamicResource JoinButtonStyle}" />

EnableConverter is a simple Converter that return true or false. The converter is working. My button does get not enable but the opacity doesn't change. If i define my button like this (without the converter):

<Button x:Name="JoinB" IsEnabled="false"  
        Template="{DynamicResource JoinButtonStyle}" />

the opacity does change.

Do you have any idea what I am doing wrong?

JoinButtonStyle Code:

<ControlTemplate x:Key="JoinButtonStyle" TargetType="{x:Type Button}">
    <ControlTemplate.Resources>
        <Storyboard x:Key="OnMouseEnter1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="8"/>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="rectangle">
                <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF00BC02"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnMouseLeave1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="2"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnPreviewMouseLeftButtonDown1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.7"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="label">
                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0.7"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnPreviewMouseLeftButtonUp1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="label">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="onNotEnabled">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="0.4"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="onEnabled">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>
    <Grid x:Name="grid" VerticalAlignment="Center" HorizontalAlignment="Center" Background="#00000000">
        <Rectangle x:Name="rectangle" HorizontalAlignment="center" VerticalAlignment="center" Height="30"  Width="90" RadiusX="15" RadiusY="15" StrokeThickness="1" Stroke="#FF58A6FD">
            <Rectangle.Effect>
                <DropShadowEffect BlurRadius="2" ShadowDepth="0" Color="#FF58A6FD"/>
            </Rectangle.Effect>
        </Rectangle>
        <Label x:Name="label" FontSize="15" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="#FF58A6FD" Content="Join"/>
    </Grid>
    <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
            <BeginStoryboard x:Name="OnPreviewMouseLeftButtonUp1_BeginStoryboard" Storyboard="{StaticResource OnPreviewMouseLeftButtonUp1}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
            <BeginStoryboard x:Name="OnPreviewMouseLeftButtonDown1_BeginStoryboard" Storyboard="{StaticResource OnPreviewMouseLeftButtonDown1}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
            <BeginStoryboard x:Name="OnMouseLeave1_BeginStoryboard" Storyboard="{StaticResource OnMouseLeave1}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
        </EventTrigger>
        <Trigger Property="IsEnabled" Value="False">
            <Trigger.EnterActions>
                <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard1" Storyboard="{StaticResource onNotEnabled}"/>
            </Trigger.EnterActions>
        </Trigger>
        <Trigger Property="IsEnabled" Value="True">
            <Trigger.EnterActions>
                <BeginStoryboard x:Name="onEnabled_BeginStoryboard" Storyboard="{StaticResource onEnabled}"/>
            </Trigger.EnterActions>
        </Trigger>
    </ControlTemplate.Triggers>

</ControlTemplate>  

converter code:

public class EnableToGroupStatusConverter:IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((ClientManager.DateGroupInfo.GroupStatusType)value == ClientManager.DateGroupInfo.GroupStatusType.CLOSED)
        {
            return false;
        }
        else
        {
            return true;
        }

    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

}

Answer 1

Instead of having two different Trigger for enabled/disabled state as you currently do

<Trigger Property="IsEnabled" Value="False">
    <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource onNotEnabled}"/>
    </Trigger.EnterActions>
</Trigger>
<Trigger Property="IsEnabled" Value="True">
    <Trigger.EnterActions>
        <BeginStoryboard Storyboard="{StaticResource onEnabled}"/>
    </Trigger.EnterActions>
</Trigger>

combine them into one Trigger with EnterActions/ExitActions

<Trigger Property="IsEnabled" Value="False">
   <Trigger.EnterActions>
      <BeginStoryboard Storyboard="{StaticResource onNotEnabled}"/>
   </Trigger.EnterActions>
   <Trigger.ExitActions>
      <BeginStoryboard Storyboard="{StaticResource onEnabled}"/>
   </Trigger.ExitActions>
</Trigger>