ToggleSwitchButton rewrite

[Dotnetifier]

Well... most of the ToggleSwitchButton code has been rewritten. The animation of the thumb now resides in the code behind since the size of the button might change, as described in an issue (see below). The control now mimics the button of the ToggleSwitch found in the Windows Store apps, including the drag over the entire button-feature.

Fixes #1595 and #1466.

[Dotnetifier]

The 'Stop animation on interaction' is a little fix that ensures that the thumb animation is stopped when the user starts interacting with the ToggleSwitchButton.

In the old situation the animation would continue while the user was already dragging the thumb again and the thumb would make a little 'jump' when the animation completed. Now the animation stops immediately and everything is smooth.

[punker76]

@Dotnetifier first, it looks nice, second, if i double click on the thumb i get a strange behavior by moving the mouse...

[Dotnetifier]

Wow. I can seriously not believe I missed that. Fixed it now, though.

[flagbug]

Looks good, thanks @Dotnetifier!

[flagbug]

Just noticed a bit too late, that this is hardcoded to black and won't play well with the dark theme

[Dotnetifier]

@flagbug Should I commit to this branch? If so, what will happen (new PR, etc.)?

[punker76]

@Dotnetifier i saw this on output too

System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=X; DataItem=null; target element is 'TranslateTransform' (HashCode=15085859); target property is 'X' (type 'Double')

you should make a new pr for your new changes

[flagbug]

@Dotnetifier no, open a new one

On 20:35, Thu, Nov 20, 2014 Jan Karger notifications@github.com wrote:

@Dotnetifier https://github.com/Dotnetifier i saw this on output

System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=X; DataItem=null; target element is 'TranslateTransform' (HashCode=15085859); target property is 'X' (type 'Double')

you should make a new pr for your new changes

—
Reply to this email directly or view it on GitHub
#1652 (comment)
.

[InsaneSquirrel]

Hi,

I was able to successfully create a copy of the style for the previous ToggleSwitchButton and edit it to change colours etc.

When I try creating a copy of the style for the new ToggleSwitchButton and set the style of the control to point to that instead (bearing in mind this is an exact copy of the style) then the button no longer works in the running app. The mouse-over successfully changes the grey of the control to be a bit darker but there is no 'click' at all and you cannot turn the ToggleSwitch on.

<Style x:Key="ToggleSwitchButton" TargetType="{x:Type Controls:ToggleSwitchButton}">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="SwitchForeground" Value="{DynamicResource AccentColorBrush}"/>
    <Setter Property="Width" Value="70"/>
    <Setter Property="Height" Value="35"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Controls:ToggleSwitchButton}">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_BackgroundOverlay">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill)" Storyboard.TargetName="PART_ThumbIndicator">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource GrayBrush4}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_BackgroundOverlay">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0.2"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PART_BackgroundOverlay">
                                        <DiscreteDoubleKeyFrame KeyTime="0" Value="0.4"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="PART_SwitchTrack" Margin="5">
                        <Border BorderBrush="{DynamicResource GrayBrush4}" BorderThickness="2">
                            <Grid ClipToBounds="True" Margin="2">
                                <Rectangle Fill="{Binding SwitchForeground, RelativeSource={RelativeSource TemplatedParent}}"/>
                                <Rectangle Fill="{DynamicResource GrayBrush4}" RenderTransformOrigin="0.5,0.5">
                                    <Rectangle.RenderTransform>
                                        <TranslateTransform/>
                                    </Rectangle.RenderTransform>
                                </Rectangle>
                                <Rectangle x:Name="PART_BackgroundOverlay" Fill="{DynamicResource WhiteBrush}" Opacity="0"/>
                            </Grid>
                        </Border>
                        <Rectangle x:Name="PART_ThumbIndicator" Fill="{DynamicResource BlackBrush}" HorizontalAlignment="Left" Width="13">
                            <Rectangle.RenderTransform>
                                <TranslateTransform/>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                    <Thumb x:Name="PART_DraggingThumb">
                        <Thumb.Template>
                            <ControlTemplate>
                                <Rectangle Fill="Transparent"/>
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

[Dotnetifier]

@InsaneSquirrel What release of MahApps.Metro are you using? This style could never apply to any older version of the ToggleSwitchButton, because redundant elements have been removed and other elements have been renamed.

I was able to confirm your issue while using an older build of MahApps.Metro. Then I referenced to an assembly built a few minutes from the source code, which gave me the correct behavior.

As you can see, I modified the style so that the thumb is red. Everything here is working now. You might want to use the 'old' style for your ToggleSwitchButton, until a new version is released.

[InsaneSquirrel]

@Dotnetifier Thanks for the fast response. I am using the 1.0.0.0 build.

I updated MahApps to the latest NuGet package and then added a

<Controls:ToggleSwitchButton/> 

to a user control I have built. I then right-clicked the control and chose 'Edit Template' > 'Edit a Copy' and added the copied style to my Resource Dictionary (this is the code supplied above).

<Controls:ToggleSwitchButton Style="{DynamicResource MyToggleSwitchButton}"/>

As soon as I do this and then run the application (without making any changes to the style) the ToggleSwitchButton doesn't function as mentioned. Control displays and the grey changes on mouse-over but no click or drag functions. As soon as I edit the XAML and remove the style the control functions again as normal.

Thanks

[InsaneSquirrel]

@Dotnetifier I have just built a blank new WPF application with MahApps to test and the same issue is occurring with the control on the MainWindow.xaml.

I then updated MahApps to 1.0.1-ALPHA001 Prerelease and the same issue is still apparent.

Added a 'Checked' handler to the control to test

private void ToggleSwitchButton_Checked(object sender, RoutedEventArgs e)
    {
        MessageBox.Show("Testing");
    }

If you click the control the message never gets fired so it looks like an issue with the control actually trying to enter a checked state.

[Dotnetifier]

The changes I made have not yet appeared in any stable release of MahApps.Metro, so this new style does not apply for v1.0.0.0. If you want to write a custom style, you need to modify the one from the package before this commit and create a new style after updating MA.M, or you will have to use an unstable release or a build directly from the source code for now.

[flagbug]

@Dotnetifier

The changes I made have not yet appeared in any stable release of MahApps.Metro, so this new style does not apply for v1.0.0.0.

They are in 1.0.0

[Dotnetifier]

Oops, my bad. Didn't know v1.0.0 is stable now. I'll look into this when I get home, maybe a few hours or so.

[punker76]

@Dotnetifier @InsaneSquirrel

so, first there is a difference between

ToggleSwitch

and ToggleSwitchButton

second, you are right if a create a custom style, there is no more click action.
the right-clicked the control and chose 'Edit Template' > 'Edit a Copy' creates not the same style that MahApps has.

the PART_BackgroundTranslate and PART_ThumbTranslate is missing

thus, it is an issue of Blend...

[InsaneSquirrel]

@Dotnetifier Ahhh, so it's ripping out a much-needed part of the template which is where the issue is.

Thanks for looking into this, I will try and re-embed the missing parts of the template to see if this resolves the issue.

Thanks again.

[InsaneSquirrel]

@Dotnetifier Works a treat after adding the following back in

<Rectangle.RenderTransform>
        <TranslateTransform x:Name="PART_BackgroundTranslate"/>
</Rectangle.RenderTransform>

<Rectangle.RenderTransform>
        <TranslateTransform x:Name="PART_ThumbTranslate"/>
</Rectangle.RenderTransform>

Once again thanks for pointing that out. Hate when bugs get in the way of simple things : )

[punker76]

@InsaneSquirrel @Dotnetifier No problem, I like to help. :-D

[InsaneSquirrel]

@punker76 Apologies, didn't notice the change of name on that update. I would like to express my thanks to you : )

[Dotnetifier]

@punker76 @InsaneSquirrel Yes, thanks! I probably would have been debugging this thing for an hour only to find out that name does not get copied...