Help requested with creating three-frame animated start button

[Caracarn]

It's not an animated image, it's three images glued together. The styler mod doesn't support this format, but what might work is splitting it into three images, and setting the right image for each state. The different visual states of the Taskbar.TaskListButtonPanel element should help.

If you'd like to pursue this and need help, create an issue here.

@m417z

I would definitely like to give this a try, but sadly I have absolutely zero experience when it comes to working with XAML.
So I will have to rely on the help of experienced people, like yourself, to make this happen.

What I have done already is splitting the png into three images: normal, hover and pressed.

Normal:

Hover:

Pressed:

With the right Target and Styles instructions for each of these states, it might be possible to achieve the desired result.
(Windows should allow for it, considering that Start11 supports three-frame animation for the start button.)

If succesful, this is what it should look like -

3framestart.mp4

But before pursuing this, I would value your expert opinion on how this will potentially work out.
Would it result in three different states with no transition effect? If that's going to be the case, it might not be worth the effort.

I guess I should be looking for instructions aimed at things like -

InactiveNormal
InactivePointerOver
InactivePressed
ActiveNormal
ActivePointerOver
ActivePressed

Problem is, I have no idea exactly what to look for. Let alone how to properly address it through Target and Styles.
So I'm hoping you (or others) are willing to help me out by providing the necessary instructions (Target and Styles) that I'll need for this to work.

[m417z]

Would it result in three different states with no transition effect?

Yes, at least with the solution I had in mind. I'm pretty sure it's possible to add fade animation, but I haven't done something like that in the past, and I'm also not familiar enough with XAML/UWP to assess how difficult would it be to to add such an animation.

[bbmaster123]

instructions here
it goes over finding targets using UWPspy, how to get their exact name to put in the target box, and also covers visual states, and if there's something not covered or if you have any questions you can always reach out again :)

Would it result in three different states with no transition effect?

Correct, it would just snap to the next state with no animation. The best I understand it, animations are defined in XAML through something they call a storyboard, which itself defines keyframes for an animation, along with instructions for how to animate the frames between keyframes. Here's an bit of the xaml code for the animation when unpausing a task like copying files for example:

 <VisualTransition From="IndeterminatePaused" To="Indeterminate">
                                            <VisualTransition.Storyboard>
                                                <Storyboard>
                                                    <Storyboard.Children>
                                                        <DoubleAnimationUsingKeyFrames TargetProperty="Opacity" TargetName="IndeterminateProgressBarIndicator">
                                                            <DoubleAnimationUsingKeyFrames.KeyFrames>
                                                                <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                                            </DoubleAnimationUsingKeyFrames.KeyFrames>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <DoubleAnimationUsingKeyFrames TargetName="IndeterminateProgressBarIndicator2" TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                                            <DoubleAnimationUsingKeyFrames.KeyFrames>
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00.3330000" KeySpline="1.0, 0.0, 1.0, 1.0">
                                                                    <SplineDoubleKeyFrame.Value>
                                                                        <Binding Path="TemplateSettings.ContainerAnimationEndPosition">
                                                                            <Binding.RelativeSource>
                                                                                <RelativeSource Mode="TemplatedParent" />
                                                                            </Binding.RelativeSource>
                                                                        </Binding>
                                                                    </SplineDoubleKeyFrame.Value>
                                                                </SplineDoubleKeyFrame>
                                                            </DoubleAnimationUsingKeyFrames.KeyFrames>
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <DoubleAnimationUsingKeyFrames TargetName="ProgressBarTrack" TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)">
                                                            <DoubleAnimationUsingKeyFrames.KeyFrames>
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" KeySpline="1.0, 0.0, 1.0, 1.0" />
                                                                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" KeySpline="1.0, 0.0, 1.0, 1.0">
                                                                    <SplineDoubleKeyFrame.Value>
                                                                        <Binding Path="TemplateSettings.ContainerAnimationEndPosition">
                                                                            <Binding.RelativeSource>
                                                                                <RelativeSource Mode="TemplatedParent" />
                                                                            </Binding.RelativeSource>
                                                                        </Binding>
                                                                    </SplineDoubleKeyFrame.Value>
                                                                </SplineDoubleKeyFrame>
                                                            </DoubleAnimationUsingKeyFrames.KeyFrames>
                                                        </DoubleAnimationUsingKeyFrames>
                                                    </Storyboard.Children>
                                                </Storyboard>
                                            </VisualTransition.Storyboard>
                                        </VisualTransition>

There are properties that might be able to help somewhat (transition, transformationmatrix). If you happen to discover anything about animations on your own, please do share with us!

cheers

[SandTechStuff]

Here's a quick mock-up I put together. No animations or anything, but it shows what a simple implementation would look like. I uploaded the images to my repository, so they should work with the styler as long as you have an internet connection.

{
	"controlStyles[0].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel@CommonStates > Border#BackgroundElement",
	"controlStyles[0].styles[0]": "Background@InactiveNormal:=<ImageBrush Stretch=\"None\" ImageSource=\"https://raw.githubusercontent.com/SandTechStuff/Stuff/refs/heads/main/StartButtons/Normal.png\" />",
	"controlStyles[1].target": "Taskbar.ExperienceToggleButton#LaunchListButton[AutomationProperties.AutomationId=StartButton] > Taskbar.TaskListButtonPanel > Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer#Icon",
	"controlStyles[1].styles[0]": "Visibility=Collapsed",
	"controlStyles[0].styles[1]": "Background@InactivePointerOver:=<ImageBrush Stretch=\"None\" ImageSource=\"https://raw.githubusercontent.com/SandTechStuff/Stuff/refs/heads/main/StartButtons/Hover.png\" />",
	"controlStyles[0].styles[2]": "Background@InactivePressed:=<ImageBrush Stretch=\"None\" ImageSource=\"https://raw.githubusercontent.com/SandTechStuff/Stuff/refs/heads/main/StartButtons/Pressed.png\" />",
	"controlStyles[2].target": "Taskbar.TaskListButtonPanel#ExperienceToggleButtonRootPanel",
	"controlStyles[2].styles[0]": "Padding=0,0,0,0",
	"controlStyles[0].styles[3]": "BorderThickness=0",
	"controlStyles[0].styles[4]": "Background@ActiveNormal:=<ImageBrush Stretch=\"None\" ImageSource=\"https://raw.githubusercontent.com/SandTechStuff/Stuff/refs/heads/main/StartButtons/Pressed.png\" />",
	"controlStyles[0].styles[5]": "Background@ActivePointerOver:=<ImageBrush Stretch=\"None\" ImageSource=\"https://raw.githubusercontent.com/SandTechStuff/Stuff/refs/heads/main/StartButtons/Hover.png\" />",
	"controlStyles[0].styles[6]": "Background@ActivePressed:=<ImageBrush Stretch=\"None\" ImageSource=\"https://raw.githubusercontent.com/SandTechStuff/Stuff/refs/heads/main/StartButtons/Pressed.png\" />"
}

StartButton.mp4

[phenix60]

@SandTechStuff I just post to say a big Thx you for this..., i was trying to to this...,and with zero knowledge i couldn't find a way to do it, so thanks you. You should definitely have more visibility for this i don't think i'm the only one with the author of this post to want to have this change, maybe if @m417z want to put it on the "details" tab of the Windows 11 Taskbar Styler mod crediting you, that would be great of him, anyways thx you

[Caracarn]

@SandTechStuff

Thanks for helping out with this. Finding the right targets myself felt like an insurmountable task, so I had already resigned to living with the issue that led to this topic.

ramensoftware/windhawk-mods#1342 (comment)

Your implementation gave me something to experiment with, though sadly round 1 seems to be a fail. For me at least.
It might work (haven't tested this) when people only use the Win11 start menu, but for me this has to work in combination with Open Shell start menu. (Obviously with 'replace start button' unchecked.)

So I have to ask: did your test involve Open Shell start menu or did you use only the Win11 start menu?

In case it's the first, it's not working on this end. See the video below. No transition of any kind when the start menu is closed.
When I open the start menu, moving from the menu to the button, I see the desired effect. Try this from any other direction or with the menu closed and nothing happens.

test1.mp4

Also, using middle click to bring up the Win11 start menu results in an accurate pressed state.
Using left click to bring up the Open Shell start menu results in nothing. No change.

So I'm missing something, doing something wrong, or -most likely- Open Shell still affects the button region, despite not replacing the start button.

test2.mp4

Close, but not there yet.

Side note: In your implementation (styles 0-5) you refer to PointerOver.png, which gives a 404.
In my testing I assumed PointerOver equals Hover and I used that image.

[m417z]

@phenix60 I linked to the comment in the relevant section of the guide.

[SandTechStuff]

@Caracarn

did your test involve Open Shell start menu or did you use only the Win11 start menu?

No, I do not have OpenShell installed and only tested with the base Windows 11 start menu.

So I'm missing something, doing something wrong, or -most likely- Open Shell still affects the button region, despite not replacing the start button.

Yeah, it seems OpenShell is still having an effect. It works perfectly fine without it.

Maybe OpenShell still puts its own modified start button on the taskbar, but makes it invisible when Replace Start Button is unchecked. This would cause the visual states of the actual start button to not update, because your mouse is still technically hovering over the OpenShell start button and not the actual start button. This is only a theory though, as I've never used OpenShell.

In your implementation (styles 0-5) you refer to PointerOver.png, which gives a 404.

My mistake, I guess I read the visual state ActivePointerOver and thought I named the file PointerOver.png. I updated my comment to properly use Hover.png

[Caracarn]

Yeah, it seems OpenShell is still having an effect. It works perfectly fine without it.

Maybe OpenShell still puts its own modified start button on the taskbar, but makes it invisible when Replace Start Button is unchecked. This would cause the visual states of the actual start button to not update, because your mouse is still technically hovering over the OpenShell start button and not the actual start button. This is only a theory though, as I've never used OpenShell.

This is probably it. When Replace Start Button is unchecked, there's an empty space, but Open Shell start menu works regardless.

So I guess this is a dead end for me, since this is not a high priority for the Open Shell devs. They've known about taskbar customizations (including start button) not working properly since Win11 22H2.

replace.start.button.unchecked.mp4