I am trying to make a simple resource dictionary for styles but the Background property is throwing an "Invalid Token". Setting the background directly in the property works fine. Here is an example using a button style:
<Style x:Key="ExampleButton"
TargetType="{x:Type Button}">
<Setter Property="Background"
Value="DarkGrey" />
<Setter Property="Width"
Value="100" />
<Setter Property="Height"
Value="30" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Grey" />
</Trigger>
</Style.Triggers>
</Style>
i think the value need to be Value="Gray" and not Value="Grey"
or try to set your own "Shade of Gray", Value="#B2AFAF"
Related
I don't know if I am just not understanding right. I am trying to make 2 different button styles for my application: BlueOnWhiteButton and WhiteOnBlueButton.
Both these buttons should be identical, but the foreground and backgrounds are reversed. So far, oh so simple.
Here is the catch: I need my buttons to have rounded corners. This simple requirement doesn't seem to be so simple after all. Also there maybe a little border of a different color on both versions.
Using some things I found on google and stack, I came up with this style for the first one, and it looked promising:
<Style x:Key="WhiteOnBlueButton"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
</Style>
</Style.Resources>
</Style>
So far so good, my button looks how I want it. But then, when I try to make a second style underneath, I get an error at runtime because of the Style.Resources redefine. I'll save you the code block, figure the same with a different name and reversed colors.
I am trying to keep the use of the style as simple as possible, I have tried versions with templates, but it made the style a lot more complicated, and I even lost the button text...
What I would like to have is something like this:
<Style x:Key="RoundedButtonCornersNoBorder" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="RoundedButtonCorners" TargetType="Border">
<Setter Property="CornerRadius" Value="4"/>
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="2" />
</Style>
<Style x:Key="WhiteOnBlueButton"
TargetType="Button">
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<!-- Somehow tell the borders should be taken from the style RoundedButtonCornersNoBorder-->
</Style>
<Style x:Key="BlueOnWhiteButton"
TargetType="Button">
<Setter Property="Background" Value="White" />
<Setter Property="Foreground" Value="{StaticResource MainBlue}" />
<Setter Property="FontWeight" Value="bold" />
<!-- Somehow tell the borders should be taken from the style RoundedButtonCorners-->
</Style>
Is there any way to code that without writing 300 lines of incomprehensible code?
The final goal is to apply the style by simply doing:
<Button
Style="{DynamicResource WhiteOnBlueButton}"
Content="CLICK ME!" />
You could move the Border Style in the Resources of a common base Style and derive the final Button Styles from the common base Style by means of the BasedOn property.
Do not set the BorderBrush in the Border Style, but either in the base or final Button Styles. The Border in the Button Template will pick it up from the Button via a TemplateBinding.
<Style x:Key="RoundedButtonCorners" TargetType="Button">
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
</Style.Resources>
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}"/>
<Setter Property="FontWeight" Value="Bold" />
</Style>
<Style x:Key="WhiteOnBlueButton" TargetType="Button"
BasedOn="{StaticResource RoundedButtonCorners}">
<Setter Property="Background" Value="{StaticResource MainBlue}"/>
<Setter Property="Foreground" Value="White"/>
</Style>
<Style x:Key="BlueOnWhiteButton" TargetType="Button"
BasedOn="{StaticResource RoundedButtonCorners}">
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="{StaticResource MainBlue}"/>
</Style>
Turns out we have a library that has a button exposing the border directly.
Final styles look like this:
<Style x:Key="WhiteOnBlueButton" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="{StaticResource MainBlue}" />
<Setter Property="FontWeight" Value="bold" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="0" />
</Style>
<Style x:Key="BlueOnWhiteButton" TargetType="telerik:RadButton">
<Setter Property="Foreground" Value="{StaticResource MainBlue}" />
<Setter Property="Background" Value="White" />
<Setter Property="FontWeight" Value="bold" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="BorderBrush" Value="{StaticResource LightBlue}" />
<Setter Property="BorderThickness" Value="0" />
</Style>
And then building my button:
<telerik:RadButton
x:Name="xamlFullTextSearchButton"
Style="{StaticResource BlueOnWhiteButton}"
Grid.Column="2"
Grid.Row="0"
Content="CLICK ME"
CornerRadius="4"/>
With this, I don't even loose the clicking animation! It's perfect for what I need!
I have run into a few issues with gridcontrol.
I have to style and format a grid column with padding,colors,fonts and hover effects.
<Style x:Key="SelectedRowStyle" TargetType="{x:Type dxg:RowControl}">
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontFamily" Value="pack://application:,,,/PA.Tos.UI;component/ResourceDictionaries/#Brandon Grotesque Black" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Regular" />
<Style.Triggers>
<DataTrigger Binding="{Binding
ElementName=GroupCodeListView,Path=DataContext.SelectedGroupCode.Deleted,
UpdateSourceTrigger=PropertyChanged}" Value="true">
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="Black" />
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource HoverRowBorderColor}" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
<Trigger Property="dxg:GridViewBase.IsFocusedRow" Value="True">
<Setter Property="Background" Value="{StaticResource HoverRowBorderColor}" />
<Setter Property="BorderBrush" Value="{StaticResource HoverStrokeColor}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="CustomCellStyle" BasedOn="{StaticResource {dxgt:GridRowThemeKey
ResourceKey=LightweightCellStyle}}" TargetType="{x:Type dxg:LightweightCellEditor}">
<Setter Property="MaxHeight" Value="25"/>
<Setter Property="MinHeight" Value="25"/>
<Style.Triggers>
</Style.Triggers>
In response to a mouse hover or row selection, i have to set the border blue across all grid lines. Only the bottom grid line is blue as of
now from the above. Code applicable to cellcontent presenter won't be possible here.
In response to a trash icon clicked, i have to display light red background for the particular row.
I bind (viewmodel property)SelectedGroupCode.Deleted=true to the background.The binding is shown in the code.
but all rows are painted red except the row in question.
The grid lines width has to be set. i have managed to set it for the horizontal lines only using gridrowthemekey_rowcontrolcontainertemplate.
I assure you i have read through some previous threads but its taking too much time for a scrum sprint.
What is missing?
If you want to change the cell style in response to a mouse hover then you can use RelativeSource markup extension in DataTrigger's binding. If you want to check whether the row is focused, then you can use RowData.IsFocused property.
Here is example:
<Style x:Key="CustomCellStyle" TargetType="{x:Type dxg:LightweightCellEditor}" BasedOn="{StaticResource {dxgt:GridRowThemeKey ResourceKey=LightweightCellStyle}}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType={x:Type dxg:RowControl}}}" Value="True">
<Setter Property="BorderBrush" Value="Blue" />
</DataTrigger>
<DataTrigger Binding="{Binding RowData.IsFocused}" Value="true">
<Setter Property="BorderBrush" Value="Blue" />
</DataTrigger>
</Style.Triggers>
</Style>
For displaying custom style for particular row I suggest you to use Conditional Formatting.
Here is example:
<dxg:GridControl ...>
...
<dxg:GridControl.View>
<dxg:TableView>
<dxg:TableView.FormatConditions>
<dxg:FormatCondition Expression="[Deleted]" FieldName="Profit">
<dxc:Format Foreground="Red"/>
</dxg:FormatCondition>
</dxg:TableView.FormatConditions>
</dxg:TableView>
</dxg:GridControl.View>
</dxg:GridControl>
I have a style in a resource dictionary as so
<Style x:Key="heading" TargetType="Label">
<Setter Property="FontSize" Value="26" />
</Style>
and I wish to have it assigned to control if some trigger
condition is met. For example
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="Tag" Value="header" >
<Setter Property="FontSize" Value="26" />
</Trigger>
</Style.Triggers>
</Style>
works fine
<Style TargetType="Label">
<Style.Triggers>
<Trigger Property="Tag" Value="header" >
<Setter Property="Style" Value="{StaticResource heading}" />
</Trigger>
</Style.Triggers>
</Style>
gives an error that a Style trigger cannot change the Style property of the
associated target which sort of makes sense but is there a work around
for this?
The trick is to put the triggers into the resource dictionary not the Style like so
<Style TargetType="Label">
<Style.Triggers>
<StaticResource ResourceKey="headerTrigger"/>
</Style.Triggers>
</Style>
and define the trigger in a resource dictionary like so
<Trigger x:Key="headerTrigger" Property="Label.Tag" Value="header" >
<Setter Property="Label.FontWeight" Value="Bold"/>
<Setter Property="Label.BorderBrush" Value="Red"/>
<Setter Property="Label.BorderThickness" Value="2"/>
</Trigger>
I am trying to modify Extended WPF toolkit wizard control which is a Custom control it has a default style in generic.xaml file but now I want to modify it so based on Wizard type it changes its style completely
<Style TargetType="{x:Type local:Wizard}">
<Style.Triggers>
<Trigger Property="WizardType" Value="Normal">
<Setter Property="Style" Value="{StaticResource StandartWizardTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
this is how I have its generic.xaml modified but StandardWizardTemplate is not resolved during insistence
<Style x:Key="StandartWizardTemplate" TargetType="{x:Type local:Wizard}">
<Setter Property="Background" Value="#F0F0F0" />
<Setter Property="BorderBrush" Value="#A0A0A0" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
//Content of default template before modification
</Setter>
</Style>
Same file contains another style definition which changes Page ControlTemplate Based on trigger so I though I will be able to do the same thing for Wizard
<Style TargetType="{x:Type local:WizardPage}">
<Style.Triggers>
<Trigger Property="PageType" Value="Blank">
<Setter Property="Background" Value="#FFF0F0F0" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template" Value="{StaticResource BlankWizardPageTemplate}" />
</Trigger>
<Trigger Property="PageType" Value="Exterior">
<Setter Property="Background" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="ExteriorPanelBackground" Value="#E3EFFF" />
<Setter Property="Template" Value="{StaticResource ExteriorWizardPageTemplate}" />
</Trigger>
<Trigger Property="PageType" Value="Interior">
<Setter Property="Background" Value="#FFF0F0F0" />
<Setter Property="BorderBrush" Value="{x:Static SystemColors.ActiveBorderBrush}" />
<Setter Property="BorderThickness" Value="0,1,0,0" />
<Setter Property="HeaderBackground" Value="#FFFFFF" />
<Setter Property="Template" Value="{StaticResource InteriorWizardPageTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
Can anyone provide me with the right Styling implementation so that my Wizard Custom Control can be styled in the same way as Page does?
OK I found solution for this problem, All i had to do was to create new ResourceDictionary and declare Wizard ControlTemplate with key set. After that inside Generic.xaml I created Marge Resource Dictionary and included all separate Control template dictionaries inside
After All my generic.xaml looks in this way now.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Converters="clr-namespace:CuratioCMS.Client.UI.Core.Converters"
xmlns:local="clr-namespace:CuratioCMS.Client.UI.Controls">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="./NormalWizardStyle.xaml" />
<ResourceDictionary Source="./StepBased.xaml" />
<ResourceDictionary Source="./MixedModeWizard.xaml" />
</ResourceDictionary.MergedDictionaries>
<Converters:WizardPageButtonVisibilityConverter x:Key="WizardPageButtonVisibilityConverter" />
<Style TargetType="{x:Type local:Wizard}">
<Style.Triggers>
<Trigger Property="WizardType" Value="Normal">
<Setter Property="Template" Value="{StaticResource NormalModeWizardTemplate}" />
</Trigger>
<Trigger Property="WizardType" Value="StepWisivle">
<Setter Property="Template" Value="{StaticResource StepModeWizardTemplate}" />
</Trigger>
<Trigger Property="WizardType" Value="MixedMode">
<Setter Property="Template" Value="{StaticResource MixedModeWizardTemplate}" />
</Trigger>
</Style.Triggers>
<Setter Property="Background" Value="#F0F0F0" />
<Setter Property="BorderBrush" Value="#A0A0A0" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Working with a WPF datagrid, I need to comply with these requeriments:
Change row background when IsMouseOver.
Change row background to red when a critical property is met.
Change row background to violet when a row is selected, but not critical.
Change row background to dark red when a row is selected and critical.
I cannot met the last condition so far. My code right now is:
<Style x:Key="GridRow" TargetType="DataGridRow">
<Setter Property="FontSize" Value="10" />
<Setter Property="Foreground" Value="#000000" />
<Setter Property="Background" Value="#E5E5E5" />
<Setter Property="Height" Value="24" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F5F5F5" />
</Trigger>
<DataTrigger Binding="{Binding IsStatusCritical}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True">
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#660066" />
</Trigger>
</Style.Triggers>
</Style>
You can solve this using MultiDataTriggers. Just make sure that you place them in the correct order, as I recall, the last trigger that meets all criteria takes precedence.