Implementing color themes for my app - windows-phone-8

I'm developing a WP8 app, and I'm wondering what's the correct way to implement color themes for my app.
Currently, I'm changing the phone's theme resources described here, however I'm wondering, whether that has any side-effects I should know of?
For instance: if I change the color of PhoneBackgroundBrush, will that mean that I'll change the bg color of every app and the phone itself? Or, will the change be only current-app-wide?
I change theme resources like so:
(App.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush).Color = Colors.White;

Imagine the consequences if a single instance of these were shared across applications, you could do some real damage with something like that...
You're only changing the resource for the current app. You're sandboxed and safe

The Code that you used
(App.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush).Color = Colors.White;
Will change the default color of the pages and controls of your app. Not any other app .
These settings get applied to the Application when it is activated. So every app by default has a PhoneBackgroundBrush which is the default theme for the Phone.
But if your app contains Multiple pages with different color then it is always favorable to go by individual Grid
<Grid x:Name="LayoutRoot" Background="Red"></Grid>
Along with providing
App.Current.Resources["PhoneBackgroundBrush"] as SolidColorBrush).Color = Colors.White
For a common application background color :)
All the Properties mentioned in Themes for windows phone
are meant for a particular application. And you can select any of the following for a global application background color/theme from them.

Related

Coded UI - Unable to identify a html controls on a Wpfbrowser

I am new to CodedUI & C#.
I am trying to automate a wpf application which has a WPF Browser.
So basically, It's WPF container with html content inside. I have created a similar sample small application and shared it here. This application opens the amazon.in website within wpfwindow.
WPF Browser application
My problem is Coded UI is not able to identify the Html-Controls/elements like 'Buttons', 'Text input fields' properly.
Below, the top image is from the WPF Browser app [Link which i have shared].
Here you can see a blue square box on the top-left. The coded UI identifies that area has the Search Go button.
Bottom part of the image is of the amazon website in IE browser where coded ui is properly highliting/ identifying the Search Go button.
Does this mean i cannot automate WPFBrowser apps using Coded UI.?
Can someone please tell what to do to identify the buttons properly in coded ui
You need to specify Id attributes for the controls that you want exposed to Coded UI.
To me this looks like CodedUI is getting some control that's similar, rather than the correct one.
You haven't mentioned if you're recording and executing tests or handwriting them in a separate CodedUI solution.
If you're recording them: Be sure that you're recording using your WPF application and interactions inside of them, rather than recording using your browser and then trying to execute tests using the WPF application
If you're writing them by hand: Be sure that you're correctly creating trees of inheritance when writing your tests. For instance, in a traditional CodedUI scenario the absolute top level object that all other controls inherit from is a web browser. In your scenario, that object should be the WPF object. There are probably going to be some other windows or various controls that are children of the WPF application which in turn will finally have the browser as a child.

Can I run different versions of my website based on detection of mode

I would like to create one website. This website will have behave differently if I am viewing it at a specific event via a kiosk. The kiosk, will just be an iPad. I believe I can figure out how to lock down the iPad to act like a kiosk and just show my website based on this http://www.webascender.com/Blog/ID/447/How-to-Setup-Kiosk-Mode-Lock-Your-iPad-to-Just-One-App#.U9Fx3oBdVX4
But what I am asking is, in code, is there a way to detect that I am in 'kiosk' mode and show different pages? For example, if you are at home(or anywhere that is NOT the event) you should be able to hit my website to find out all about my company and to view your existing profile. You should be able to see these same pages on the 'kiosk'(the iPad while at an event) but you will now see additional pages such as pages dealing with the specific event and payment pages. Vice-versa you might be able to see additional pages on the website while at home that you will not see while in 'kiosk' mode.
I do not know if the solution is tools/language dependent as we have not settled yet on all tools/languages/frameworks we will be using to build the site and so I am open to all but we will definitely have some javascript/css/html.
I believe you will need to write a native app in order to detect whether you are in 'guided access' aka 'kiosk' mode.
Taken from Detect or react to Guided Access?
NSLog(#"Accessabilitiy enabled: %#", UIAccessibilityIsGuidedAccessEnabled() ? #"YES" : #"NO");
if (!UIAccessibilityIsGuidedAccessEnabled()) {
// show something since I'm not in guided access
}
If you want to know when it changes...
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(guidedAccessChanged) name:UIAccessibilityGuidedAccessStatusDidChangeNotification object:nil];
- (void)guidedAccessChanged
{
// do something when guided access changes
}
If you must work with a website then what you can do is write a native app that embeds a UIWebView. This class allows you to show websites within a native app. So, what you could do with this method is pass along the guided access setting to your website so that it can adjust itself accordingly.
If you know the IP address you can direct views using PHP (and probably a host of other programs). Or you can lock the iPad to only open a specific URL (http://mysubdomain.mydomain.com) and only have pages that you want viewed by the kiosk. I'm sure there are a mess of other ways too.

Windows Phone 8 Style

I am developing a Windows Phone 8 application using xaml. I have almost finished my project. On testing I notice that the application theme color is changing when I change the phone's theme color via settings. I need red color theme for my application (button selection, textbox border,progressbar color etc). What should I do to maintain constant style irrespective of phone's theme? Should I add style for each and every component?
Just create new resource dictionary and include it in App.xaml (merge dictionaries). Override all default styles for all controls you'll be using. Now, use those styles for all your controls and you will be fine. Since your controls will pull styles from App.xaml, your application will be styled according to your desires.
You can find styles in C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Design, this will give you an idea what to change. Or get some of styles with Expression Blend (edit template).

WebApp: How to Use Icons, Colors ... of the Native User Interface

I'm just getting started working on a WebApp which should behave like a native one. That's why I don't want to create my own theme, but I want to use theme of the User Interface (Unity [Ubuntu], Explorer [Windows], Gnome [Mint] and so on) the user uses.
These are some things I want to take from the UI's theme:
Icons: "Save", "Open", "Copy", "Paste" and such icons
Positions: Windows applications draw the "OK"-button on the left-hand-side, and the "Cancel"-button on the right-hand-side and for Ubuntu users it's converse. Another example: Ubuntu users can find the menu entry of application settings at "Edit" and Windows users can find it at "Extras".
Naming conventions: Some things like "Folder" vs. "Directory" are called differently.
Colors and backgrounds: The background of the menu bar is showed gray to Unity/Ubuntu users and it's shown lavender to Explorer/Windows7 users.
I know that not every thing which I talked about will be possible. But I want to solve at least some of these problems. Here are some solutions I heard about:
(-moz-)appearance (obsolete CSS3 darft)
CSS System Colors like ButtonText or Window (deprecated, but avaible in many browsers)
CSS System fonts (obsolete CSS3 darft)
My Question: Do you know other scopes to take Colors, Icons ... from the User Interface?
The only thing you can use are the CSS System Colors - everything else could be guessed at by User Agent sniffing, but it will only be a guess.
For the icons, you can use moz-icon. Example:
#content a[href $=".pdf"]:before {
content: url("moz-icon://.pdf");
}
This works only on Firefox and Gecko-based browsers.

using PopUpManager in a Flex 4.5 Mobile App

This is more of a best practices question rater than something technical.
I'm working on a mobile app using the Flex 4.5 SDK and I'm trying to figure out the best way to handle notification windows. In most cases these windows will be alerting the user to when something goes wrong. Ex: bad login, no data, cannot resolve server.
I'm using a singleton design pattern, I have a Requests class that handles server calls. Most popups will be originating from this class (IOErrorEvents from my loader being used to access the API). Since this class is a singleton and is used from all Views inside the app it is not aware of applications current view. I'm also not sure having this class keep track of the current view and having it push popups on top of it would be best practice.
I'm hoping that I can use PopUpManager to keep track of where to add popups and what popups are currently on the stage. Though all examples I've seen online about this show static Components being used in a views Declarations tag.
I'm really just looking for any examples or input on how you would solve this problem. Any help would be greatly appreciated!
I had the same problem, and sorted it by making an Alert popup component that you can call from anywhere in the code base, and it will pop up in the currently active window. It also has an always visible scrollbar text area which is handy
http://bbishop.org/blog/?p=502
It works for a view navigator application, but if your using a tabbed navigator application, you can add a call for that, or simply change the code to
mainTabbedNavigator = FlexGlobals.topLevelApplication.tabbedNavigator;
currentTab = mainTabbedNavigator.selectedNavigator as ViewNavigator;