I'm currently working on a WPF application that allows the user to change its theme during runtime (without any restart). I'm currently using the code from here:
http://svetoslavsavov.blogspot.de/2009/07/switching-wpf-interface-themes-at.html
I modified it with a Try statement:
private static void ApplyTheme(FrameworkElement targetElement, Uri dictionaryUri)
{
if (targetElement == null) return;
try
{
ResourceDictionary themeDictionary = null;
if (dictionaryUri != null)
{
themeDictionary = new ResourceDictionary();
themeDictionary.Source = dictionaryUri;
targetElement.Resources.MergedDictionaries.Insert(0, themeDictionary);
}
List<ResourceDictionary> existingDictionaries =
(from dictionary in targetElement.Resources.MergedDictionaries.OfType<ResourceDictionary>()
select dictionary).ToList();
foreach (ResourceDictionary thDictionary in existingDictionaries)
{
if (themeDictionary == thDictionary) continue;
try
{
targetElement.Resources.MergedDictionaries.Remove(thDictionary);
}
catch { }
}
}
finally { }
}
But it doesn't really work if I have styled ScrollBars in my application. The first time it always turns the same ComboBox into a rectangle and you can't use it anymore:
http://goo.gl/eNC2m0
The second time it throws an exception:
Unable to cast object of type 'MS.Internal.NamedObject' to type 'System.Windows.FrameworkTemplate'.
If I remove the Try statement, it already throws the exception on the first time.
The ScrollBar style looks like this:
<!-- Colors -->
<Color x:Key="Accent">#FFFEB809</Color>
<SolidColorBrush x:Key="AccentBrush" Color="{StaticResource Accent}"/>
<Color x:Key="AccentConsole">#22FEB809</Color>
<SolidColorBrush x:Key="AccentConsoleBrush" Color="{StaticResource AccentConsole}"/>
<Color x:Key="AccentLight">#FFFFDB82</Color>
<SolidColorBrush x:Key="AccentLightBrush" Color="{StaticResource AccentLight}"/>
<Color x:Key="AccentLightConsole">#22FFDB82</Color>
<SolidColorBrush x:Key="AccentLightConsoleBrush" Color="{StaticResource AccentLightConsole}"/>
<Color x:Key="AccentText">#FFFFFFFF</Color>
<SolidColorBrush x:Key="AccentTextBrush" Color="{StaticResource AccentText}"/>
<Color x:Key="Border">#FFCCCCCC</Color>
<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource Border}"/>
<Color x:Key="CaptionBar">#FFFCFCFC</Color>
<SolidColorBrush x:Key="CaptionBarBrush" Color="{StaticResource CaptionBar}"/>
<Color x:Key="ConsoleBackground">#FF222222</Color>
<SolidColorBrush x:Key="ConsoleBackgroundBrush" Color="{StaticResource ConsoleBackground}"/>
<Color x:Key="ControlBackground">White</Color>
<SolidColorBrush x:Key="ControlBackgroundBrush" Color="{StaticResource ControlBackground}"/>
<Color x:Key="NavigationHeader">#88000000</Color>
<SolidColorBrush x:Key="NavigationHeaderBrush" Color="{StaticResource NavigationHeader}"/>
<Color x:Key="Window">#FFFAFAFA</Color>
<SolidColorBrush x:Key="WindowBrush" Color="{StaticResource Window}"/>
<Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Margin" Value="2"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="Template" Value="{StaticResource HorizontalScrollBar}"/>
<Setter Property="Height" Value="24"/>
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource VerticalScrollBar}"/>
<Setter Property="Width" Value="24"/>
</Trigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="HorizontalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Border Background="#22000000" CornerRadius="4">
<Track Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageLeftCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<!-- The problem occurs here -->
<Thumb Style="{StaticResource HorizontalScrollBarThumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageRightCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Border>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="VerticalScrollBar" TargetType="{x:Type ScrollBar}">
<Grid>
<Border Background="#22000000" CornerRadius="4">
<Track Name="PART_Track" IsDirectionReversed="True">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageUpCommand"/>
</Track.DecreaseRepeatButton>
<Track.Thumb>
<!-- The problem occurs here -->
<Thumb Style="{StaticResource VerticalScrollBarThumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource ScrollBarPageButton}" Command="ScrollBar.PageDownCommand"/>
</Track.IncreaseRepeatButton>
</Track>
</Border>
</Grid>
</ControlTemplate>
<Style x:Key="HorizontalScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Semibold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="24"/>
</Grid.ColumnDefinitions>
<RepeatButton Style="{StaticResource LeftScrollBarLineButton}" Command="ScrollBar.LineLeftCommand"/>
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="0,1,0,1" Grid.Column="1">
<TextBlock Text="" FontFamily="Segoe UI Symbol" Foreground="#FF585858" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<RepeatButton Style="{StaticResource RightScrollBarLineButton}" Command="ScrollBar.LineRightCommand" Grid.Column="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="VerticalScrollBarThumb" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Semibold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="24"/>
<RowDefinition Height="*"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<RepeatButton Style="{StaticResource TopScrollBarLineButton}" Command="ScrollBar.LineUpCommand"/>
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" BorderThickness="1,0,1,0" Grid.Row="1">
<TextBlock Text="" FontFamily="Segoe UI Symbol" Foreground="#FF585858" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<RepeatButton Style="{StaticResource BottomScrollBarLineButton}" Command="ScrollBar.LineDownCommand" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="LeftScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="4,0,0,4" BorderThickness="1,1,0,1">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.RelativeTransform>
<RotateTransform Angle="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="{StaticResource AccentLight}" Offset="0"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RightScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="0,4,4,0" BorderThickness="0,1,1,1">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.RelativeTransform>
<RotateTransform Angle="90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="{StaticResource AccentLight}" Offset="0"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TopScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="4,4,0,0" BorderThickness="1,1,1,0">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="{StaticResource AccentLight}" Offset="0"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BottomScrollBarLineButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border Name="Base" Background="{StaticResource ControlBackgroundBrush}" BorderBrush="{StaticResource BorderBrush}" CornerRadius="0,0,4,4" BorderThickness="1,0,1,1">
<TextBlock Text="" Foreground="{TemplateBinding Foreground}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Base" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="{StaticResource AccentLight}" Offset="1"/>
<GradientStop Color="{StaticResource ControlBackground}" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButton" TargetType="{x:Type RepeatButton}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Foreground" Value="#FF585858"/>
<Setter Property="FontFamily" Value="Segoe UI Semibold"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="Padding" Value="8"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Border/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But when I replace <Thumb Style="{StaticResource HorizontalScrollBarThumb}"/> and <Thumb Style="{StaticResource VerticalScrollBarThumb}"/> with <Thumb/> it works.
I just can't find anything in the Thumb styles that could cause this problem.
Thanks for your help.
This is because of the order of templates. Just change the order of the templates as given in following image. StaticResources should be parsed before it is referred in XAML.
Also the XAML code you pasted above missing some brush resources like AccentLight,ControlBackgroundBrush. I don't know whether those resources defined in your application in the proper hierarchy. Check that also.
Related
I've tried to create Style resources for the WPF application I'm developing based on a style guide presented to me from a UI/UX design house. After setting window and control background color to the desired shade of blue, I'm seeing the following:
ListView headers have a white background
For a TabControl, the selected TabItem header background is white while I need to set it to a different shade of blue
The border for a PopUp for a button context menu is thick and an arbitrary gray color
I successfully created a default Button Style resource, which excludes the "x:Key" attribute and then created a different Button Style for "Primary" buttons. However, the Primary Button Style doesn't fully work, as the text background color is wrong and the text is in the upper lefthand corner of the button.
For ToolBar controls, the overflow button is white rather than the blue color I set for the ToolBar Background
I've performed exhaustive searches to find examples of Style resources to fix these issues, none of them fixed these issues. The only things I've found were what I'll call inline styles for declared controls in a Window. I tried copying the ControlTemplates from these examples to use in my global resource Style, to no avail.
What I'm figuring out is that most WPF Controls have multiple "parts" that need to have their ContentPresenter set. I've found nothing from Microsoft or anywhere else that explains that for each type of WPF Control.
I've attached a couple of images that show the issues I'm having.
Here is the xaml for my Control ResourceDictionary:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--The Primary Button Variant-->
<Style TargetType="Button" x:Key="PrimaryButton">
<Setter Property="Padding" Value="1" />
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Foreground" Value="{StaticResource whiteBrush}" />
<Setter Property="Background" Value="{StaticResource teal-1Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource button-priimary-borderBrush}" />
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="0"/>
<ContentPresenter
x:Name="cp"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource bluegreenBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource bluegreenBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource petrolBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource metallic-blueBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--The Standard Button Variant-->
<Style TargetType="Button">
<Setter Property="Padding" Value="1" />
<Setter Property="Foreground" Value="{StaticResource whiteBrush}" />
<Setter Property="Background" Value="{StaticResource teal-3Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource button-standard-borderBrush}" />
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="0"/>
<ContentPresenter
x:Name="cp"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource dark-tealBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource button-standard-borderBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource deep-tealBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource steel-greyBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource teal-3Brush}" />
<Setter Property="BorderBrush" Value="{StaticResource dark-grey-blueBrush}"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="{StaticResource teal-3Brush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--The Image Radius Button-->
<Style x:Key="ImageRadiusButton"
TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="5"/>
<ContentPresenter
x:Name="cp"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--The Image Button-->
<Style x:Key="ImageButton"
TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}" />
<ContentPresenter
x:Name="cp"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--The Combo Box-->
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="0"
Background="{StaticResource blue-2Brush}"
BorderBrush="{StaticResource button-standard-borderBrush}"
BorderThickness="1" />
<Border
Grid.Column="0"
CornerRadius="0,0,0,0"
Background="{StaticResource blue-2Brush}"
BorderBrush="Transparent"
BorderThickness="1" />
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{StaticResource whiteBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="LightGray" />
<Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter Property="Foreground" Value="DarkGray"/>
<Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" Height="25" BorderThickness="0" Background="Transparent" />
</ControlTemplate>
<Style TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="8,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{TemplateBinding Text}"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
Foreground="{StaticResource whiteBrush}"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="{StaticResource blue-2Brush}"
BorderThickness="1"
BorderBrush="{StaticResource button-standard-borderBrush}"/>
<ScrollViewer Margin="4,0,0,0" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
<Trigger Property="IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0,0,0,0"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
</Trigger>
<Trigger Property="IsEditable" Value="True">
<Setter Property="IsTabStop" Value="False"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource navyBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource dark-grey-blueBrush}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource dark-tealBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource button-standard-borderBrush}"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="{StaticResource teal-3Brush}"/>
<Setter Property="BorderBrush" Value="{StaticResource whiteBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--The ToolBar-->
<Style TargetType="ToolBar">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
</Style>
<!--The TextBlock-->
<Style TargetType="TextBlock">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource whiteBrush}"/>
</Style>
<!--The TextBox-->
<Style TargetType="TextBox">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource whiteBrush}"/>
</Style>
<!--The CheckBox-->
<Style TargetType="CheckBox">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource whiteBrush}"/>
</Style>
<Style TargetType="StackPanel">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
</Style>
<Style TargetType="TabControl">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource blackBrush}"/>
</Style>
<Style TargetType="TabPanel">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
</Style>
<Style TargetType="TabItem">
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource blackBrush}"/>
</Style>
<BorderGapMaskConverter x:Key="BorderGapMaskConverter"/>
<Style TargetType="{x:Type GroupBox}">
<Setter Property="BorderBrush" Value="{StaticResource blackBrush}" />
<Setter Property="Background" Value="{StaticResource WindowBackgroundBrush}"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="6" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="6" />
</Grid.RowDefinitions>
<Border CornerRadius="4" Grid.Row="1" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="4" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent" Background="{TemplateBinding Background}" />
<Border Name="Header" Padding="3,1,3,0" Grid.Row="0" Grid.RowSpan="2" Grid.Column="1">
<ContentPresenter ContentSource="Header" RecognizesAccessKey="true" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ContentPresenter Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Border Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="3">
<Border.OpacityMask>
<MultiBinding Converter="{StaticResource BorderGapMaskConverter}" ConverterParameter="7">
<Binding ElementName="Header" Path="ActualWidth" />
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}" />
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}" />
</MultiBinding>
</Border.OpacityMask>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the Color ResourceDictionary:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="black">#FF000000</Color>
<Color x:Key="blue-1">#FF002F50</Color>
<Color x:Key="blue-2">#FF001E33</Color>
<Color x:Key="blue-3">#FF00121D</Color>
<Color x:Key="bluegreen">#FF007080</Color>
<Color x:Key="button-priimary-border">#FFA3B6C3</Color>
<Color x:Key="button-standard-border">#FF61686C</Color>
<Color x:Key="dark-grey-blue">#FF314C5E</Color>
<Color x:Key="dark-teal">#FF003B51</Color>
<Color x:Key="deep-teal">#FF004B61</Color>
<Color x:Key="green">#FF6DD400</Color>
<Color x:Key="light-blue">#FF90AFC4</Color>
<Color x:Key="marine-blue">#FF002F50</Color>
<Color x:Key="metallic-blue">#FF527389</Color>
<Color x:Key="navy">#FF002741</Color>
<Color x:Key="petrol">#FF005D77</Color>
<Color x:Key="pinkish-grey-78">#C8BFBFBF</Color>
<Color x:Key="red-1">#FFFF001B</Color>
<Color x:Key="red-2">#FFFF5466</Color>
<Color x:Key="steel-grey">#FF80868A</Color>
<Color x:Key="teal-1">#FF008B9F</Color>
<Color x:Key="teal-2">#FF006F7F</Color>
<Color x:Key="teal-3">#FF001E33</Color>
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="{StaticResource blue-1}"/>
<SolidColorBrush x:Key="blackBrush"
Color="{StaticResource black}" />
<SolidColorBrush x:Key="blue-1Brush"
Color="{StaticResource blue-1}" />
<SolidColorBrush x:Key="blue-2Brush"
Color="{StaticResource blue-2}" />
<SolidColorBrush x:Key="blue-3Brush"
Color="{StaticResource blue-3}" />
<SolidColorBrush x:Key="bluegreenBrush"
Color="{StaticResource bluegreen}" />
<SolidColorBrush x:Key="button-priimary-borderBrush"
Color="{StaticResource button-priimary-border}" />
<SolidColorBrush x:Key="button-standard-borderBrush"
Color="{StaticResource button-standard-border}" />
<SolidColorBrush x:Key="dark-grey-blueBrush"
Color="{StaticResource dark-grey-blue}" />
<SolidColorBrush x:Key="dark-tealBrush"
Color="{StaticResource dark-teal}" />
<SolidColorBrush x:Key="deep-tealBrush"
Color="{StaticResource deep-teal}" />
<SolidColorBrush x:Key="greenBrush"
Color="{StaticResource green}" />
<SolidColorBrush x:Key="light-blueBrush"
Color="{StaticResource light-blue}" />
<SolidColorBrush x:Key="marine-blueBrush"
Color="{StaticResource marine-blue}" />
<SolidColorBrush x:Key="metallic-blueBrush"
Color="{StaticResource metallic-blue}" />
<SolidColorBrush x:Key="navyBrush"
Color="{StaticResource navy}" />
<SolidColorBrush x:Key="petrolBrush"
Color="{StaticResource petrol}" />
<SolidColorBrush x:Key="pinkish-grey-78Brush"
Color="{StaticResource pinkish-grey-78}" />
<SolidColorBrush x:Key="red-1Brush"
Color="{StaticResource red-1}" />
<SolidColorBrush x:Key="red-2Brush"
Color="{StaticResource red-2}" />
<SolidColorBrush x:Key="steel-greyBrush"
Color="{StaticResource steel-grey}" />
<SolidColorBrush x:Key="teal-1Brush"
Color="{StaticResource teal-1}" />
<SolidColorBrush x:Key="teal-2Brush"
Color="{StaticResource teal-2}" />
<SolidColorBrush x:Key="teal-3Brush"
Color="{StaticResource teal-3}" />
<SolidColorBrush x:Key="whiteBrush" Color="White"/>
I took #AndrewStevens advice and re-templated all of the global controls successfully, EXCEPT that I'm having 2 issues with my Button style:
The weirdest thing is that a single button out of dozens in my app so far doesn't have any of the templating applied.
I've been unable to set the text color for the button when IsEnabled="False".
I've done my usual plethora of Google searches to no avail for either of these issues.
If anybody has any clue on either of these, I'd appreciate the help.
Here is the Button style:
<Style TargetType="Button">
<Setter Property="Padding" Value="1" />
<Setter Property="Foreground" Value="{StaticResource StandardButtonRestTextBrush}" />
<Setter Property="Background" Value="{StaticResource StandardButtonRestBackGroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource StandardButtonRestBorderBrush}" />
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border
x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="0">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource StandardButtonHoverBackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource StandardButtonHoverBorderBrush}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource StandardButtonPressedBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource StandardButtonPressedBorderBrush}"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" Value="{StaticResource StandardButtonFocusBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource WhiteBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="{StaticResource StandardButtonDisabledBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource StandardButtonDisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And, here is the Colors ResourceDictionary:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Color x:Key="black">#FF000000</Color>
<Color x:Key="blue-1">#FF002F50</Color>
<Color x:Key="blue-2">#FF001E33</Color>
<Color x:Key="blue-3">#FF00121D</Color>
<Color x:Key="bluegreen">#FF007080</Color>
<Color x:Key="button-priimary-border">#FFA3B6C3</Color>
<Color x:Key="button-standard-border">#FF61686C</Color>
<Color x:Key="dark-grey-blue">#FF314C5E</Color>
<Color x:Key="dark-teal">#FF003B51</Color>
<Color x:Key="deep-teal">#FF004B61</Color>
<Color x:Key="green">#FF6DD400</Color>
<Color x:Key="light-blue">#FF90AFC4</Color>
<Color x:Key="marine-blue">#FF002F50</Color>
<Color x:Key="metallic-blue">#FF527389</Color>
<Color x:Key="navy">#FF002741</Color>
<Color x:Key="petrol">#FF005D77</Color>
<Color x:Key="pinkish-grey-78">#C8BFBFBF</Color>
<Color x:Key="red-1">#FFFF001B</Color>
<Color x:Key="red-2">#FFFF5466</Color>
<Color x:Key="steel-grey">#FF80868A</Color>
<Color x:Key="teal-1">#FF008B9F</Color>
<Color x:Key="teal-2">#FF006F7F</Color>
<Color x:Key="teal-3">#FF001E33</Color>
<Color x:Key="defaultTextColor">#FFFFFFFF</Color>
<Color x:Key="disabledTextColor">#A19F9D</Color>
<Color x:Key="windowSectionBorderColor">#001E33</Color>
<Color x:Key="transparentColor">Transparent</Color>
<Color x:Key="disabledBackgroundColor">#FF001E33</Color>
<Color x:Key="windowBackgroundColor">#FF002F50</Color>
<Color x:Key="defaultFocusBorder">White</Color>
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="{StaticResource blue-1}"/>
<SolidColorBrush x:Key="TransparentBrush" Color="{StaticResource transparentColor}"/>
<SolidColorBrush x:Key="WhiteBrush" Color="White"/>
<SolidColorBrush x:Key="disabledBorderBrush" Color="#A19F9D"/>
<SolidColorBrush x:Key="DefaultHeaderGroundBrush" Color="{StaticResource teal-3}"/>
<SolidColorBrush x:Key="defaultTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="disabledTextBrush" Color="{StaticResource disabledTextColor}"/>
<SolidColorBrush x:Key="windowSectionBorderBrush" Color="{StaticResource windowSectionBorderColor}"/>
<!--The Primary Button Brushes-->
<SolidColorBrush x:Key="PrimaryButtonRestBackGroundBrush" Color="{StaticResource teal-1}"/>
<SolidColorBrush x:Key="PrimaryButtonRestBorderBrush" Color="{StaticResource button-priimary-border}"/>
<SolidColorBrush x:Key="PrimaryButtonRestTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="PrimaryButtonFocusBackgroundBrush" Color="{StaticResource teal-1}"/>
<SolidColorBrush x:Key="PrimaryButtonFocusBorderBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="PrimaryButtonFocusTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="PrimaryButtonPressedBorderBrush" Color="{StaticResource button-priimary-border}"/>
<SolidColorBrush x:Key="PrimaryButtonPressedBackgroundBrush" Color="{StaticResource bluegreen}"/>
<SolidColorBrush x:Key="PrimaryButtonPressedTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="PrimaryButtonHoverBorderBrush" Color="{StaticResource button-priimary-border}"/>
<SolidColorBrush x:Key="PrimaryButtonHoverBackgroundBrush" Color="{StaticResource bluegreen}"/>
<SolidColorBrush x:Key="PrimaryButtonHoverTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="PrimaryButtonDisabledBorderBrush" Color="{StaticResource button-priimary-border}"/>
<SolidColorBrush x:Key="PrimaryButtonDisabledBackgroundBrush" Color="{StaticResource petrol}"/>
<SolidColorBrush x:Key="PrimaryButtonDisabledTextBrush" Color="{StaticResource disabledTextColor}"/>
<!--The Standard Button Brushes-->
<SolidColorBrush x:Key="StandardButtonRestBackGroundBrush" Color="{StaticResource teal-3}"/>
<SolidColorBrush x:Key="StandardButtonRestBorderBrush" Color="{StaticResource button-standard-border}"/>
<SolidColorBrush x:Key="StandardButtonRestTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="StandardButtonFocusBackgroundBrush" Color="{StaticResource teal-3}"/>
<SolidColorBrush x:Key="StandardButtonFocusBorderBrush" Color="White"/>
<SolidColorBrush x:Key="StandardButtonFocusTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="StandardButtonPressedBorderBrush" Color="{StaticResource steel-grey}"/>
<SolidColorBrush x:Key="StandardButtonPressedBackgroundBrush" Color="{StaticResource teal-2}"/>
<SolidColorBrush x:Key="StandardButtonPressedTextBrush" Color="White"/>
<SolidColorBrush x:Key="StandardButtonHoverBorderBrush" Color="{StaticResource button-standard-border}"/>
<SolidColorBrush x:Key="StandardButtonHoverBackgroundBrush" Color="{StaticResource dark-teal}"/>
<SolidColorBrush x:Key="StandardButtonHoverTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="StandardButtonDisabledBorderBrush" Color="{StaticResource dark-grey-blue}"/>
<SolidColorBrush x:Key="StandardButtonDisabledBackgroundBrush" Color="{StaticResource teal-3}"/>
<SolidColorBrush x:Key="StandardButtonDisabledTextBrush" Color="{StaticResource disabledTextColor}"/>
<!--The ComboBox Colors-->
<SolidColorBrush x:Key="ComboBoxRestBackgroundBrush" Color="{StaticResource blue-2}"/>
<SolidColorBrush x:Key="ComboBoxRestBorderBrush" Color="{StaticResource button-standard-border}"/>
<SolidColorBrush x:Key="ComboBoxRestTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="ComboBoxFocusBackgroundBrush" Color="{StaticResource teal-3}"/>
<SolidColorBrush x:Key="ComboBoxFocusBorderBrush" Color="White"/>
<SolidColorBrush x:Key="ComboBoxFocusTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="ComboBoxHoverBackgroundBrush" Color="{StaticResource dark-teal}"/>
<SolidColorBrush x:Key="ComboBoxHoverBorderBrush" Color="{StaticResource button-standard-border}"/>
<SolidColorBrush x:Key="ComboBoxHoverTextrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="ComboBoxPressedBackgroundBrush" Color="{StaticResource deep-teal}"/>
<SolidColorBrush x:Key="ComboBoxPressedBorderBrush" Color="{StaticResource steel-grey}"/>
<SolidColorBrush x:Key="ComboBoxPressedTextBrush" Color="{StaticResource defaultTextColor}"/>
<SolidColorBrush x:Key="ComboBoxDiabledBackgroundBrush" Color="{StaticResource navy}"/>
<SolidColorBrush x:Key="ComboBoxDiabledBorderBrush" Color="{StaticResource dark-grey-blue}"/>
<SolidColorBrush x:Key="ComboBoxDisabledTextBrush" Color="{StaticResource disabledTextColor}"/>
<!--The root brushes-->
<SolidColorBrush x:Key="blackBrush"
Color="{StaticResource black}" />
<SolidColorBrush x:Key="blue-1Brush"
Color="{StaticResource blue-1}" />
<SolidColorBrush x:Key="blue-2Brush"
Color="{StaticResource blue-2}" />
<SolidColorBrush x:Key="blue-3Brush"
Color="{StaticResource blue-3}" />
<SolidColorBrush x:Key="bluegreenBrush"
Color="{StaticResource bluegreen}" />
<SolidColorBrush x:Key="button-priimary-borderBrush"
Color="{StaticResource button-priimary-border}" />
<SolidColorBrush x:Key="button-standard-borderBrush"
Color="{StaticResource button-standard-border}" />
<SolidColorBrush x:Key="dark-grey-blueBrush"
Color="{StaticResource dark-grey-blue}" />
<SolidColorBrush x:Key="dark-tealBrush"
Color="{StaticResource dark-teal}" />
<SolidColorBrush x:Key="deep-tealBrush"
Color="{StaticResource deep-teal}" />
<SolidColorBrush x:Key="greenBrush"
Color="{StaticResource green}" />
<SolidColorBrush x:Key="light-blueBrush"
Color="{StaticResource light-blue}" />
<SolidColorBrush x:Key="marine-blueBrush"
Color="{StaticResource marine-blue}" />
<SolidColorBrush x:Key="metallic-blueBrush"
Color="{StaticResource metallic-blue}" />
<SolidColorBrush x:Key="navyBrush"
Color="{StaticResource navy}" />
<SolidColorBrush x:Key="petrolBrush"
Color="{StaticResource petrol}" />
<SolidColorBrush x:Key="pinkish-grey-78Brush"
Color="{StaticResource pinkish-grey-78}" />
<SolidColorBrush x:Key="red-1Brush"
Color="{StaticResource red-1}" />
<SolidColorBrush x:Key="red-2Brush"
Color="{StaticResource red-2}" />
<SolidColorBrush x:Key="steel-greyBrush"
Color="{StaticResource steel-grey}" />
<SolidColorBrush x:Key="teal-1Brush"
Color="{StaticResource teal-1}" />
<SolidColorBrush x:Key="teal-2Brush"
Color="{StaticResource teal-2}" />
<SolidColorBrush x:Key="teal-3Brush"
Color="{StaticResource teal-3}" />
</ResourceDictionary>
I am trying to style some tabs but I ran into this issue where the color of the border changes as I resize window. First of all, I used this http://blogs.intuidev.com/post/2010/01/25/TabControlStyling_PartOne.aspx to style the tabs if you're wondering about the code.
Also, here is the pic of what's wrong.
EDIT:
<Color x:Key="BorderColor_Base">#888</Color>
<Color x:Key="TabControl_BackgroundColor_Base">#CCC</Color>
<SolidColorBrush x:Key="TabControl_BackgroundBrush_Base"
Color="{StaticResource TabControl_BackgroundColor_Base}"/>
<LinearGradientBrush x:Key="TabItemPanel_BackgroundBrush"
StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent"/>
<GradientStop Offset="0.99"
Color="{StaticResource BorderColor_Base}"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="TabItem_BorderBrush_Selected"
Color="{StaticResource BorderColor_Base}" />
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="10*"/>
</Grid.RowDefinitions>
<Border Background="{StaticResource TabItemPanel_BackgroundBrush}"
Padding="{StaticResource TabItemPanel_Padding}">
<TabPanel Grid.Row="0" IsItemsHost="True"/>
</Border>
<ContentPresenter Grid.Row="1" ContentSource="SelectedContent"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Background="{StaticResource TabControl_BackgroundBrush_Base}"
BorderBrush="{StaticResource TabItem_BorderBrush_Selected}"
Margin="{StaticResource TabItemMargin_Selected}"
BorderThickness="2,1,1,1">
<!-- This is where the Content of the TabItem will be rendered. -->
<Viewbox>
<TextBlock x:Name="Header">
<ContentPresenter x:Name="ContentSite"
ContentSource="Header"
Margin="7,2,12,2"
RecognizesAccessKey="True"/>
</TextBlock>
</Viewbox>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="Margin" Value="{StaticResource TabItemMargin_Base}" />
<Setter Property="Panel.ZIndex" Value="90" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="2,1,1,0" />
<Setter TargetName="Border" Property="Background" Value="White" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Header" Property="Background" Value="#CCC" />
<Setter TargetName="Header" Property="Foreground" Value="#888" />
<Setter Property="Panel.ZIndex" Value="80" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The issue is with this brush:
<LinearGradientBrush x:Key="TabItemPanel_BackgroundBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.98" Color="Transparent" />
<GradientStop Offset="0.99" Color="{StaticResource BorderColor_Base}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
You are using a gradient from transparent to #888 as your background, so you are seeing one of the colors "in between" transparent and #888. Instead, you can use a Transparent background and border of #888, like so:
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabControl">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="10*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="Transparent" BorderBrush="#888" BorderThickness="0,0,0,1" Padding="{StaticResource TabItemPanel_Padding}"
SnapsToDevicePixels="True" />
<TabPanel Grid.Row="0" IsItemsHost="True" />
<ContentPresenter Grid.Row="1" ContentSource="SelectedContent" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You may need to tweak the Margin of the Border and/or the TabPanel to ensure they line up correctly though.
Labas!
Try to increase line's height, for instance set it to 5 or 10 pixels. If color is wrong again it means that you wrong styled TabControl.
I have a GridViewColumn with a HeaderTemplate that has an Image and a TextBlock. When the user hovers over the Image I am changing its opacity, but I am still getting the default header mouse over effect. How can I suppress this effect when the user hovers over the image?
The IsMouseOver Trigger is located inside the GridViewColumnHeader template. It looks like this
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderHoverBackground}"/>
<Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF88CBEB"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
<Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
</Trigger>
Update
With a little code behind you can disable the IsMouseOver trigger in the Loaded event for GridViewColumnHeader. It's overriding the setters in the trigger by setting their values and this will work for the classic theme as well.
<ListView ...>
<ListView.Resources>
<Style TargetType="{x:Type GridViewColumnHeader}">
<EventSetter Event="Loaded" Handler="GridViewColumnHeader_Loaded"/>
</Style>
</ListView.Resources>
<!--...-->
</ListView>
Code behind event handler
private void GridViewColumnHeader_Loaded(object sender, RoutedEventArgs e)
{
GridViewColumnHeader columnHeader = sender as GridViewColumnHeader;
Border HeaderBorder = columnHeader.Template.FindName("HeaderBorder", columnHeader) as Border;
if (HeaderBorder != null)
{
HeaderBorder.Background = HeaderBorder.Background;
}
Border HeaderHoverBorder = columnHeader.Template.FindName("HeaderHoverBorder", columnHeader) as Border;
if (HeaderHoverBorder != null)
{
HeaderHoverBorder.BorderBrush = HeaderHoverBorder.BorderBrush;
}
Rectangle UpperHighlight = columnHeader.Template.FindName("UpperHighlight", columnHeader) as Rectangle;
if (UpperHighlight != null)
{
UpperHighlight.Visibility = UpperHighlight.Visibility;
}
Thumb PART_HeaderGripper = columnHeader.Template.FindName("PART_HeaderGripper", columnHeader) as Thumb;
if (PART_HeaderGripper != null)
{
PART_HeaderGripper.Background = PART_HeaderGripper.Background;
}
}
Aero solution, the default Style with the IsMouseOver Trigger removed
<LinearGradientBrush x:Key="GridViewColumnHeaderBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.4091"/>
<GradientStop Color="#FFF7F8F9" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewColumnHeaderBorderBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF2F2F2" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewColumnHeaderHoverBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFBDEDFF" Offset="0"/>
<GradientStop Color="#FFB7E7FB" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="GridViewColumnHeaderPressBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF8DD6F7" Offset="0"/>
<GradientStop Color="#FF8AD1F5" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="GridViewColumnHeaderGripper" TargetType="{x:Type Thumb}">
<Setter Property="Canvas.Right" Value="-9"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Height" Value="{Binding ActualHeight, RelativeSource={RelativeSource TemplatedParent}}"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Background" Value="{StaticResource GridViewColumnHeaderBorderBackground}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent" Padding="{TemplateBinding Padding}">
<Rectangle Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Width="1"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Grid SnapsToDevicePixels="true">
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="7"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Rectangle x:Name="UpperHighlight" Fill="#FFE3F7FF" Visibility="Collapsed"/>
<Border Padding="{TemplateBinding Padding}" Grid.RowSpan="2">
<ContentPresenter x:Name="HeaderContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0,0,0,1" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</Border>
<Border x:Name="HeaderHoverBorder" BorderThickness="1,0,1,1" Margin="1,1,0,0"/>
<Border x:Name="HeaderPressBorder" BorderThickness="1,1,1,0" Margin="1,0,0,1"/>
<Canvas>
<Thumb x:Name="PART_HeaderGripper" Style="{StaticResource GridViewColumnHeaderGripper}"/>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<!--<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderHoverBackground}"/>
<Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF88CBEB"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
<Setter Property="Background" TargetName="PART_HeaderGripper" Value="Transparent"/>
</Trigger>-->
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="HeaderBorder" Value="{StaticResource GridViewColumnHeaderPressBackground}"/>
<Setter Property="BorderBrush" TargetName="HeaderHoverBorder" Value="#FF95DAF9"/>
<Setter Property="BorderBrush" TargetName="HeaderPressBorder" Value="#FF7A9EB1"/>
<Setter Property="Visibility" TargetName="UpperHighlight" Value="Visible"/>
<Setter Property="Fill" TargetName="UpperHighlight" Value="#FFBCE4F9"/>
<Setter Property="Visibility" TargetName="PART_HeaderGripper" Value="Hidden"/>
<Setter Property="Margin" TargetName="HeaderContent" Value="1,1,0,0"/>
</Trigger>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="20"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Role" Value="Floating">
<Setter Property="Opacity" Value="0.4082"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Canvas x:Name="PART_FloatingHeaderCanvas">
<Rectangle Fill="#FF000000" Height="{TemplateBinding ActualHeight}" Opacity="0.4697" Width="{TemplateBinding ActualWidth}"/>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="Role" Value="Padding">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border x:Name="HeaderBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,1,0,1" Background="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="Height" Value="Auto">
<Setter Property="MinHeight" Value="20"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
My WPF application has a style manager that I have built on blend.
My problem is this: I've got a login button that blinks occasionally and i can't figure out how to remove this behavior.
Here's the style code for my login box:
<Style x:Key="LoginBoxGrid" TargetType="{x:Type Grid}">
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Client;component/Assets/images/LoginBox.png" Stretch="None" TileMode="Tile"/>
</Setter.Value>
</Setter>
<Setter Property="Opacity" Value="0.765"/>
<Setter Property="Width" Value="411"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="126,150,0,111"/>
</Style>
<Style x:Key="LoginBoxHeader" TargetType="{x:Type Label}">
<Setter Property="Grid.Column" Value="2"/>
<Setter Property="Margin" Value="-16.183,18.347,0,0"/>
<Setter Property="Width" Value="64.994"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontStyle" Value="Italic"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="FontFamily" Value="/Client;component/Assets/Fonts/#Arial Black"/>
</Style>
<Style x:Key="LoginBtn" TargetType="{x:Type Button}">
<Setter Property="Grid.Column" Value="2"/>
<Setter Property="Margin" Value="16.6,9.022,9.282,8"/>
<Setter Property="Grid.Row" Value="4"/>
<Setter Property="Width" Value="164"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Opacity" Value="0.78"/>
<Setter Property="IsDefault" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/Client;component/Assets/images/LoginBtn.png"/>
</Setter.Value>
</Setter>
</Style>
And here's my code for the window:
<Grid Style="{StaticResource LoginBoxGrid}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.127*"/>
<ColumnDefinition Width="0.326*"/>
<ColumnDefinition Width="0.462*"/>
<ColumnDefinition Width="0.085*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.269*"/>
<RowDefinition Height="0.028*"/>
<RowDefinition Height="0.256*"/>
<RowDefinition Height="0.223*"/>
<RowDefinition Height="0.178*"/>
<RowDefinition Height="0.046*"/>
</Grid.RowDefinitions>
<Label Content="User Name" Grid.Column="1" Margin="43.986,23.1,8,8" Grid.Row="2" Width="82" BorderThickness="0" FontFamily="Arial" FontWeight="Bold" FontStyle="Italic"/>
<Label Content="Password" Grid.Column="1" Margin="43.986,15.873,8,8" Grid.Row="3" Width="82" BorderThickness="0" FontFamily="Arial" FontWeight="Bold" FontStyle="Italic"/>
<PasswordBox Grid.Column="2" Name="PassTb" HorizontalAlignment="Left" Margin="8,18.877,0,8" Grid.Row="3" Width="172.6" d:LayoutOverrides="Height"/>
<TextBox Grid.Column="2" Name="UserTb" HorizontalAlignment="Left" Margin="9.282,23.1,0,11.004" Grid.Row="2" TextWrapping="Wrap" Text="TextBox" Width="172.6" d:LayoutOverrides="Height"/>
<Label Style="{StaticResource LoginBoxHeader}" Content="Login" />
<Button Name="LoginBtn" Style="{StaticResource LoginBtn}" Content="Login" />
</Grid>
The Button I'm talking about is called "LoginBtn", as is its style.
How can I remove that blinking behavior? Thanks in advance.
That flashing is due to the default style that WPF uses for buttons. To be more specific, it's due to the Trigger on the button's control template. To remove this, go into blend, right click on the button and select "Edit Template"->"Edit a copy". Click on the child element of the content presenter (by default, this is the control called "Chrome"). Then, in the triggers tab, inactive RenderDefaulted by pressing "- trigger". That trigger will keep the button from blinking. If you just want the XAML for all of that, here it is wrapped by windows.resource...
<Window.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<Style x:Key="BoringButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Then, wherever you button is, apply this style...
<Button Style="{DynamicResource BoringButtonStyle}"/>
Update: The default button style has changed over the years. The idea is the same, use Blend for Visual Studio to edit the templete of the element you want to change. For this button, simply remove the IsDefaulted trigger entirly. Here is an updated code snippet.
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="BoringButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
<Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<!-- Delete this trigger
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>-->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/>
<Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Simple solution: Set button's "Focusable" to False.
A slightly less obtrusive way of removing that blinking would be to set a new ControlTemplate for ButtonBase with the offending bindings removed.
I took this via StyleSnooper from the Button default Style and revamped/simplified it to be a Style for ButtonBase that simply provides a new ControlTemplate*. To do this, add an assembly reference to Presentation.Aero and introduce the Microsoft.Windows.Themes namespace in your ResourceDictionary.
Here, I specifically removed the affected Button's ability to "blink" on its IsDefault property by hardcoding RenderDefaulted to false; you'll probably also want to replace the RenderMouseOver TemplateBinding.
<ResourceDictionary [...]
xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<Style TargetType="{x:Type ButtonBase}"
x:Key="NonBlinkingButtonBase">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ButtonBase}">
<mwt:ButtonChrome Background="{TemplateBinding Panel.Background}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
RenderDefaulted="False"
RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}"
RenderPressed="{TemplateBinding ButtonBase.IsPressed}"
Name="Chrome"
SnapsToDevicePixels="True">
<ContentPresenter RecognizesAccessKey="True"
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentControl.ContentStringFormat}"
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsKeyboardFocused" Value="True">
<Setter Property="mwt:ButtonChrome.RenderDefaulted" TargetName="Chrome" Value="True" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="mwt:ButtonChrome.RenderPressed" TargetName="Chrome" Value="True" />
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground">
<Setter.Value>
<SolidColorBrush>
#FFADADAD</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then use this style as a BasedOn for your Button:
<Style x:Key="LoginBtn"
TargetType="{x:Type Button}"
BasedOn="{StaticResource NonBlinkingButtonBase}">
[...your stuff...]
</Style>
(*) And yes, we should really have the ability to use BasedOn for ControlTemplates as well...
I've since my first answer ran into this problem when attaching images to buttons and I figured out by setting the image and button to stretch and using a size on the border it fixed the problem.
Example code..
<Border Width="45" Height="45">
<Button x:Name="buttonSend"
ToolTip="Send" Command="{Binding Path=SendCommand}" Style="{StaticResource actionButtonStyle}">
<Image Source="..\Images\Email-256.png" Stretch="Fill" />
</Button>
I would like to customize the scrollbars of a listbox's scrollviewer in such a way that the scrollbar only consists of a RepeatButton for scrolling up and a Repeatbutton for scrolling down. Nothing else. There should be no scrollbar (track) between the buttons.
One button should be to the left of the ItemsPanel (scroll up) and the other on the right of the ItemsPanel.
Is that possible?
I made a Vertical scrollbar with only repeat buttons and pls have look.
<LinearGradientBrush x:Key="VerticalScrollBarBackground" EndPoint="1,0" StartPoint="0,0">
<GradientStop Color="#E1E1E1" Offset="0"/>
<GradientStop Color="#EDEDED" Offset="0.20"/>
<GradientStop Color="#EDEDED" Offset="0.80"/>
<GradientStop Color="#E3E3E3" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ScrollBarDisabledBackground" Color="#F4F4F4"/>
<Style x:Key="ScrollBarButton" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="White" Stroke="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RepeatButtonStyle3" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Rectangle Fill="#FF9A2323" Stroke="#FF9B6363" StrokeThickness="2" RadiusX="2" RadiusY="2"/>
<Path Fill="#FF9A2323" Stretch="Fill" Stroke="#FF9B6363" StrokeThickness="1" Margin="6.619,5.209,4.317,2.207" RenderTransformOrigin="0.5,0.5" Data="M0.41792299,0.01261113 L10.7483,1.9116925 -0.026186385,10.702906 z">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="38.198"/>
<TranslateTransform X="-0.74530940575247584" Y="-0.07455335808536212"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RepeatButtonStyle4" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Rectangle Fill="#FF9A2323" Stroke="#FF9B6363" StrokeThickness="2" RadiusX="2" RadiusY="2"/>
<Path Fill="#FF9A2323" Stretch="Fill" Stroke="#FF9B6363" StrokeThickness="1" Margin="6.119,2.209,4.817,5.207" Data="M0.41792299,0.01261113 L10.7483,1.9116925 -0.026186385,10.702906 z" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="216.44"/>
<TranslateTransform X="-0.74530940575247584" Y="-0.07455335808536212"/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Background" Value="{StaticResource VerticalScrollBarBackground}"/>
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="false"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="MinWidth" Value="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="Bg" SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
<RowDefinition Height="0.00001*"/>
<RowDefinition MaxHeight="{DynamicResource {x:Static SystemParameters.VerticalScrollBarButtonHeightKey}}"/>
</Grid.RowDefinitions>
<RepeatButton Style="{DynamicResource RepeatButtonStyle3}" IsEnabled="{TemplateBinding IsMouseOver}" Command="{x:Static ScrollBar.LineUpCommand}"/>
<Track x:Name="PART_Track" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="1" IsDirectionReversed="true" Visibility="Visible">
</Track>
<RepeatButton Style="{DynamicResource RepeatButtonStyle4}" IsEnabled="{TemplateBinding IsMouseOver}" Grid.Row="2" Command="{x:Static ScrollBar.LineDownCommand}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="Bg" Value="{StaticResource ScrollBarDisabledBackground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>