Feature Request: Split the Media session Flyouts and volume flyouts as it was pre 0.5

[Samuel12321]

I have talked with @ShankarBUS about this, but thought i would create a proper request for it.

• Aligns more with windows 10X and feels more modern in my opinion

[ShankarBUS]

I will find the possibilities for this.

I will try to include this together with v0.8

[ShankarBUS]

Ok guys choose either.

Option A: Space between media controls and volume controls ✔. No Shadows✖.

Option B: Shadow ✔. Spacing ✖.

👍 for Option A. 👎 for Option B

[Samuel12321]

The other option is could this be a user setting?

[lucasskluser]

I think the gap is more concise with win 10 UI

[Poopooracoocoo]

@lucasskluser the problem with referencing the current SMTC is that it's from the Windows 8 or Metro era.

[Samuel12321]

Windows 10X

[Samuel12321]

Tentatively added this to 0.8.3

[Samuel12321]

@ShankarBUS just noticed you removed this from 0.8.5, did you have another release in mind?

[ShankarBUS]

@Samuel12321,

Yup! Will do later in a future release.

We need a UI\UX designer's guidance first. I keep messing things up. We need to plan properly and then do the UI.

[Samuel12321]

@GSonofNun @jayasio,@WinstonSepruko Any ideas on this one.

[sepruko]

The three of us could probably figure something out together, I'd really like to be able to implement the fluent UI icons too, giving two style choices to the end user. Would they like to go with Segoe Assets or the new FluentUI icons? I know the new icons aren't readily and easily available for development and come in different sizes, the only official source I've seen was for building mobile apps. I do hope they become an option in the near future as I personally prefer them. Segoe will be number one priority.

[Samuel12321]

we tried the new fluent icons a while back, unfortunately the looked awful

[sepruko]

we tried the new fluent icons a while back, unfortunately the looked awful

Every possibility the current design didn't mix well with them, and as I said Segoe takes priority.

[GSonofNun]

@GSonofNun @jayasio,@WinstonSepruko Any ideas on this one.

I guess, what are you looking for exactly? Do you want someone to make some UI mockups? Someone to actually implement what was designed? Both? Other?

[Samuel12321]

both, probably. As you can see above we do have an example ui from an older release. Advice on whether this is better in terms on UI styling would be good

[GSonofNun]

I do personally like the idea of it being split. Going off the example above, I'd want maybe a little larger of a gap than what was there before. Something around what the Windows 10X screenshot has.

[jayasio]

I do personally like the idea of it being split. Going off the example above, I'd want maybe a little larger of a gap than what was there before. Something around what the Windows 10X screenshot has.

I agree. Keeping the media controls away as a separate card keeps the volume slider consistent with the brightness slider. The media controls are 'adding' to the slider only when some media is active; the volume slider is permanent. Visually it is easier to comprehend.

[ShankarBUS]

The drop Shadow is the only problematic thing.

If the controls are hosted in a single shadow chrome, there's no overcast of shadows. This is why I had to merge them.

But if the slider and media controls are hosted on different shadow chromes (which is a requirement inorder to split them), the media controls would cast shadow on the slider. Which is unwanted and unappealingly for the users.

So we have to remove the shadow completely which will result in yet another inconsistency with the Windows 10X shell.

[prakharb5]

Umm, I think we can try ditching the Win10X design language, eh?

I mean, save the code of present situation somewhere.

If did not look good, we can revert back, no?

I don't know if it would be a practical idea, but hey, why not try it?

[zeealeid]

I like how it is right now but I'm in favour of splitting the card into two as it provides distinction between elements like the volume slider and the media controls.

[ShankarBUS]

@zeealeid,

Cool!

So do you want the shadows to be there too?

If we are to remove the shadows, the process of splitting the controls will be relatively easy.

What do you say?

[GSonofNun]

If the controls are hosted in a single shadow chrome, there's no overcast of shadows. This is why I had to merge them.

But if the slider and media controls are hosted on different shadow chromes (which is a requirement inorder to split them), the media controls would cast shadow on the slider. Which is unwanted and unappealingly for the users.

Is this a problem with the shadow chrome control? Or could it be a Z-order problem with the layout of the XAML?

[ShankarBUS]

It's a problem with both the shadow chrome control and the z-order.

[GSonofNun]

To save me a little time while I look at the code, is this a WPF application hosting UWP controls with XAML Islands?

[ShankarBUS]

No, this is a pure WPF application using ModernWpf as the UI library.

[GSonofNun]

Gotcha.

[GSonofNun]

I made a quick test WPF app using ModernWpfUI for the shadow, and it doesn't seem to be impossible to make the shadows work properly.

If I get the Z-order wrong though, the shadows can overlap improperly.

In case you aren't aware, (I don't know you or your XAML skill/knowledge levels very well), when multiple objects are defined at the same indentation level, the second object has a higher Z-order. Which is why the case in the second images doesn't work. The second 'ThemeShadowChrome' is defined after the first one, so it will render over the top of the first one.

[ShankarBUS]

@GSonofNun,

Hmmmmm, that worked! But not in every case.

With v0.9 we are planning to add the ability to auto place the flyout, change the expand direction and the stacking of controls (media controls above volume controls and vice versa).

In that case we would need to change the z-order of whatever control in bottom to be the highest. Could this be done by using the Panel.ZOrder attached property?

The shadow chrome from ModernWpf is designed to be directed downwards so we didn't experience any overcast issues. But if the shadow was uniform, we could do nothing.

So anyways, it works! I was lazy and didn't have time to experiment with it.

Thank you so much @GSonofNun!

I would try to do this ASAP.

[GSonofNun]

The Panel.ZOrder property only works when the controls are parented in a Canvas control. The downside to using a Canvas is you have to be more specific about size and location of child elements.

I see you are using a CrossFadeContentControl to host FlyoutHelper.PrimaryContent and another to host FlyoutHelper.SecondaryContent. We can probably play around with this pattern to allow re-arranging content.

[ShankarBUS]

I heard from someone that Panel.ZIndex works even for Grid. Ref: https://blog.mzikmund.com/2020/12/control-rendering-order-in-uwp-grid-using-canvas-zindex/

I'm planning to use a DockPanel instead of the StackPanel (this way we could swap the controls up and down easily).

[GSonofNun]

I heard from someone that Panel.ZIndex works even for Grid. Ref: https://blog.mzikmund.com/2020/12/control-rendering-

So it does. I stand corrected. 🙂

[ShankarBUS]

@GSonofNun,

So mate, I remember you wanted to make a global media control app.

I have abstracted the code here https://github.com/ModernFlyouts-Community/ModernFlyouts/tree/main/ModernFlyouts.Core/Media/Control

You could use this as the base for your app. I also added some converters and stuff but I know you know how to them work.

This is the only thing I could do in return of your help.

[ShankarBUS]

You all happy now? Any corrections or suggestions?

[prakharb5]

Awesome!!!

[Samuel12321]

Great

[GSonofNun]

I like it.

[zeealeid]

Hot