UWP RequestedTheme in resource dictionary - xaml

So I am designing an app that dynamically themes itself based upon an API response. I have been able to programmatically set the colors in the resource dictionary for the rest of my app but I am trying to find out how to set get the button and AppBarButton hover and click colors to fit in my color scheme. I have previously changed this by hardcoding the RequestedTheme property in the required elements.
Is there a way to bind the RequestedTheme property to a static resource set in a resource dictionary that I am able to set programmatically? I am open to accomplishing the theming of the buttons differently if need be but would like to avoid having to bind to a local variable on each page if possible.
Thanks so much!

You could define a custom theme resource class like the following:
public enum MyTheme
{
//
// Summary:
// Use the Application.RequestedTheme value for the element. This is the default.
Default = 0,
//
// Summary:
// Use the **Light** default theme.
Light = 1,
//
// Summary:
// Use the **Dark** default theme.
Dark = 2
}
Then, in resource dictionary, you could define your different theme resource:
<Application.Resources>
<local:MyTheme x:Key="MyTheme">Light</local:MyTheme>
</Application.Resources>
In XAML page, you could reference to it:
<Button Content="test" RequestedTheme="{StaticResource MyTheme}"></Button>
You can then change the value in code with:
App.Current.Resources["MyTheme"] = isThemeDark ? "Dark" : "Light";

Related

How to customize Pull-To-Refresh indicator style in NativeScript/Vue?

I am trying to customize the style of Pull-To-Refresh indicator in NativeScript/Vue app. There seems to be no example code for Vue. I tried to place the following code adapted from Angular into , got errors when running the app.
<RadListView.pullToRefreshStyle>
<PullToRefreshStyle indicatorColor="white" indicatorBackgroundColor="blue"/>
</RadListView.pullToRefreshStyle>
Can anybody offer a working example or update the following page?
https://docs.nativescript.org/vuejs/ns-ui/ListView/pull-to-refresh
On a side note, according to doc here:
https://docs.nativescript.org/ns-ui-api-reference/classes/pulltorefreshstyle
Only color and background color can be customized. Is there anyway to get around this change size of indicator?
The only way I can think of is to set both foreground and background of indicator to transparent then use page level activityIndicator.
Just set the attributes on pullToRefreshStyle property
HTML
<RadListView :pullToRefreshStyle="pullToRefreshStyle">
Script
import * as colorModule from "tns-core-modules/color";
data() {
return {
pullToRefreshStyle: {
indicatorColor: new colorModule.Color("red"),
indicatorBackgroundColor: new colorModule.Color("green")
}
};
}

How to implement UWP the right way

I run often into many problems which leads to refactoring my code...
That is why I want to ask for some recommendations.
The problems I'm running into are:
1) Providing data to XAML
Providing simple data to control value instead of using a value converter. For instance I have a color string like "#FF234243" which is stored in a class. The value for the string is provided by a web application so I can only specify it at runtime.
2) UI for every resolution
In the beginnings of my learning I got told that you can create a UI for every possible resolution, which is stupid.
So I've written a ValueConverter which I bind on an element and as ConverterParameter I give a value like '300' which gets calculated for every possible resolution... But this leads to code like this...
<TextBlock
Height={Binding Converter={StaticResource SizeValue}, ConverterParameter='300'}
/>
3) DependencyProperties vs. NotifyProperties(Properties which implement INotifyPropertyChanged) vs. Properties
I have written a control which takes a list of value and converts them into Buttons which are clickable in the UI. So I did it like this I created a variable which I set as DataContext for this specific Control and validate my data with DataContextChanged but my coworker mentioned that for this reason DependencyProperties where introduced. So I created a DependecyProperty which takes the list of items BUT when the property gets a value I have to render the buttons... So I would have to do something like
public List<string> Buttons
{
get { return (List<string>)GetValue(ButtonsProperty); }
set
{
SetValue(ButtonsProperty, value);
RenderButtons();
}
}
// Using a DependencyProperty as the backing store for Buttons. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ButtonsProperty =
DependencyProperty.Register("Buttons", typeof(List<string>), typeof(MainPage), new PropertyMetadata(""));
private void RenderButtons()
{
ButtonBar.Children.Clear();
ButtonBar.ColumnDefinitions.Clear();
if(Buttons != null)
{
int added = 0;
foreach (var item in Buttons)
{
var cd = new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) };
var btn = new Button() { Content = item };
ButtonBar.ColumnDefinitions.Add(cd);
ButtonBar.Children.Add(btn);
Grid.SetColumn(btn, added);
}
}
}
And have to use it like this:
<Controls:MyControl
x:Name="ButtonBar" Button="{Binding MyButtons}">
</Controls:MyControl>
Since these are a lot of topics I could seperate those but I think that this is a pretty common topic for beginners and I have not found a got explanation or anything else
1. Providing data to XAML
There are two options: prepare data in the ViewModel or to use converter.
To my mind using converter is better since you can have crossplatform viewModel with color like you mentioned in your example and converter will create platform dependent color. We had similar problem with image. On android it should be converted to Bitmap class, while on UWP it's converted to BitmapImage class. In the viewModel we have byte[].
2. UI for every resolution
You don't need to use converter, since Height is specified in effective pixels which will suit all the required resolutions automatically for you. More info can be found at the following link:
https://learn.microsoft.com/en-us/windows/uwp/design/layout/layouts-with-xaml
There are two options how to deal with textblock sizes:
a) Use predefined textblock styles and don't invent the wheel (which is the recommended option):
https://learn.microsoft.com/en-us/windows/uwp/design/style/typography#type-ramp
Or
b) Specify font size in pixels. They are not pixels, but effective pixels. They will be automatically scaled on different devices:
https://learn.microsoft.com/en-us/windows/uwp/design/style/typography#size-and-scaling
Furthermore, use adaptive layout to have different Layout for different screen sizes.
3) DependencyProperties vs. NotifyProperties(Properties which implement INotifyPropertyChanged) vs. Properties
As per your code you can try to use ListView or ItemsControl and define custom item template.
DependencyProperties are created in DependencyObject and are accessible in xaml. All controls are inherited from DependencyObjects. Usually you create them when you want to set them in xaml. They are not stored directly in the objects, but in the global dictionary and resolved at runtime.
DependencyProperties were created long time ago and you can find lots of links which explain them in details:
http://www.wpftutorial.net/dependencyproperties.html
https://techpunch.wordpress.com/2008/09/25/wpf-wf-what-is-a-dependency-property/
When should I use dependency properties in WPF?
What is a dependency property? What is its use?
What is a dependency property?
INotifyPropertyChanged INPC are the central part of MVVM. You bind your view to viewModel which implements INPC and when you change value of the property control is notified and rereads the new value.
Download the following video in high resolution which explains MVVM in details (by Laurent Bugnion):
https://channel9.msdn.com/Events/MIX/MIX11/OPN03
MVVM: Tutorial from start to finish?
Normal properties are used in model classes or when there is no need to notify UI regarding changes.

InputScope dependency property, XAML designer problems + errors

I have a control that consists of a button and a textbox.
I wanted to set the input scope of the textbox, so I introduced a new dependency property:
public InputScope InputScope
{
get { return (InputScope)GetValue(InputScopeProperty); }
set { SetValue(InputScopeProperty, value); } // Notify prop change
}
public static readonly DependencyProperty InputScopeProperty =
DependencyProperty.Register(nameof(InputScope), typeof(InputScope), typeof(SearchControl), new PropertyMetadata(DependencyProperty.UnsetValue));
In XAML:
<controls:SearchControl InputScope="Number" /> <!-- etc... -->
(Obviously assigning it to the InputScope property of the textbox in the style of this custom control.)
My problem: While this works, the numeric keyboard gets shown when focused, but I have blue underline in the XAML, and also an error message: The TypeConverter for "InputScope" does not support converting from a string.
Is there a way to fix it without a dirty hack?
Is there a way to fix it without a dirty hack?
You could implement a type converter. Please refer to Tim Heuer's blog post for more information and an example:
Implementing a type converter in UWP XAML: http://timheuer.com/blog/archive/2017/02/15/implement-type-converter-uwp-winrt-windows-10-xaml.aspx
You may also want to read this:
WinRT Replacement for System.ComponentModel.TypeConverter

CUBA platform how to dynamically change field color

I'm trying to dynamically change some field color when it has changed due to some processing.
CUBA documentation explains how to do it statically through web theme extension (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html), but not dynamically. Although it is possible in Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS) on which platform web gui is built upon.
I suppose that if I use the Vaadin way of injecting CSS it will work (which I will try) but I will then have Vaadin specific code, which I'm trying to avoid.
Is there a CUBA way of doing so I'm missing ?
Edit:
I'm trying to have any field of a form to change background color when it has changed from its initial value. As per CUBA documentation (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html) I need to :
- create a SCSS mixin with background color
- inject the field in the editor class in order to have access to it
- react to a field change event and then define the style name of the field
I did create the SCSS mixin, but two issues I have :
1) I would like to retrieve the field instance dynamically instead of injecting it (keep code clean and light)
2) I would like to avoid defining the background color statically so that the color could be parameterized at runtime
For 1) I tried to injected the fieldGroup and used getFieldComponent(), then applied the style with setStyleName on it when it is changed. It worked but I would prefer to define this behavior for every field that is an input field.
For 2) apart from using Vaadin specific feature of injecting CSS (and tighing my code to Vaadin (and so leading me away of generic interface) I do not see how to do
Hope it's more clear
You cannot set truly dynamic color (any RGBA) from code to field but you can create many predefined colors for your field:
#import "../halo/halo";
#mixin halo-ext {
#include halo;
.v-textfield.color-red {
background: red;
}
.v-textfield.color-blue {
background: blue;
}
.v-textfield.color-green {
background: green;
}
}
I do not recommend using styles injected from code (as Vaadin Page does) since it is a mixing of logic and presentation. Instead you can create all predefined styles (30-50 styles should be enough) and assign it depending on some conditions using setStyleName method:
public class ExtAppMainWindow extends AppMainWindow {
#Inject
private TextField textField;
private int steps = 0;
public void changeColor() {
if (steps % 2 == 0) {
textField.setStyleName("color-red");
} else {
textField.setStyleName("color-blue");
}
steps++;
}
}
If you want to apply the logic of color change for all TextFields inside of FieldGroup you can iterate FieldGroup fields in the following way:
for (FieldGroup.FieldConfig fc : fieldGroup.getFields()) {
Component fieldComponent = fieldGroup.getFieldComponent(fc);
if (fieldComponent instanceof TextField) {
TextField textField = (TextField) fieldComponent;
textField.addValueChangeListener(e ->
textField.setStyleName("color-red")
);
}
}

How do you read localsettings variables in default.css file in a windows store app?

I am building a windows store app that has a default css and a default font size in that css. I am allowing the user to customize the font size from settings screen and that preference gets stored in local settings. How do I update my app to reflect the new font size? Are there any current patterns? This is a Html5/js app. Can I simply reload the css value from the change event?
When your app launches, read the font size from local settings and then set the document's font size with JavaScript:
document.body.style.fontSize = fontSizeFromSettings;
When the app is running and the user changes the font size, also call the above line. You could do this right after your code which saves the font size to local settings.
Naturally, you can also change the font size of individual elements using document.getElementById("myId").style.fontSize.
I read this as the OP having a class selector already defined, like
.myclass
{
font-size: 36px;
}
and wanting to modify all elements with the .myclass selector to be a new value, say 72px. If that's the intent, then you can dynamically modify the CSS.
Here's a simple (and fragile, not-suitable-for-production) function that looks for a specific style selector in a known CSS file and modifies it on the fly. You could probably generalize this, take a look at Changing External Stylesheets and How to change CSS Stylesheets with JavaScript for more details.
function updateFontSize(newFontSize) {
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].href.indexOf("default.css") >= 0) {
var mySheet = document.styleSheets[i];
for (var r in mySheet.cssRules) {
if (mySheet.cssRules[r].selectorText == ".myclass") {
var myRule = mySheet.cssRules[r];
myRule.style.fontSize = newFontSize;
return;
}
}
}
}
};
Then somewhere you call it like (without hardcoding the value, of course):
updateFontSize("128px");