SplitButton bug and style enhancement

Describe the bug

SplitButton bug

The toggle button part of the SplitButton stops working if you navigate away from a page and then come back to it using the PageService navigation and the page is registered using AddSingleton.

The problem appears to be how the toggle button Click event is registered and unregistered. The toggle button Click event is registered in the OnApplyTemplate routine which is only executed the first time the page is displayed. It's unregistered in an Unloaded event which executes every time you navigate away from the page, so the second and subsequent times you navigate to the page, the Click event is no longer registered and that part of the SplitButton stops working.

Style enhancement

On the style enhancement, the current style for the SplitButton has a large area of padding around the toggle button part. Unless you click exactly on the toggle button, the primary Click event fires rather than the toggle button Click event. This is confusing as you expect the toggle button to work if you click anywhere on the right side of the split. (See screen shot below).

I've included patches in the additional context area. If you need anything else, please let me know.

Also - thank you for this library and all the work you've put into it. It looks great and the overall design makes it easy and intuitive to work with.

To Reproduce

SplitButton bug

1. Create a simple MVVM app with the NavigationView and PageService.
2. Add two pages with AddSingleton and place a SplitButton on one.
3. Run the app and navigate to the page with the SplitButton and click on the toggle button part. It will work.
4. Navigate to the second page, then back to the page with the SplitButton.
5. Click on the toggle button part. It will no longer work.

Style enhancement

1. Using the same app as above, start it again (so the toggle button will work).
2. Navigate to the page withe the SplitButton.
3. Click on the lower right part of the toggle button. The toggle button won't work until you click very close to the chevron icon.

Expected behavior

SplitButton bug

The toggle button part should always work no matter how many times you navigate away and back to the page.

Style enhancement

The toggle button Click event should fire when you click anywhere on the toggle button side of the split. It's really confusing to have the primary Click event fire unless you click exactly on the icon.

Screenshots

This is an example of the style issue. If you click anywhere outside of the red rectangle, the primary Click event fires. It's really confusing to have the primary Click even fire unless you click inside that small area. I think any user will expect the toggle button side to work if you click on any area on that side of the split.

OS version

OS Build: 22631.3880 (Windows 11 Pro 23H2)

.NET version

.NET 8

WPF-UI NuGet version

N/A - I was using libraries I compiled from the main branch.

Additional context

SplitButton.cs patch:

75,76d74
< 			self.ReleaseTemplateResources();
< 		};
78,81c76
< 		Loaded += static (sender, _) =>
< 		{
< 			var self = (SplitButton)sender;
< 			self.AttachTemplateResources();
---
>             self.ReleaseTemplateResources();
127c122,123
< 	protected virtual void AttachTemplateResources()
---
>     /// <inheritdoc />
>     public override void OnApplyTemplate()
128a125,126
>         base.OnApplyTemplate();
> 

SplitButton.xaml patch:

21c21
<     <Thickness x:Key="ButtonChevronIconPadding">11,5,11,6</Thickness>
---
>     <Thickness x:Key="ButtonChevronIconMargin">8,0,0,0</Thickness>
48d47
<                         Padding="{StaticResource ButtonChevronIconPadding}"
122a122
>                                 Padding="{TemplateBinding Padding}"

Start with SplitButton.cs, focusing on OnApplyTemplate, Loaded, Unloaded, AttachTemplateResources, and ReleaseTemplateResources, then review the related SplitButton.xaml style changes. Reproduce the PageService navigation sequence with an AddSingleton page and verify that the toggle works after returning. Done means the toggle remains functional across navigation and clicks anywhere on its side activate the toggle behavior.