I want to change Button's background linear gradient color,
the maintain code if Border.Background,
for Case 1
to impletenment must fix as follow
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />
</LinearGradientBrush>
for case 2
to impletenment must fix as follow
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="0" />
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0.5" />
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="1" />
</LinearGradientBrush>
How can I fix the Border.Background, to staticresource relation to
button style in xaml file
11/28 Update
I want to create 2 normal button, at the same application
how to using the key keyword to handle Border.Background.
As follow is whole code of button style
<!-- Button -->
<Style x:Key="ButtonW2B" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="MinHeight" Value="5" />
<Setter Property="MinWidth" Value="5" />
<Setter Property="Foreground" Value="DeepSkyBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border TextBlock.Foreground="{TemplateBinding Foreground}"
x:Name="Border"
CornerRadius="2"
BorderThickness="1">
<Border.BorderBrush> <!--外框顏色-->
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderMediumColor}" Offset="0" />
<GradientStop Color="{DynamicResource BorderLightColor}" Offset="0.5" />
<GradientStop Color="{DynamicResource BorderMediumColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<!--<Border.Background>-->
<!--按鍵底色-->
<!--<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />
</LinearGradientBrush>
</Border.Background>-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
<VisualTransition GeneratedDuration="0" To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource PressedBorderDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource PressedBorderLightColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledBorderDarkColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
When a datagrid row is expanded to show the Row Details, is there a way to change the colour of the very left most portion, that inherits the colouring from the parent row?
i.e. this bit: Row Details
I managed to work it out. The "Main" border being used to colour the normal/alternating row cells, and then a second sub border that handles the events - in this case for Selected/MouseOver_Selected.
Note: The Cyan was because I was testing, it is not a colour scheme choice!!! :-P
EDIT:
I have added some additional code, and another Border - I am then using ControlTemplate.Triggers set on multi to preserve the alternating row colours on a standard mouseover, thereby bypassing the visual state mouseover event entirely.
The overall result is to preserves my alternating colouring at all times - except when the row is selected, at which point I am dictating the colouring for the selected row and the row details.
<Style x:Key="GridRow"
TargetType="{x:Type DataGridRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="NormalBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Transparent" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="NormalBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="Black" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="NormalBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#BF322828" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal_AlternatingRow">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="NormalBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="Black" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="NormalBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="#BF642828" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Normal_Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="EventBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="Green" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="EventBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver_Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="EventBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="Green" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="EventBorder"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="Green" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal_Editing" />
<VisualState x:Name="MouseOver_Editing" />
<VisualState x:Name="MouseOver_Unfocused_Editing" />
<VisualState x:Name="Unfocused_Editing" />
<VisualState x:Name="Unfocused_Selected" />
<VisualState x:Name="MouseOver_Unfocused_Selected" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="EventBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Transparent" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Border x:Name="AnotherBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Transparent" />
<GradientStop Color="Transparent"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<DataGridDetailsPresenter Grid.Column="1"
Grid.Row="1"
Visibility="{TemplateBinding DetailsVisibility}"
SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
Converter={x:Static DataGrid.RowDetailsScrollingConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
<DataGridRowHeader Grid.RowSpan="1"
SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding HeadersVisibility,
ConverterParameter={x:Static DataGridHeadersVisibility.Row},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
</SelectiveScrollingGrid>
</Border>
</Border>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
<Condition Property="IsSelected"
Value="False" />
<Condition Property="AlternationIndex"
Value="0" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="AnotherBorder">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black" />
<GradientStop Color="#BF322828"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="True" />
<Condition Property="IsSelected"
Value="False" />
<Condition Property="AlternationIndex"
Value="1" />
</MultiTrigger.Conditions>
<Setter Property="Background"
TargetName="AnotherBorder">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black" />
<GradientStop Color="#BF642828"
Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
xaml file in my WPF showing this error :-
System.Windows.Markup.XamlParseException was unhandled
Message: An unhandled exception of type 'System.Windows.Markup.XamlParseException' occurred in PresentationFramework.dll
Additional information: 'Provide value on 'System.Windows.StaticResourceExtension' threw an exception.' Line number '42' and line position '60'.
Below is the code of Dictionary1.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:system="clr-namespace:System;assembly=mscorlib">
<!--xmlns:local="clr-namespace:HM.Desktop.Themes">-->
<!--Basic Brushes-->
<Color x:Key="PrimaryColor">#FF63AADA</Color>
<Color x:Key="SecondaryColor">#FFA0FCFF</Color>
<SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />
<SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}" />
<SolidColorBrush x:Key="TextBrush" Color="#FF152937" />
<SolidColorBrush x:Key="DisabledColor" Color="#8CFFFFFF" />
<SolidColorBrush x:Key="BackgroundBrush" Color="#FFFFFFFF" />
<LinearGradientBrush x:Key="MainBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCEDEFF" Offset="0" />
<GradientStop Color="#FF5A7CA0" Offset="0.992" />
<GradientStop Color="#FF5882A7" Offset="0.085" />
</LinearGradientBrush>
<SolidColorBrush x:Key="WaitingAnimationColor" Color="DarkBlue" />
<!-- Button -->
<Style TargetType="Button">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<!--<Setter Property="Background" Value="#00000000" />-->
<Setter Property="Background" Value="#000000FF" />
<Setter Property="Padding" Value="5,4" />
<Setter Property="Height" Value="35" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Button_Normal">
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#BF000000" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.3" />
<VisualTransition From="MouseOver" GeneratedDuration="00:00:00" To="Pressed" />
<VisualTransition From="MouseOver" GeneratedDuration="00:00:00.1" To="Normal" />
</VisualStateGroup.Transitions>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="Background"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="Shadow"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#4B000000" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
<SplineDoubleKeyFrame KeyTime="0"
Value=".1" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#4AFFFFFF" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.6" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FF000000" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFC8C8C8" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#4BFFFFFF" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.2" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFB1B1B1" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFECECEC" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFECECEC" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border CornerRadius="4"
Grid.RowSpan="2"
x:Name="White"
BorderBrush="#FFFFFFFF"
BorderThickness="1.2">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="1.35"
ScaleY="1.35" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF"
Offset="0" />
<GradientStop Color="#FFFFFFFF"
Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1.2"
CornerRadius="4"
x:Name="Background"
Grid.RowSpan="2"
Opacity="0.65">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1.4"
StartPoint="0.5,0">
<GradientStop Color="{StaticResource PrimaryColor}"
Offset="0.75" />
<GradientStop Color="{StaticResource SecondaryColor}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Background="{TemplateBinding Background}"
BorderBrush="#7FFFFFFF"
BorderThickness="1"
CornerRadius="3.5"
x:Name="InnerBorder"
Margin="1"
Grid.RowSpan="2" />
<Border CornerRadius="3.5"
x:Name="Shadow"
Margin="2"
Grid.RowSpan="2">
<Border.OpacityMask>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0"
Y="-0.5" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00FFFFFF"
Offset="0.3" />
<GradientStop Color="#FFFFFFFF"
Offset="1" />
</RadialGradientBrush>
</Border.OpacityMask>
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="1.75"
ScaleY="2.25" />
<TranslateTransform Y="0.65" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00000000"
Offset="0.55" />
<GradientStop Color="#33000000"
Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border Margin="1,1,1,0"
CornerRadius="4,4,40,40"
x:Name="Highlight"
Opacity="0.8"
RenderTransformOrigin="0.5,1">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="1.25"
ScaleY="2" />
<TranslateTransform Y="-0.6" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#BFFFFFFF"
Offset="0" />
<GradientStop Color="#4CFFFFFF"
Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
RenderTransformOrigin="0.5,0.5"
Grid.RowSpan="2" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Here is the code where error occurred in the line : <VisualState x:Name="Focused">
enter image description here
The Style you have provided works and I just tested it by creating a simple window. This style is not causing the issue. A Static Resource is being used before it is called is all the error states.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Color x:Key="PrimaryColor">#FF63AADA</Color>
<Color x:Key="SecondaryColor">#FFA0FCFF</Color>
<SolidColorBrush x:Key="PrimaryBrush" Color="{StaticResource PrimaryColor}" />
<SolidColorBrush x:Key="SecondaryBrush" Color="{StaticResource SecondaryColor}" />
<SolidColorBrush x:Key="TextBrush" Color="#FF152937" />
<SolidColorBrush x:Key="DisabledColor" Color="#8CFFFFFF" />
<SolidColorBrush x:Key="BackgroundBrush" Color="#FFFFFFFF" />
<LinearGradientBrush x:Key="MainBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFCEDEFF" Offset="0" />
<GradientStop Color="#FF5A7CA0" Offset="0.992" />
<GradientStop Color="#FF5882A7" Offset="0.085" />
</LinearGradientBrush>
<SolidColorBrush x:Key="WaitingAnimationColor" Color="DarkBlue" />
<!-- Button -->
<Style TargetType="Button">
<Setter Property="Foreground" Value="{StaticResource TextBrush}" />
<!--<Setter Property="Background" Value="#00000000" />-->
<Setter Property="Background" Value="#000000FF" />
<Setter Property="Padding" Value="5,4" />
<Setter Property="Height" Value="35" />
<Setter Property="FontSize" Value="14" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="BorderBrush" Value="{StaticResource PrimaryBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Button_Normal">
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused" />
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="InnerBorder"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="#BF000000" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="00:00:00.3" />
<VisualTransition From="MouseOver" GeneratedDuration="00:00:00" To="Pressed" />
<VisualTransition From="MouseOver" GeneratedDuration="00:00:00.1" To="Normal" />
</VisualStateGroup.Transitions>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="Background"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001" Storyboard.TargetName="Shadow"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#4B000000" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
<SplineDoubleKeyFrame KeyTime="0"
Value=".1" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#4AFFFFFF" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal" />
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.6" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FF000000" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFC8C8C8" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#4BFFFFFF" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.5" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.5" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="0"
Value="0.2" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFB1B1B1" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFECECEC" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Duration="00:00:00.001"
Storyboard.TargetName="White"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<SplineColorKeyFrame KeyTime="0"
Value="#FFECECEC" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border CornerRadius="4"
Grid.RowSpan="2"
x:Name="White"
BorderBrush="#FFFFFFFF"
BorderThickness="1.2">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="1.35"
ScaleY="1.35" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF"
Offset="0" />
<GradientStop Color="#FFFFFFFF"
Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1.2"
CornerRadius="4"
x:Name="Background"
Grid.RowSpan="2"
Opacity="0.65">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1.4"
StartPoint="0.5,0">
<GradientStop Color="{StaticResource PrimaryColor}"
Offset="0.75" />
<GradientStop Color="{StaticResource SecondaryColor}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Background="{TemplateBinding Background}"
BorderBrush="#7FFFFFFF"
BorderThickness="1"
CornerRadius="3.5"
x:Name="InnerBorder"
Margin="1"
Grid.RowSpan="2" />
<Border CornerRadius="3.5"
x:Name="Shadow"
Margin="2"
Grid.RowSpan="2">
<Border.OpacityMask>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0"
Y="-0.5" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00FFFFFF"
Offset="0.3" />
<GradientStop Color="#FFFFFFFF"
Offset="1" />
</RadialGradientBrush>
</Border.OpacityMask>
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="1.75"
ScaleY="2.25" />
<TranslateTransform Y="0.65" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00000000"
Offset="0.55" />
<GradientStop Color="#33000000"
Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<Border Margin="1,1,1,0"
CornerRadius="4,4,40,40"
x:Name="Highlight"
Opacity="0.8"
RenderTransformOrigin="0.5,1">
<Border.Background>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5"
CenterY="0.5"
ScaleX="1.25"
ScaleY="2" />
<TranslateTransform Y="-0.6" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#BFFFFFFF"
Offset="0" />
<GradientStop Color="#4CFFFFFF"
Offset="1" />
</RadialGradientBrush>
</Border.Background>
</Border>
<ContentPresenter x:Name="contentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
RenderTransformOrigin="0.5,0.5"
Grid.RowSpan="2" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="test" Height="50" Width="100"/>
</Grid>
I try to edit style in wpf like this :
which allow the user design, like this
but when i try to create my own style there is chrome layer not Template and I can not create my own button, I can only modify simple value like brush , ......
Milad just remove that chrome layer and include border in the template (write your own triggers for mouseover and click):
<Border x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
Triggers:
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="Chrome" Value="Blue"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
Very detailed canonical example of WPF Button control styling via XAML is provided in Micrsoft MSDN (https://msdn.microsoft.com/en-us/library/ms753328%28v=vs.110%29.aspx):
XAML
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="2"
StrokeThickness="1"
Stroke="#60000000"
StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Button -->
<Style TargetType="Button">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="FocusVisualStyle"
Value="{StaticResource ButtonFocusVisual}" />
<Setter Property="MinHeight"
Value="23" />
<Setter Property="MinWidth"
Value="75" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border TextBlock.Foreground="{TemplateBinding Foreground}"
x:Name="Border"
CornerRadius="2"
BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BorderLightColor}"
Offset="0.0" />
<GradientStop Color="{DynamicResource BorderDarkColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
<VisualTransition GeneratedDuration="0"
To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource PressedBorderDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource PressedBorderLightColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledBorderDarkColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefault"
Value="true">
<Setter TargetName="Border"
Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource DefaultBorderBrushLightBrush}"
Offset="0.0" />
<GradientStop Color="{DynamicResource DefaultBorderBrushDarkColor}"
Offset="1.0" />
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
RESOURCES
<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>
<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>
<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>
<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>
<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>
<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>
<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>
<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>
<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>
<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>
<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>
<LinearGradientBrush x:Key="MenuPopupBrush"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="0.5" />
<GradientStop Color="{DynamicResource ControlLightColor}"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#000000FF"
Offset="0" />
<GradientStop Color="#600000FF"
Offset="0.4" />
<GradientStop Color="#600000FF"
Offset="0.6" />
<GradientStop Color="#000000FF"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
Hope this may help.
I'm trying to dynamically change a Border Background property named "Brush2", but I get the following error.
Unable to cast object of type 'System.Windows.Media.Color' to type
'System.Windows.Media.Brush'.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="Brush0">#7F605F5F</Color>
<Color x:Key="Brush1">#7F7E7E7E</Color>
<Color x:Key="Color2">#7FFDFDFD</Color>
<SolidColorBrush x:Key="Brush2" Color="{DynamicResource Color2}" />
<Color x:Key="Brush3">#7FFFFFFF</Color>
<Color x:Key="Brush4">#BFFFFFFF</Color>
<Color x:Key="Brush5">#F2FFFFFF</Color>
<Color x:Key="Brush6">#FF6096E5</Color>
<Color x:Key="Brush7">#FF9B7C35</Color>
<Color x:Key="Brush8">#FFB0BAA1</Color>
<Color x:Key="Brush9">#7F60605F</Color>
<Color x:Key="Brush10">White</Color>
<Style TargetType="{x:Type TabItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<!-- silver -->
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush8}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush8}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush0}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush9}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<!-- bronze -->
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush7}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush7}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush0}"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="{DynamicResource Brush9}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Flashing">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="BorderGlass"
Storyboard.TargetProperty="Opacity"
From="0.0"
To="1.0"
Duration="0:0:0.33"
AutoReverse="True"
RepeatBehavior="Forever"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" BorderThickness="3" CornerRadius="5,5,0,0">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource Brush0}" Offset="0"/>
<GradientStop Color="{DynamicResource Brush1}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource Brush6}" Offset="0.004"/>
<GradientStop Color="{DynamicResource Brush6}" Offset="0.823"/>
<GradientStop Color="{DynamicResource Brush10}" Offset="0.228"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border x:Name="BorderGlass" BorderThickness="3" CornerRadius="5,5,0,0" Background="{DynamicResource Brush2}">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource Brush3}" Offset="0"/>
<GradientStop Color="{DynamicResource Brush4}" Offset="0.401"/>
<GradientStop Color="{DynamicResource Brush5}" Offset="0.254"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<ContentPresenter HorizontalAlignment="Center" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center" ContentSource="Header"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
What you need to do is set the brush to something like a solidcolorbrush object. http://msdn.microsoft.com/en-us/library/system.windows.media.solidcolorbrush.aspx
The constructor takes a color object.
The following code works, but I had to do this:
Uri uri2 = new Uri("/Resources/DayModeTab2.xaml", UriKind.Relative);
ResourceDictionary resDict2 = Application.LoadComponent(uri2) as ResourceDictionary;
//Make some changes
MobileApp.Get().Resources.MergedDictionaries.Add(resDict2);
And also my poor naming scheme caused conflicts since I have Brush0 in 2 xaml files.
<Border x:Name="BorderGlass" BorderThickness="3" CornerRadius="5,5,0,0" >
<Border.Background>
<SolidColorBrush Color="{DynamicResource Color2}" />
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource Brush3}" Offset="0"/>
<GradientStop Color="{DynamicResource Brush4}" Offset="0.401"/>
<GradientStop Color="{DynamicResource Brush5}" Offset="0.254"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
I have a problem with a button control with rolloever effect. I am collapsing the button on click and later it becomes visible again, but the Mouse Hover state doesn't change back to Normal when the button becomes visible. However the issue can be resolved by changing the visual state in code but I w'd like to know if there is a way to do it in the control template?
Here is my template:
<Style x:Key="replayButton" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Cursor="Hand" Height="48" Margin="0,0,0,0" Width="48">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal">
<Storyboard Storyboard.TargetName="bgImg" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="images/repeat.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="MouseOver">
<Storyboard Storyboard.TargetName="bgImg" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="images/repeat-hover.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard Storyboard.TargetName="bgImg" Storyboard.TargetProperty="Source">
<ObjectAnimationUsingKeyFrames>
<DiscreteObjectKeyFrame KeyTime="0" Value="images/repeat-hover.png"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard/>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard/>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border Height="48" Margin="0,0,0,0" x:Name="Background" Width="48" Background="{x:Null}" CornerRadius="0,0,0,0">
<Grid Height="48" Margin="0,0,0,0" Width="48">
<Image x:Name="bgImg" Height="48" Margin="0,0,0,0" VerticalAlignment="Bottom" Source="images/repeat.png" Stretch="Fill" Width="48"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
VisualStateManager.GoToState(myControl, "Normal", true) on visibility change.
You can subscribe to the VisibilityChanged event