How can I make a TitleBar like Groove Music? It has an auto back button with the app name. Additionally, it's NavigationViewPane is extended to the TitleBar.
So I first added:
Windows.ApplicationModel.Core.CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
and then make the back button of NavigationView visible. However, there is a known issue with that. Basically, part of that back button is covered by something which makes it only clickable somewhere. Although a solution is provided here, it doesn't seem to have a good compatibility with the AppViewBackButton (for example I only want the AppViewBackButton to be blue) and I couldn't make it work.
Then I tried using SystemNavigationManager.GetForCurrentView().AppViewBackButton but that button doesn't seem to be same as the Groove Music, because that one aligns well with the buttons in the NavigationView. I could redesign the NavigationViewStyle to make them fit but that requires a lot of work (how do I get the size of AppBackButton or how to customize it?). And the OpenPane of the NavigationView has a shadow but I didn't find it in the original style.
Is there a better way to do it?
UWP Groove Music Title Bar
UWP Groove Music app's back button contains two types, one is NavigateView's BackButton, other is AppViewBackButton.
for example I only want the AppViewBackButton to be blue
You could check the back button of Now Playing page, it is AppViewBackButtonthat the background color follow the system setting. You could custom it by switching other color in the Windows colors setting.
Update
The problem is the button is click able control, if you call SetTitleBar method set the button as title bar, the button will disable.
Please add the following
CoreApplication.GetCurrentView().TitleBar.ExtendViewIntoTitleBar = true;
And remove Window.Current.SetTitleBar(EmptyTitleBar); in NowPlayingFullPage method.
Just turn my comment under NicoZhu's post into an answer.
To create a title bar like Groove music, you need to customize it. And modify your code based on the code here at the bottom.
Additionally, if you need to switch pages, you would better add this to the Page_Loaded event of pages that you will be switching so that your title bars are draggable:
Window.Current.SetTitleBar(AppTitleBar);
Related
I'm working on a UWP app and I'm having some trouble with the visual states of some UI controls, specifically with buttons and toggle buttons.
Basically, I'd like the borders that become visible when you press the TAB key (to navigate using the keyboard) to have the same ZIndex of the rest of the control, ie. if part of the control is covered, they should be covered too in the same way. But, it looks like these borders are always displayed on top of the UI, no matter what. Here's a screen:
You can see the border going over the rest of the UI, while the rest of that toggle button is correctly covered. The same happens for buttons as well (not only toggle buttons), see here:
I've looked at the template for these controls, but I couldn't find anything related to these specific borders, nor to anything like an explicit Canvas.ZIndex setting or something like that.
I guess this behavior is on purpose, but is there a way to change this and make those borders behave like the rest of the UI?
Thanks!
EDIT: here you can see how a reveal highlight effect is correctly covered by the shadow and the other UI elements on the right, but the TAB border ignores that and is displayed on top of them.
I have noticed similar behavior was previously present in the Start menu as well (although it wasn't with focus border, but with the reveal effect clearly "continuing" into the cut-off portion of the button.
One workaround that comes to mind is to observe the state of the SplitView and when it is closed to actually change the width of the buttons (for example via a StateTrigger). This way the button's area will no longer be "hidden" and the focus border will work properly, as the buttons will end where they should.
I am trying to create a button with two images on it. One at left side and one at right side and text in center. After searching I got a button with image only so I wanted to know if it is posible to create a button as I described above in xamarin?
I am trying to create button like this and also I want to change arrow image on the button click to up arrow and down arrow. Is it posible in xamarin to create button like this or should I think about another option any idea?
You can't directly do this with the Button from Xamarin Forms as it doesn't support images yet.
From your requirement what you can do is create a horizontal stacklayout and add the images and a label to it. Also set a background color so that it would look like a button.
To make it work like a button, add a Gesture recognizer to the stack layout and add the tap gesture.
You can handle the event for tapping or bind it via command if you are using MVVM.
as you can see in the picture, Windows 10 mobile is using lots of These bars at the bottom. It has Icons (in the picture: "Mailbox", the "Plus" sign etc.) in it and over it are a few Options ("Einstellungen" etc.)which appear when you click the three points.
But how Looks the General form of them in C#?
I went through the whole Internet but I still can´t find out how you create These bars.
You are looking for a CommandBar class, which is placed in a Page.BottomAppBar, especially check its properties like PrimaryCommands and SecondaryCommands.
You should use a special AppBarButton s inside a CommandBar, whuch are classic Buttons but with a special rendering, to create it you just set the Icon and Label.
Check the guidelines for command bars.
I'm having tons of issues trying to integrate Microsoft's WebView in my WinRT application and one of them is the following. I want to display the WebView and its content (which comes from a local offline server but that works like a charm) and I don't want the user to be able to click around ; basically completely disable user input on this WebView.
There is no IsEnabled property on this control so I tried:
Catching the many Pressed-like events and setting the Handled property of the event object to false in each one of the handlers
Catching the GotFocus event of the WebView to set the focus on another control immediately
Putting the WebView in a ContentControl, then set the IsEnabled property of the ContentControl to false
Obviously, none of these workarounds did work so I'm facing a brickwall here. Maybe some of you can help find a solution?
More details if that can help: the web page that is loaded contains an HTML5 canvas where the user can draw things (like in Microsoft Paint). There are also links (ahref). I dont want the user to be able to draw on this canvas, and I don't want them to be able to click on these links as well!
Thanks
Hi you can use a if the content is not animated then you can use a Rectangle instead of the WebView and in the rectangle you use a WebViewBrush, this actually take the webview and render it's content as an image on the rectangle. since it is an image no interaction is available on the rectangle, but if you have animation then you will lose them.
Generally this trick is used to show content onto the webview.
I would like the same tool tip message (the one entered in the "ToolTip on myControlId" field) to be displayed when the mouse is hovered over an area which contains multiple controls. I tried putting the controls inside a Panel and GroupBox, but it only works when the mouse is in the "white space" area of the Panel/GroupBox, and, of course, does not work when the mouse is on a control within the Panel/GroupBox.
I'm from the web dev world so I'm open to suggestions for a new approach if I'm going about this the wrong way.
In standart windows developmern (WindowsForms) tootltip or tooltip control is associated to a single control. But you can use ToolTip control (see example how: ToolTip: Windows Forms .NET) and assign to all controls that recieve mouseover event.
If you're in WPF, the story becomes easier as you have message routing so usually it's enought to have subscription in one place.
Hope this helps.