UWP Set NavigationView TogglePaneButton color

Question

As you can see from the image, the TogglePaneButton has a distinct color from the remaining.

That's because I set it manually to WhiteSmoke (actually in my pushed code it's already gray) when it is in the LeftMinimal mode in its source code of VisualState Compact.

I thought I could change it back when pane is open by modifying its visual state like this:

<VisualState x:Name="Expanded">
    <VisualState.Setters>
        <Setter Target="RootSplitView.PaneBackground" Value="{ThemeResource MainNavigationViewBackground}" />
        <Setter Target="TogglePaneButton.Background" Value="{ThemeResource MainNavigationViewBackground}" />
    </VisualState.Setters>
</VisualState>

But it is not working. How can I achieve that?

The code has exceeded 30000 characters so I can only post the link:

https://github.com/SeakyLuo/SMPlayer/blob/master/SMPlayer/Dictionaries/MainNavigationView.xaml

Answer 1

The problem here is that the VisualStates react to the different types of the pane modes, but do not react to the open/closed event.

I would recommend giving the button itself a Transparent background and just displaying a colored Border under the button and pane. When the pane will be closed and in minimal mode, the border under the button will make it look as if the button had the right background color. When the pane opens, it will be drawn above the Border , and the button will have the same background as the pane.

Answer 2

I have found a very simple solution:

Just make another TogglePaneButton and put it over the original one. Then let it work as the real one. Set its visibility to Collapsed when needed.