Windows Phone 8.1 Light theme page with black background - xaml

On WP (Windows Runtime App in my case), if we set the app to be running on Light theme, while the transition is performed, we can still see a black background.
Is there any way to avoid that?
For example, in the animation below, you can see that the page animates but before it ends there is a black background still. I'd like to set that to white somehow, but I am not sure how...
(Image from http://jamescroft.co.uk/blog/windows-phone/utilizing-page-transition-animations-in-windows-phone-8-1-apps/#comment-907).

After thinking a little bit on what item could be parent of Page, I turned my attention towards Frame.
This could be solved by setting the BackgroundColor property of the Frame, when it is created, in the OnLaunchedmethod (App.xaml.cs):
protected override async void OnLaunched(LaunchActivatedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page
rootFrame = new Frame
{
CacheSize = 1,
Background = new SolidColorBrush(Colors.White)
};
if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
// TODO: Load state from previously suspended application
}
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
... //rest of OnLaunched method
}
Also you have to make sure to set the background of the Frame as well in the OnActivated method, since this will be launched in some cases where e.g. other apps launch URI to your app or Cortana launches the app, etc.

Related

NavigationLink button focusable override issue

I face an issue which stucks for days. I am createing a tvos application which reqiures a custome navigationlink(button), when I move the focus to the navigation item, it should scale a little bit, and also I need to change the parent's view backgound. It is pretty simple, but it seems that the focusabe override the my custome button Style. The test shows that the background image was changed but without any scale effect when the navigationbutton get focused. Any suggestion?
NavigationLink(destination: Text("myview"))
{Text("Test")
}
.buttonStyle(myButtonStyle())
.Focusable(true){(focus) in
//the code to change the background image
//myButtonStyle definition
struct MyButtonStyle: ButtonStyle {
func makeBody(configuration: Configuration) -> some View {
return AppButton(configuration: configuration)
}
}
struct AppButton: View {
#Environment(\.isFocused) var focused: Bool
let configuration: ButtonStyle.Configuration
var body: some View {
configuration.label
.scaleEffect(focused ? 1.1 : 1.0)
.focusable(true)
}
}
The line to change the background image is always called when the item get focused as my expected, but the scale effect is gone. If I remove the following line of codes, the scale effect is back:
// .Focusable(true){(focus) in
//the code to change the background image
// }
It looks like that this line of code override my custome style of navigation button, any ideas? Appreciate any help!
Ah, finally I found the tricky, though there is very little document about this. When Focusable was introduced, it should not be in your code to change focus engine, which will cause the navigationlink tap message uncaptured, then your navigationlink for another view will not work.
Use .onChange() function to deal with any focus change event, not use Focusable.

Pulling MasterPage from right side in Xamarin Forms

I'd like to ask whether or not it is possible to make master page to appear from right side (opposite of it's default behaviour) in xamarin.forms (and preferably with XAML) and if it's possible,would you show me how?
By default it is not possible.
You can try Right Master Detail Page
public RightSideMasterPage ()
{
InitializeComponent ();
// You must set IsFullScreen in this case,
// otherwise you need to set HeightRequest,
// just like the QuickInnerMenu sample
this.IsFullScreen = true;
// You must set WidthRequest in this case
this.WidthRequest = 250;
this.MenuOrientations = MenuOrientation.RightToLeft;
// You must set BackgroundColor,
// and you cannot put another layout with background color cover the whole View
// otherwise, it cannot be dragged on Android
this.BackgroundColor = Color.White;
// This is shadow view color, you can set a transparent color
this.BackgroundViewColor = Color.FromHex ("#CE766C");
}

UWP Light dismiss ContentDialog

Is there a way to make the ContentDialog light dismiss?, so when the user clicks on any thing outside the ContentDialog it should be closed.
Thanks.
By default, ContentDialog is placed in PopupRoot. Behind it, there is a Rectangle which dim and prevent interaction with other elements in the app. You can find it with help of VisualTreeHelper and register a Tapped event to it, so when it's tapped you can hide ContentDialog.
You can do this after calling ShowAsync outside ContentDialog code or you can do it inside ContentDialog code. Personally, I implement a class which derives from ContentElement and I override OnApplyTemplate like this:
protected override void OnApplyTemplate()
{
// this is here by default
base.OnApplyTemplate();
// get all open popups
// normally there are 2 popups, one for your ContentDialog and one for Rectangle
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
foreach (var popup in popups)
{
if (popup.Child is Rectangle)
{
// I store a refrence to Rectangle to be able to unregester event handler later
_lockRectangle = popup.Child as Rectangle;
_lockRectangle.Tapped += OnLockRectangleTapped;
}
}
}
and in OnLockRectangleTapped:
private void OnLockRectangleTapped(object sender, TappedRoutedEventArgs e)
{
this.Hide();
_lockRectangle.Tapped -= OnLockRectangleTapped;
}
Unfortunately ContentDialog does not offer such behavior.
There are two alternatives you can consider:
Popup - a special control built for this purpose, which displays dialog-like UI on top of the app content. This control actually offers a IsLightDismissEnabled for the behavior you need. Since the Anniversary Update (SDK version 1607) also has a LightDismissOverlayMode, which can be set to "On" to automatically darken the UI around the Popup when displayed. More details are on MSDN.
Custom UI - you can create a new layer on top of your existing UI in XAML, have this layer cover the entire screen and watch for the Tapped event to dismiss it when displayed. This is more cumbersome, but you have a little more control over how it is displayed

Create Backgroundthread Monogame

I made a game for Windows 8 in monogame but running into a problem. We finally got our hands on a Surface RT but we noticed that the loading times are really long on this device. We looked at several other games and noticed that this wasn't an uncommon issue. To fight the boredom of the user during the loading of the resources I want to draw a loading bar and some random facts onto the screen. The problem is that loading the resources blocks the rest of the game and doesn't allow me to draw anything because it stays stuck at the initializing part.
I searched for creating a lose Thread but found that Windows Store didn't support that so now my question to you how can I load my resources in the background or another way to not block the complete game and be able to call handle my Draw() function to draw a loading bar onto my screen.
I did something like this:
protected volatile bool ContentLoaded = false;
protected async override void LoadContent()
{
base.LoadContent();
Enabled = false;
await ThreadPool.RunAsync(new WorkItemHandler(LoadAllContent));
}
protected void LoadAllContent(Windows.Foundation.IAsyncAction action)
{
if (action.Status == Windows.Foundation.AsyncStatus.Error)
System.Diagnostics.Debug.WriteLine(action.ErrorCode);
// load your contents
ContentLoaded = true;
Enable = true;
}
And at the beginning of your Draw method:
if (!ContentLoaded)
{
// draw your loading screen
return;
}
If you want a progress bar you need a counter to increase every resource you've loaded, then in your Draw your bar has to relate to that counter.

WinJS AppBar button flash on Hide

My application has a WinJS AppBar control at the bottom of the screen. I use .showOnlyCommands(buttonsToShowArray) to show and hide buttons on ListView itemSelectionChanged event.
The problem I have right now is that when every I call .showOnlyCommands, the buttons to be hidden (or you may say "replaced") are going to flash on the top of the screen.
I tried to use the Microsoft sample app, this doesn't happen. I tried to use .showCommands + .hideCommands method, it is the same behavior. Note that this didn't happen before the Release Preview version of Win8.
I have no idea what is going on. Any idea?
EDIT:
I did further investigation, the problem happens on hideCommands. Say I have 3 buttons displayed on the appbar. I call hideCommands to hide all 3 buttons. The icon of the 3 buttons would disappear on the appbar, then pile up at the top-left corner of the screen and then disappear. (i.e. there would be a flash of 3 piled up buttons at the corner of the screen).
You may be invoking showOnlyCommands when the AppBar is in the process of 'showing'. I've found that when calling these methods in the beforeshow or aftershow handler that this happens. This quote from Animating your UI sheds light on why:
Use fade in and fade out animations to show or hide transient UI or controls. One example is in an app bar in which new controls can appear due to user interaction.
The sample app shows/hides the buttons before the appbar is shown. You may be calling show on the app bar before calling showOnlyCommands.
A temporary hack for this problem is:
Set the button be invisible before calling showOnlyCommands or HideCommands.
Here is the code that I use for now:
/*
* #param {WinJS.UI.AppBar} appbar winControl
* #param {Array} array of appbar buttons to be shown
*/
function showOnlyCommands(appbarControl, buttonsToShow) {
var toShow = {};
for (var i = 0; i < buttonsToShow.length; i++) {
toShow[buttonsToShow[i].id] = true;
}
for (var i = 0; i < visibleButtonsList.length; i++) {
var id = visibleButtonsList[i].id;
if (!toShow[id]) {
// set the display property of the buttons to be hidden to "none"
var button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
}
// update the visible buttons list
visibleButtonsList = buttonsToShow;
// Note that we don't need to set the "display" property back for the buttons,
// because WinJS.UI.AppBar.showOnlyCommands would set it back internally
appbarControl.showOnlyCommands(buttonsToShow);
}