ToggleButton: Style doesn't work with IsChecked binding

Question

I have a ToggleButton defined like this:

<ToggleButton x:Name="tbtn_delivery_advice" IsChecked="{Binding ServiceOptions.Advice.Requested}" Style="{DynamicResource ToggleButtonStyle}" Grid.Column="0" Grid.Row="1" Width="28" Margin="2 7" VerticalAlignment="Top"/>

and this style, that I found on the internet:

        <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Viewbox>
                            <Border x:Name="Border" CornerRadius="10"
                            Background="#FFFFFFFF"
                            Width="40" Height="20"
                            BorderBrush="#FF707070"
                            BorderThickness="1">
                                <Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
                                 Margin="2 1 2 1"
                                 Stroke="LightGray" StrokeThickness="1"
                                 HorizontalAlignment="Stretch">
                                </Ellipse>
                            </Border>
                        </Viewbox>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Checked">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="#FF4CD661"
                                                    Duration="0:0:0.1" />
                                        <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                                        Storyboard.TargetProperty="Margin"
                                                        To="20 1 2 1"
                                                        Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Unchecked">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="White"
                                                    Duration="0:0:0.1" />
                                        <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                                        Storyboard.TargetProperty="Margin"
                                                        To="2 1 2 1"
                                                        Duration="0:0:0.1" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

The Button works just fine and looks like expected when IsChecked is not bound to anything or to a property with an initial value of false . But as soon as the initial value is true I get an exception. The message states that the name Border can't be found in System.Windows.Controls.ControlTemplate .

I have no idea how to solve this problem and would appreciate any help.

Answer 1

I found a solution even thought I'm still not a hundred percent sure what the problem was.

I thought it may be, that the Checked event trigger gets called before the button is fully initialized. So I simply switched from EventTrigger to Trigger and now everything works fine.

This is my working style:

        <Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Viewbox>
                            <Border x:Name="Border" CornerRadius="10"
                            Background="#FFFFFFFF"
                            Width="40" Height="20"
                            BorderBrush="#FF707070"
                            BorderThickness="1">
                                <Ellipse x:Name="Ellipse" Fill="#FFFFFFFF" Stretch="Uniform"
                                 Margin="2 1 2 1"
                                 Stroke="LightGray" StrokeThickness="1"
                                 HorizontalAlignment="Stretch">
                                </Ellipse>
                            </Border>
                        </Viewbox>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ToggleButton.IsChecked" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="#FF4CD661"
                                                    Duration="0:0:0.1" />
                                            <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                                        Storyboard.TargetProperty="Margin"
                                                        To="20 1 2 1"
                                                        Duration="0:0:0.1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Border"
                                                    Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                    To="White"
                                                    Duration="0:0:0.1" />
                                            <ThicknessAnimation Storyboard.TargetName="Ellipse"
                                                        Storyboard.TargetProperty="Margin"
                                                        To="2 1 2 1"
                                                        Duration="0:0:0.1" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>