I have a complicated visual state and don't like to copy it to everywhere, so putting it in the ResourceDictionary
but some setter's value should be replaced by the real value from the target:
for example: the {Parameter1} and {Parameter1} are things I hope to replace.
<ResourceDictionary>
<Style x:Key="ToggleButton" TargetType="button:SfButton">
<Setter Property="ShowIcon" Value="True"/>
<Setter Property="IsCheckable" Value="True"/>
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList x:Name="CommonStates">
<VisualStateGroup>
<VisualState x:Name="Unchecked">
<VisualState.Setters>
<Setter Property="ImageSource" Value="{mb:ImageAsset Source={Parameter1} }" />
<Setter Property="BackgroundColor" Value="#3900" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Checked">
<VisualState.Setters>
<Setter Property="ImageSource" Value="{mb:ImageAsset Source={Parameter2} }" />
<Setter Property="BackgroundColor" Value="#6090" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ResourceDictionary>
but in the control's instantiation there's no way to pass these arguments:
<button:SfButton Style="{StaticResource ToggleButton, ??Parameter1=xxx?? }" Text="xx"/>
so is there anyway to achieve this?
Related
Currently I have a problem when I apply a style to an Entry it only opens on the second click. This only occurs when the applied Style uses the Visual State Manager with the VisualState Focused. If I remove the VisualState "Focused" the problem is solved.
Used style Code:
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite}" />
<Setter Property="FontAttributes" Value="None"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite_Disabled}" />
<Setter Property="FontAttributes" Value="None"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Focused">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite}" />
<Setter Property="FontAttributes" Value="Bold"/>
</VisualState.Setters>
</VisualState>
<VisualState Name="Selected">
<VisualState.Setters>
<Setter Property="TextColor" Value="{StaticResource Color_Text_OnWhite}" />
<Setter Property="FontAttributes" Value="Bold"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
Here is the Video to show the problem: https://vimeo.com/588825086
Is there a workaround available?
This issue is caused by the FontAttributes. Delete the code below would be okay.
<Setter Property="FontAttributes" Value="Bold"/>
The seetings of the Font like FontSize, FontAttributes with VisualState would make the Keyboard does not appear unless you tap twice.
The issue of FontSize is reported and has not solved yet. I would reported this FontAttributes as well. https://github.com/xamarin/Xamarin.Forms/issues/4573
In UWP, if I want to specify a default style for a custom control, I'd code it up like this:
public PriceControl()
{
// This allows the control to pick up a template.
this.DefaultStyleKey = typeof(PriceControl);
}
I can't find the equivalent in Xamarin.Forms. How do you tell a custom control that it should use a style by default?
Just define a style in App.Xaml of the typeof your control and don't give it a key just a target type and that should do the trick:
<Application.Resources>
<ResourceDictionary>
<Style TargetType="Button">
<Setter Property="HorizontalOptions" Value="Center" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
<Setter Property="BorderColor" Value="Lime" />
<Setter Property="BorderRadius" Value="5" />
<Setter Property="BorderWidth" Value="5" />
<Setter Property="WidthRequest" Value="200" />
<Setter Property="TextColor" Value="Teal" />
</Style>
</ResourceDictionary>
</Application.Resources>
Just replace button with your control and it's properties Into the setter's and this will be your global default style for this control!
In one of my Xamarin.Forms apps I want to change the text color of a DatePicker according to the IsEnabled property.
I tried two known ways:
1) Using a style
In App.xaml:
<Style x:Key="DatePickerStyle" TargetType="DatePicker">
<Style.Triggers>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="True">
<Setter Property="TextColor" Value="Blue" />
</Trigger>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="False">
<Setter Property="TextColor" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
In View.xaml:
<DatePicker IsEnabled="{Binding IsEnabled}" Style="{StaticResource DatePickerStyle}" ... />
2) Adding the trigger in XAML
<ViewCell>
<DatePicker IsEnabled="{Binding IsEnabled}" ...>
<DatePicker.Triggers>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="True">
<Setter Property="TextColor" Value="Blue" />
</Trigger>
<Trigger TargetType="DatePicker" Property="IsEnabled" Value="False">
<Setter Property="TextColor" Value="Red" />
</Trigger>
</DatePicker.Triggers>
</DatePicker>
</ViewCell>
Both ways lead to a "System.InvalidOperationException: bindable not an instance of AssociatedType" exception.
Is it possible to change the text color of a picker with an applied style that contains a trigger at the IsEnabled property? Will a behavior be a better way to go?
I faced a similar issue with DatePicker and found no explanation on Xamarin forums or msdn. I have finally used the following workaround and it works
<Style TargetType="DatePicker">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList x:Name="CommonStates">
<VisualStateGroup>
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="LightGray" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
See also Visual State Manager.
I#m a beginner with WPF. I want to make the same like css/sass. I want to reuse some definitions.
Here I want to reuse a color definition in an element (e.g. button). If I use binding with "staticresource", I get the following exception when running:
"An unhandled exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: "#FF8FA2AC" ist kein gültiger Wert für die Eigenschaft "Background"."
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<Color x:Key="cyan3">#007ca9</Color>
<Color x:Key="mangenta2">#a8005c</Color>
<Color x:Key="wintergrey1">#e6ecf0</Color>
<Color x:Key="wintergrey2">#c3ced5</Color>
<Color x:Key="wintergrey3">#8fa2ac</Color>
<Color x:Key="wintergrey4">#506671</Color>
<Color x:Key="white">#FFFFFF</Color>
<Color x:Key="antrazit">#333333</Color>
<!-- Base style for button -->
<Style TargetType="Button" x:Key="btnStandard">
<!--Setter Property="Background" Value="#8fa2ac"/-->
<Setter Property="Background" Value="{StaticResource wintergrey3}"/>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="30"/>
</Style>
</ResourceDictionary>
How can I use predefined definitions in other elements? Or what is wrong. I want do define 4 different button styles "Standard", "IsFocused", "IsDisabled" and "IsHero (background=mangenta2".
You should set the Background property to a Brush. If you set it to a SolidColorBrush you can then set the Color property of this one to your Color resource like this:
<Style TargetType="Button" x:Key="btnStandard">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{StaticResource wintergrey3}" />
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#ffffff"/>
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="30"/>
</Style>
I am developing windows phone app not silverlight just basic app.
Is there any way to make the buttons of my app look like tile. That means I want tiles for my buttons inside the pages.
I want to do something like this
but I am getting error like "the default namespace is not defined" in the line marked when i put this code on my page.
*<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem">*
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="64"/>
<Setter Property="Margin" Value="12,12,0,0"/>
<Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Width" Value="173"/>
<Setter Property="Height" Value="173"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Rectangle Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
On the link that you have provided, the BBC app are using HubTiles and attaching onClick event Handlers to make them seem as buttons.
Please use HubTile from telerik or something and you will achieve the SAME SAME result as that of BBC app