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.
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 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 making a UWP app in which in which I need to different animations for different screen sizes on the same page. I want if screen width is less than 400 this animation should play, If screen with is less than 720 other animation should play. How can I write the code for this in C#.
You can get what you want by using the StateTriggers property with an AdaptiveTrigger to create a declarative rule in XAML markup based on window size. For example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window width is <400. -->
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Storyboard>
<Storyboard>
<!-- The animation you want to play. -->
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window width is >=400 and <720. -->
<AdaptiveTrigger MinWindowWidth="400" />
</VisualState.StateTriggers>
<VisualState.Storyboard>
<Storyboard>
<!-- The animation you want to play. -->
</Storyboard>
</VisualState.Storyboard>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<!-- VisualState to be triggered when window width is >=720. -->
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
I think you can use either the SystemParameters.Workarea or the System.Windows.Forms.WorkingArea. From either you can access the width property.
https://msdn.microsoft.com/en-us/library/system.windows.systemparameters.workarea.aspx
https://msdn.microsoft.com/en-us/library/system.windows.forms.screen.workingarea(v=vs.110).aspx
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>
I am working on Windows Phone 8, i have long list selector with few items in it.When i tap on the items i need to add some animation to it like, move the text in and come back.How to achieve this? i am trying to apply the same to list box as well.
I have tried this :
<Style x:Key="LongListSelectorStyle1" TargetType="phone:LongListSelector">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<UserControl>
<Border x:Name="MyBorder" Background="Transparent">
<VisualStateManager.VisualStateGroups >
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="MyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="#000000"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</UserControl>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
But its not working.
Below is the sample screenshot
How can i achieve this ?
I would try using the WPToolkit, in which there is the option where you can apply a 'tilt' animation when an item in your ListBox or LongListSelector is pressed. Very cool. First you need to get the toolkit via NuGet in Visual Studio https://www.nuget.org/packages/WPtoolkit/4.2013.8.16 (a link to the site but you add it using the Package Manager Console within Visual Studio itself and it sets everything up automatically). Check this link http://www.davidsalter.com/2013/09/using-windows-phone-toolkit-in-wp8.html and once you have it, Within the tag wher eyou declared the ListBox or LongListSelector itself, insert the following
`<ListBox ... toolkit:TiltEffect.IsTiltEnabled="True" ../>
This should work.