Set property 'System.Windows.Controls.Primitives.ToggleButton.IsChecked' threw an exception

Question

I'm trying to add a customn style for ToggleButton using Application Resources, when I'm calling the style as StaticResource and add it to the ToggleButton Control with the property IsChecked="True" , I got this error.

Exception thrown: 'System.Windows.Markup.XamlParseException' in PresentationFramework.dll
'Set property 'System.Windows.Controls.Primitives.ToggleButton.IsChecked' threw an exception.'

InvalidOperationException: 'Border' name cannot be found in the name scope of 'System.Windows.Controls.ControlTemplate'.

App.xaml:

<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}">
                <Viewbox>
                    <Grid x:Name="toggleSwitch">
                        <Border x:Name="Border" CornerRadius="10"
                Background="#FFFFFFFF"
                Width="80" Height="25">
                            <Border.Effect>
                                <DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
                            </Border.Effect>
                            <Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
                     Margin="2 2 2 1"
                     Stroke="Gray" StrokeThickness="0.2"
                     HorizontalAlignment="Left" Width="22" >
                                <Ellipse.Effect>
                                    <DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
                                </Ellipse.Effect>
                            </Ellipse>
                        </Border>

                        <TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 8 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
                        <TextBlock x:Name="txtOn" Text="ON" Margin="15 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold"  Foreground="White" HorizontalAlignment="Left"/>

                    </Grid>
                </Viewbox>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Checked">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                        To="#34A543"
                                        Duration="0:0:0.1" />

                                <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                            Storyboard.TargetProperty="Margin"
                                            To="56 2 2 1"
                                            Duration="0:0:0.1" />
                                <DoubleAnimation
                                    Storyboard.TargetName="txtOff" 
                                    Storyboard.TargetProperty="(TextBlock.Opacity)"
                                    From="1.0" To="0.0" Duration="0:0:0:0.1"     />
                                <DoubleAnimation
                                    Storyboard.TargetName="txtOn" 
                                    Storyboard.TargetProperty="(TextBlock.Opacity)"
                                    From="0.0" To="1.0" Duration="0:0:0:0.1"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Unchecked">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                        To="#C2283B"
                                        Duration="0:0:0.1" />
                                <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                            Storyboard.TargetProperty="Margin"
                                            To="2 2 2 1"
                                            Duration="0:0:0.1" />
                                <DoubleAnimation
                                    Storyboard.TargetName="txtOff" 
                                    Storyboard.TargetProperty="(TextBlock.Opacity)"
                                    From="0" To="1.0" Duration="0:0:0:0.1"       />
                                <DoubleAnimation
                                    Storyboard.TargetName="txtOn" 
                                    Storyboard.TargetProperty="(TextBlock.Opacity)"
                                    From="1.0" To="0.0" Duration="0:0:0:0.1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Source: Link

MainWindow.xaml:

<Window>
    <Grid>
        <ToggleButton x:Name="tog" Style="{StaticResource myToggleSwitch}" IsChecked="True" Checked="ToggleButton_Checked"></ToggleButton>
    </Grid>
</Window>

MainWindow.xaml.cs

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }
}

how can I solve this?

Answer 1

It will work as follows. Using Trigger.EnterActions instead of EventTrigger solved the problem.

<Style x:Key="myToggleSwitch" TargetType="{x:Type ToggleButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Grid x:Name="toggleSwitch">
                        <Border x:Name="Border" CornerRadius="10"
            Background="#FFFFFFFF"
            Width="80" Height="25">
                            <Border.Effect>
                                <DropShadowEffect ShadowDepth="0.5" Direction="0" Opacity="0.3" />
                            </Border.Effect>
                            <Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
                 Margin="2 2 2 1"
                 Stroke="Gray" StrokeThickness="0.2"
                 HorizontalAlignment="Left" Width="22" >
                                <Ellipse.Effect>
                                    <DropShadowEffect BlurRadius="10" ShadowDepth="1" Opacity="0.3" Direction="260" />
                                </Ellipse.Effect>
                            </Ellipse>
                        </Border>

                        <TextBlock x:Name="txtOff" Text="OFF" Margin="0 0 25 0" VerticalAlignment="Center" FontWeight="DemiBold" HorizontalAlignment="Right" Foreground="White"/>
                        <TextBlock x:Name="txtOn" Text="ON" Margin="25 0 0 0" VerticalAlignment="Center" FontWeight="DemiBold"  Foreground="White" HorizontalAlignment="Left"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="ToggleButton.IsChecked" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="#34A543"
                                    Duration="0:0:0.1" />

                                        <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                        Storyboard.TargetProperty="Margin"
                                        To="56 2 2 1"
                                        Duration="0:0:0.1" />
                                        <DoubleAnimation
                                Storyboard.TargetName="txtOff" 
                                Storyboard.TargetProperty="(TextBlock.Opacity)"
                                From="1.0" To="0.0" Duration="0:0:0:0.1"     />
                                        <DoubleAnimation
                                Storyboard.TargetName="txtOn" 
                                Storyboard.TargetProperty="(TextBlock.Opacity)"
                                From="0.0" To="1.0" Duration="0:0:0:0.1"  />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <!--  some out fading  -->
                            <Trigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                    To="#C2283B"
                                    Duration="0:0:0.1" />
                                        <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                        Storyboard.TargetProperty="Margin"
                                        To="2 2 2 1"
                                        Duration="0:0:0.1" />
                                        <DoubleAnimation
                                Storyboard.TargetName="txtOff" 
                                Storyboard.TargetProperty="(TextBlock.Opacity)"
                                From="0" To="1.0" Duration="0:0:0:0.1"       />
                                        <DoubleAnimation
                                Storyboard.TargetName="txtOn" 
                                Storyboard.TargetProperty="(TextBlock.Opacity)"
                                From="1.0" To="0.0" Duration="0:0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.ExitActions>
                            <Setter Property="Foreground" Value="{DynamicResource IdealForegroundColorBrush}" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="False">
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource GrayBrush7}" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="VerticalContentAlignment" Value="Center" />
    </Style>