I have a number of global constants for font sizes, brushes, etc. Examples:
<x:Double x:Key="SmallWindowWidth">0</x:Double>
<x:Double x:Key="CompactWindowWidth">600</x:Double>
<x:Double x:Key="MediumWindowWidth">720</x:Double>
<x:Double x:Key="WideWindowWidth">1024</x:Double>
<x:Double x:Key="SmallTitleFontSize">22</x:Double>
<x:Double x:Key="NormalFontSize">16</x:Double>
When the Window Width becomes small I would like to reduce the FontSize of some texts. Of course I could target each and every single one of them individually, but what I would rather do is globally change the {StaticResource NormalFontSize}, like this:
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource SmallWindowWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="{StaticResource NormalFontSize}" Value="12"/>
</VisualState.Setters>
</VisualState>
...which doesn't seem to work as it is no property. So, is there any way to change static resources in XAML (!)?
Well, You can do it with some tweaks.
Note, I have locally tested it in UWP to answer your question but I didn't use it in any of my published projects yet.
First Step,
If you need to change a resource that has dependency property, like color of solid brush.[No Wrapper needed]
If you need to change a resource that doesn't have dependency property like double value [Wrapper Needed]
public class DoubleWrapper : DependencyObject
{
public double Value
{
get { return (double)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
// Using a DependencyProperty as the backing store for Value. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register("Value", typeof(double), typeof(DoubleWrapper), new PropertyMetadata(0.0));
}
Second Step,
You need to define x:Name besides the mandatory x:Key To be able to target a static resource in visual state setter. (you can use different name for x:Name, if you want)
<Page.Resources>
<local:DoubleWrapper x:Name="FontSizeWrapper" x:Key="FontSizeWrapper" Value="12"/>
<SolidColorBrush x:Name="MainBrush" x:Key="MainBrush" Color="Red"/>
</Page.Resources>
Finally, when you change Value property of FontSizeWrapper or MainBrush in Visual state setter, it will update all bindings.
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutStates">
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="WideState">
<VisualState.Setters>
<Setter Target="FontSizeWrapper.(DoubleWrapper.Value)" >
<Setter.Value>
<x:Double>25</x:Double>
</Setter.Value>
</Setter>
<Setter Target="MainBrush.(SolidColorBrush.Color)" Value="Aqua" />
</VisualState.Setters>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock Text="This is test" Foreground="{StaticResource MainBrush}"
VerticalAlignment="Center"
FontSize="{Binding Value, Source={StaticResource FontSizeWrapper}}"/>
</Grid>
Related
I want to change the color of option titles and selected option how can i do that?
The default Xamarin.Forms Project template is going to put styles like FlyoutItemLabelStyle, FlyoutItemLayoutStyle and MenuItemLayoutStyle in the Shell.Resources element of AppShell.xaml. These styles, in turn, will have many references to {StaticResource Primary} which is a color defined in the Application.Resources element of App.xaml. I would start by assessing what's happening in those places. Even if you're not using the template you can study it as an example of how to achieve your outcome.
Device Themes can adversely affect these settings
What I've noticed is that Xamarin UI elements with default transparent background color may not respond dynamically if the device is, for example, changed to dark mode. (I've definitely seen white text on an effectively-white background in dark mode). So one must pay attention to what the consequences will be when the device's visual themes change. There is an especially good training on this topic by Xamarin guru James Montemagno. I would highly recommend his YouTube video on Dynamic App Themes in Xamarin.Forms - Light, Dark, & Custom Modes
For the purpose of a basic demonstration of how to modify these themes, I have hardcoded "Magenta", "Blue" and "Green" in the default xaml which produces the colors shown in the image that follows.
<Shell.Resources>
<ResourceDictionary>
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Magenta"></Setter>
</Style>
<Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Blue" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
</Shell.Resources>
I am trying to use visual states to mark a TextBox input as invalid (by changing its border color to red) during input validation when a user submits a form the TextBox is a part of. I have the following code:
XAML
<Page.Resources>
<!-- Other resources omitted for brevity -->
<Flyout x:Key="NewTimeBlockFlyout">
<StackPanel>
<!-- Other stuff here omitted for brevity -->
<TextBox Margin="5"
Header="Name"
x:Name="NewTimeBlockNameTextBox">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default"></VisualState>
<VisualState x:Name="Invalid">
<VisualState.Setters>
<Setter Target="NewTimeBlockNameTextBox.Background" Value="Red"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</TextBox>
<!-- The rest of the form omitted for brevity -->
<Button x:Name="CreateTimeBlockButton"
Grid.Column="0"
Margin="0,0,2,0"
HorizontalAlignment="Stretch"
Tapped="CreateTimeBlockButton_Tapped">Create</Button>
</StackPanel>
</Flyout>
</Page.Resources>
Note: This is on a XAML Page. I am NOT using a custom control.
C#
private void CreateTimeBlockButton_Tapped(object sender, TappedRoutedEventArgs e)
{
// Validate the input.
if (String.IsNullOrWhiteSpace(this.NewTimeBlockNameTextBox.Text))
{
// These two lines of code confirm the visual state named "Invalid" does exist on the textbox.
//List<VisualStateGroup> m = VisualStateManager.GetVisualStateGroups(this.NewTimeBlockNameTextBox).ToList();
//List<VisualState> c = m.FirstOrDefault().States.ToList();
// Assignment to bool just used to inspect the return value for debugging.
bool did = VisualStateManager.GoToState(this.NewTimeBlockNameTextBox, "Invalid", false);
}
}
Problem
No matter what I try, the call to VisualStateManager.GoToState() is always returning false.
Things I have tried:
Here is the relevant documentation from Microsoft.
As seen in the C# code above, I have verified the visual state "Invalid" does exist, as expected, on the "NewTimeBlockNameTextBox" control.
I have seen several solutions including here, and here that suggest moving the <VisualStateManager.VisualStateGroups> tag in the XAML to outside of the TextBox, or to the root of the Page. Neither have worked for me.
I have also seen these two solutions here and here, but neither seemed relevant to my situation, as both seem to have issues related to things I am not doing.
I can reproduce your issue. You need to place <VisualStateManager.VisualStateGroups> outside the TextBox and skip status through VisualStateManager.GoToState(this, "Invalid", false); Please refer to the following code.
Xaml code:
<Page
……
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Default"></VisualState>
<VisualState x:Name="Invalid">
<VisualState.Setters>
<Setter Target="NewTimeBlockNameTextBox.BorderBrush" Value="Red"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox Margin="5"
Header="Name"
x:Name="NewTimeBlockNameTextBox" >
</TextBox>
<Button x:Name="CreateTimeBlockButton"
Grid.Row="1"
Margin="0,0,2,0"
HorizontalAlignment="Stretch"
Tapped="CreateTimeBlockButton_Tapped">Create</Button>
</StackPanel>
</Page>
Code behind:
private void CreateTimeBlockButton_Tapped(object sender, TappedRoutedEventArgs e)
{
bool a = VisualStateManager.GoToState(this, "Invalid", false);
}
Updated:
For using VisualStateManager.GoToState(), which always be done by changing its controltemplate.
You could right click the textbox in XAML designer, then select the option Edit a Template->Edit a Copy, here you will see the default textbox style placed in <Page.Resources> </Page.Resources> tag.
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
……
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
……
<VisualStateManager.VisualStateGroups>
……
<VisualState x:Name="TestState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="HeaderContentPresenter" …/>
<Border x:Name="BorderElement" …/>
……
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, you could place custom state in its template, then you could use “VisualStateManager.GoToState(NewTimeBlockNameTextBox, "TestState", false);” to skip state.
I have 2 projects. In both I style switch. After updating VS I have problems in my new project when I add
<Switch>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="On">
<VisualState.Setters>
<Setter Property="ThumbColor"
Value="#2D78FD" />
<Setter Property="OnColor"
Value="#2D78FD" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Off">
<VisualState.Setters>
<Setter Property="ThumbColor"
Value="LightGray" />
<Setter Property="OnColor"
Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Switch>
I understand that I have problems with themes
On my phone I have Dark theme so I write
BackgroundColor="{AppThemeBinding Light=White, Dark=White}"
And then I have white BackgroundColor and have problems with the switch
enter image description here
If I don`t write
BackgroundColor="{AppThemeBinding Light=White, Dark=White}"
enter image description here
Why my OnColor does not work at white BackgroundColor when it turns off(I tried other colors and only ThumbColor change color)
Please update your Xamarin.forms version to the latest 4.8.0.1364, I test your code and it works well.
I am develop an UWP app, and I am using Template10.
I have an TextBlock, that in VisualStateNarrow I want it RelativePanel.AlignVerticalCenterWithPanel="True" and in NormalMinWidth I want RelativePanel.AlignHorizontalCenterWithPanel="True" but I can not do this!
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveVisualStateGroup">
<VisualState x:Name="VisualStateNarrow">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TextBlock.RelativePanel.AlignVerticalCenterWithPanel="True"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateNormal">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NormalMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="TextBlock.RelativePanel.AlignHorizontalCenterWithPanel="True"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="VisualStateWide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
In XAML editor give me this error: "An Exception was thrown." - "Cannot resolve TargetProperty RelativePanel.AlignHorizontalCenterWithPanel on specified object."
I have many Setter.Target and they all work!
Example of my Setter.Target:
<Setter Target="TextBlock.Margin" Value="8"/>
<Setter Target="TextBlock.Width" Value="200"/>
<Setter Target="TextBlock.Height" Value="200"/>
Here is a way to create setters for adaptive triggers without writing a single line of code. Since VS provides neither IntelliSense nor error warning for writting them, this helps prevent bugs that are hard to diagnose.
Go to the States panel, click to activate the visual state that you want to add setters to. A red dot will apear next to the name of this visual state.
Once it's activated, go to the Objects and Timeline panel and select the element that you want to interact within this state. In your case, select the TextBlock element.
Go to the Properties panel, either expand the RelativePanel section or search for "relative" in the search box, once the properties come up, simply select the ones you want to change.
That's all! Feel free to check out the gif demo below too.
For attached properties you have to add brackets to in setters as follows:
Element.(Grid.Row)
Element.(ToolTipService.ToolTip)
So your code will look like this:
<Setter Target="TextBlock.(RelativePanel.AlignVerticalCenterWithPanel)" Value="True" />
I am currently teaching myself how to build a Windows UWP app.
My question is:
If I have an app which requires a login, how do I handle the decision if a login-form should be shown, or the actual start page of the app if the PasswordVault already has stored credentials?
Do I leave the MainPage blank and just write the logic (in the .cs-file) which decides if I navigate to the LoginPage or to the ContentPage (or whatever I will call it)?
Or is it the intention to put this logic into the App.xaml.cs?
Or is my approach totally wrong and this should be handled in a complete different way?
If you want to show hide content based on a ViewModel you could add a property to your ViewModel say IsLoggedIn
private bool isLoggedIn;
public bool IsLoggedIn
{
get { return isLoggedIn; }
set
{
isLoggedIn = value;
OnPropertyChanged("IsLoggedIn");
}
}
You could then install the WindowsStateTriggers from nuget
Once you have that installed add a reference at the top of your xaml page
xmlns:triggers="using:WindowsStateTriggers"
next using VisualStateManager you can simply show/hide content based on the IsLoggedIn property on your viewmodel. Here we target the Visibility property of the Grids
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LoginGroup">
<VisualState x:Name="LoggedIn">
<VisualState.StateTriggers>
<triggers:EqualsStateTrigger EqualTo="True" Value="{Binding Path=IsLoggedIn}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoggedInGrid.Visibility" Value="Visible"/>
<Setter Target="LoggedOutGrid.Visibility" Value="Collapsed" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="LoggedOut">
<VisualState.StateTriggers>
<triggers:EqualsStateTrigger EqualTo="False" Value="{Binding Path=IsLoggedIn}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="LoggedInGrid.Visibility" Value="Collapsed"/>
<Setter Target="LoggedOutGrid.Visibility" Value="Visible" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="LayoutRoot">
<Grid x:Name="LoggedInGrid">
</Grid>
<Grid x:Name="LoggedOutGrid">
</Grid>
</Grid>
</Grid>nter code here
You could check that the credentials are stored/valid when you're loading the application and make a decision whether to navigate to your main app page or a login page from the OnLaunched event in your App.xaml.cs
You could check out the extended splashscreen sample from the sdk: https://github.com/Microsoft/Windows-universal-samples/tree/master/Samples/SplashScreen