I create a custom control library like this:
enter image description here
KiwiButton.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:KiwiWPFControl.Controls">
<Style x:Key="KiwiButtonStyle" TargetType="local:KiwiButton" >
<Setter Property="FontSize" Value="30"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FF00AA11" Offset="0"/>
<GradientStop Color="#FF00AA88" Offset="0.5"/>
<GradientStop Color="#FF00AAA6" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:KiwiButton" >
<Border BorderThickness="1" CornerRadius="15" Background="Transparent">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers >
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Background" Value="#AA00AAA6"/>
</Trigger >
</ControlTemplate.Triggers >
</ControlTemplate >
</Setter.Value>
</Setter>
</Style >
<Style BasedOn="{StaticResource KiwiButtonStyle}" TargetType="local:KiwiButton"/>
Generic.xaml:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/KiwiWPFControl;component/Themes/KiwiButton.xaml"/>
</ResourceDictionary.MergedDictionaries>
KiwiButton.cs:
namespace KiwiWPFControl.Controls{
public class KiwiButton : Button
{
static KiwiButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(KiwiButton), new FrameworkPropertyMetadata(typeof(KiwiButton)));
}
}
}
And I use this button like this
App.xaml:
<Application x:Class="KiwiWPFDemo.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:KiwiWPFDemo"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/KiwiWPFControl;component/Themes/Generic.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
MainWindow.xaml:
<Window x:Class="KiwiWPFDemo.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:KiwiWPFDemo"
mc:Ignorable="d"
xmlns:kiwi="clr-namespace:KiwiWPFControl.Controls;assembly=KiwiWPFControl"
Height="450" Width="800">
<Grid>
<kiwi:KiwiButton Width="200" Height="100" Content="12"/>
</Grid>
It compiles and runs successfully
But it shows this:enter image description here
How to make the style of the control take effect??
In your controltemplate, you should use templatebinding with the background. In your markup, you set the property but it is not used anywhere.
This highlights one of the things you need to bear in mind with templating.
Once you've replaced the template of a control then there is nothing there visually other than whatever you set.
You can then potentially remove the line of code sets defaultstylekeyproperty
<Style TargetType="local:KiwiButton" >
<Setter Property="FontSize" Value="30"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FF00AA11" Offset="0"/>
<GradientStop Color="#FF00AA88" Offset="0.5"/>
<GradientStop Color="#FF00AAA6" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:KiwiButton" >
<Border BorderThickness="1" CornerRadius="15"
Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers >
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Button.Background" Value="#AA00AAA6"/>
</Trigger >
</ControlTemplate.Triggers >
</ControlTemplate >
</Setter.Value>
</Setter>
</Style >
BTW the above style is all that's in my kiwibutton.xaml, I removed the line:
<Style BasedOn="{StaticResource KiwiButtonStyle}" TargetType="local:KiwiButton"/>
As Clemens pointed out in comments.
When you set targettype you automatically get the type as an x:Key.
Some people prefer to also set that explicitly.
x:Key="{x:Type local:KiwiButton}"
This a standard at several clients I have worked for and I am in the habit of doing this myself.
Related
I'm new in WPF.
I have an issue with overriding MaterialDesignComboBoxToggleButton
style. I wanna to replace "Template" setter with own, but my content from control template always ignores. Why this occurred? With other styles i haven't this problem.
Bellow code demonstrates what i need.
Overriedes.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ComboBox.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style BasedOn="{StaticResource MaterialDesignComboBoxToggleButton}" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<TextBlock FontSize="50" FontWeight="Bold">$$</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
App.xaml
<Application x:Class="Wpf.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-Wpf" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
StartupUri="Views/MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<materialDesign:CustomColorTheme BaseTheme="Light" PrimaryColor="#FFD8E1FF" SecondaryColor="#FFD8E1FF" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="/Overrides.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Add the same resource key to your custom style like this:
<Style
x:Key="MaterialDesignComboBoxToggleButton"
BasedOn="{StaticResource MaterialDesignComboBoxToggleButton}"
TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<TextBlock FontSize="50" FontWeight="Bold">$$</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and you don't need to add resources like this in Overrides.xaml file:
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.ComboBox.xaml" />
</ResourceDictionary.MergedDictionaries>
because the MDIX resources already included by MaterialDesignTheme.Defaults.xaml that you added in App.xaml file.
In my case override style in window not working ,but when I tried in App.xml then it works. I changed the style for toggle button by another style . the code is :
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Themes/IG/IG.MSControls.Core.Implicit.xaml" />
<ResourceDictionary Source="Themes/IG/IG.MSControls.Toolkit.Implicit.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border CornerRadius="8" BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="#FF0F0F4B" />
<Setter Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="#FF73ADDE" />
<Setter Property="Foreground" Value="#FF150404" />
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</Application.Resources>
I'm a newby in designing WPF frontends, please bear with me. Currently I am creating a style for my XAML apps and need assistance at one point.
I have 3 XAML files: 1 for my brush painting paths, 1 for my styles/colores and the mainWindow.xaml.
Within my style I want to create a custom button, containing a stack panel, a grid and a rectangle with a opcityMask fill which is painting a visualBrush path on it.
Would you mind helping me on how to access and change the painting path of my rectangle fill?
Is there a possibility to attach a dependency property or something else changable property to change the Rectangle.OpacityMask -> VisualBrush -> Visual path directly from my mainWindow.xaml?
How can I access such a brush painting path within a style from another xaml file?
Is there a way to attach a new property to the code in mainWindow.xaml where the used painting path can be set?
Or how are you changing such paths when using styles? Thank you all soooo much for your well appreciated help!
If something is not described 100% precise, just let me know.
Here is my code:
mainWindow.xaml
<Window x:Class="SynchDepots.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:SynchDepots"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources\Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
[...]
<StackPanel>
<Grid>
[...]
**<Button Grid.Column="0" Grid.Row="1" x:Name="btnTestForNewButtons" Style="{StaticResource DefaultButton2}" Content="Test button" />**
</Grid>
<Grid>
[...]
</Grid>
</StackPanel>
Styles.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SynchDepots">
<!-- ###############
###### COLORS ######
################ -->
<!--#region COLORS-->
<!--Colors-->
<!--
Work related:
ColorCCBlueDark #FF24387F
ColorCCBlueLight #FF009DDC
##############################
Private related:
-->
<Color x:Key="ColorAccentDark">#FF24387F</Color>
<Color x:Key="ColorAccentLight">#FF009DDC</Color>
<SolidColorBrush x:Key="ColorColoredDefaultText" Color="White" />
<SolidColorBrush x:Key="ColorAccentDarkSolid" Color="{StaticResource ColorAccentDark}"/>
<SolidColorBrush x:Key="ColorAccentLightSolid" Color="{StaticResource ColorAccentLight}"/>
<SolidColorBrush x:Key="ColorBackgroundDarkSquare" Color="#E01B1B1B" />
<SolidColorBrush x:Key="ColorBackgroundLightSquare" Color="#E0212121" />
<!--#endregion-->
<!-- ###############
###### BUTTONS #####
################ -->
<!--#region BUTTONS-->
<!--DefaultButton2-->
<Style x:Key="DefaultButton2" TargetType="Button">
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Height" x:Name="BtnHeight" Value="20"/>
<Setter Property="Width" x:Name="BtnWidth" Value="120"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
<GradientStop Color="#D83A3A3A" Offset="0"/>
<GradientStop Color="#D8686868" Offset="1"/>
<GradientStop Color="#D8363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="315"
Color="#FF878787"
RenderingBias="Quality"
Opacity="0.4"
ShadowDepth="5"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="pr7">
<StackPanel x:Name="btnStackPanel">
<Border Background="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF464646" Offset="0.6"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid x:Name="pr8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="99"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Grid.ColumnSpan="2" x:Name="rctImg">
<Rectangle.Width>16</Rectangle.Width>
<Rectangle.Height>16</Rectangle.Height>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1" />
<GradientStop Color="{StaticResource ColorAccentDark}" Offset="0" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<VisualBrush x:Name="opacityMaskVisualPath" Stretch="Uniform" Visual="**{StaticResource imgBtnPreferencesTune}**"/>
</Rectangle.OpacityMask>
</Rectangle>
<Rectangle x:Name="btnRectangleSplitter" Grid.Column="1" Width="1" Height="Auto" HorizontalAlignment="Center">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00959595" Offset="0.05"/>
<GradientStop Color="#FF727272" Offset="0.4"/>
<GradientStop Color="#FF727272" Offset="0.6"/>
<GradientStop Color="#00959595" Offset="0.95"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="btnTxtContent" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" Text="{TemplateBinding Content}"></TextBlock>
</Grid>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
[...]
<!--#endregion-->
I fixed this problem as follows:
- seperated all elements and placed them into their own style;
- putting each VisualBrush -> Visual into a single style, linked to the Path/Data style;
- putting the button design into a single style;
- referenced the styles one by one in the MainWindow.xaml:
MainWindow.xaml
<Window x:Class="SynchDepots.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:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:local="clr-namespace:SynchDepots"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources\Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
[...]
<Button Grid.Column="1" Grid.Row="1" Style="{StaticResource DefaultButton}">
<StackPanel Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" Orientation="Horizontal" Margin="0" Width="118" Height="18">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="97"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Style="{StaticResource rctForImgBtnPreferencesGearWheel}"/>
<Rectangle Grid.Column="1" Style="{StaticResource rctSplitter}"/>
<TextBlock Grid.Column="2" VerticalAlignment="Center" TextAlignment="Center">Geiler Scheiß</TextBlock>
</Grid>
</StackPanel>
</Button>
Referenced to the single styles:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:SynchDepots">
<!-- ###############
###### COLORS ######
################ -->
<!--#region COLORS-->
<!--Colors-->
<!--
Work related:
ColorCCBlueDark #FF24387F
ColorCCBlueLight #FF009DDC
##############################
Private related:
-->
<Color x:Key="ColorAccentDark">#FF24387F</Color>
<Color x:Key="ColorAccentLight">#FF009DDC</Color>
<SolidColorBrush x:Key="ColorColoredDefaultText" Color="White" />
<SolidColorBrush x:Key="ColorAccentDarkSolid" Color="{StaticResource ColorAccentDark}"/>
<SolidColorBrush x:Key="ColorAccentLightSolid" Color="{StaticResource ColorAccentLight}"/>
<SolidColorBrush x:Key="ColorBackgroundDarkSquare" Color="#E01B1B1B" />
<SolidColorBrush x:Key="ColorBackgroundLightSquare" Color="#E0212121" />
<!--#endregion-->
<!-- ###############
####### TEXTS ######
################ -->
<!--#region TEXTS-->
<!--ColoredDetaultText-->
<Style x:Key="WhiteText" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="{StaticResource ColorColoredDefaultText}"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontStyle" Value="Normal"/>
</Style>
<!--#endregion-->
<!-- ###############
###### BUTTONS #####
################ -->
<!--#region BUTTONS-->
<!--DefaultButton-->
<Style x:Key="DefaultButton" TargetType="Button">
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Height" x:Name="BtnHeight" Value="20"/>
<Setter Property="Width" x:Name="BtnWidth" Value="120"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF464646" Offset="0.6"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
<GradientStop Color="#FF3A3A3A" Offset="0"/>
<GradientStop Color="#FF686868" Offset="1"/>
<GradientStop Color="#FF363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="315"
Color="#FF878787"
RenderingBias="Quality"
Opacity="0.4"
ShadowDepth="5"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.65">
<GradientStop Color="#FF292929" Offset="0"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
<!--<GradientStop Color="#FFA8A8A8" Offset="1"/>-->
<GradientStop Color="#FF363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.7">
<GradientStop Color="#FF282828" Offset="0"/>
<GradientStop Color="#FF3C3C3C" Offset="1"/>
<GradientStop Color="#FF282828" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<EventTrigger RoutedEvent="MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.200"
Storyboard.TargetProperty="FontSize" To="13"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.800"
Storyboard.TargetProperty="FontSize" To="12"
AccelerationRatio="0.4"
DecelerationRatio="0.6"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<!--DefaultButton2-->
<Style x:Key="DefaultButton2" TargetType="Button">
<Setter Property="Margin" Value="2 2 2 2"/>
<Setter Property="Height" x:Name="BtnHeight" Value="20"/>
<Setter Property="Width" x:Name="BtnWidth" Value="120"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.6">
<GradientStop Color="#D83A3A3A" Offset="0"/>
<GradientStop Color="#D8686868" Offset="1"/>
<GradientStop Color="#D8363636" Offset="0.4"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4"
Direction="315"
Color="#FF878787"
RenderingBias="Quality"
Opacity="0.4"
ShadowDepth="5"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="btnGridRoot">
<StackPanel x:Name="btnStackPanel">
<Border Background="{TemplateBinding Background}"
BorderThickness="1"
CornerRadius="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF464646" Offset="0.6"/>
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Grid x:Name="btnGridForContent" Width="120" Height="18">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="99"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
</Grid>
</Border>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
[...]
</Style.Triggers>
</Style>
<!--#endregion-->
<!-- ###############
##### CONTENTS #####
################ -->
<!--#region CONTENTS -->
<!--#endregion-->
<!-- ###############
## SHAPES / FORMS ##
################ -->
<!--#region SHAPES / FORMS-->
<!--Main Rectangle for Button Images-->
<Style x:Key="rctBaseForImg" TargetType="Rectangle">
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Margin" Value="2,1"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="{StaticResource ColorAccentLight}" Offset="1" />
<GradientStop Color="{StaticResource ColorAccentDark}" Offset="0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<!--Rectangle for seperator-->
<Style x:Key="rctSplitter" TargetType="Rectangle">
<Setter Property="Width" Value="1"/>
<Setter Property="Height" Value="18"/>
<Setter Property="Fill">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00959595" Offset="0.05"/>
<GradientStop Color="#FF727272" Offset="0.4"/>
<GradientStop Color="#FF727272" Offset="0.6"/>
<GradientStop Color="#00959595" Offset="0.95"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
<!--Rectangle for path imgBtnPreferencesGearWheel-->
<Style x:Key="rctForImgBtnPreferencesGearWheel" BasedOn="{StaticResource rctBaseForImg}" TargetType="Rectangle">
<Setter Property="OpacityMask">
<Setter.Value>
<VisualBrush Stretch="Uniform" Visual="{StaticResource imgBtnDefault}"/>
</Setter.Value>
</Setter>
</Style>
<!--#endregion-->
And this is referenced to the paths documented in my Icons.xaml:
<!--imgBtnPreferences // Settings-->
<Path x:Key="imgBtnDefault"
Data="M10 17l5-5-5-5v10z"
Fill="White" />
[...]
I have the following checkbox
<CheckBox x:Name="checkBox" Content="CheckBox" Width="74"/>
and I have a button
<Button Name="TestButton" Content="Test" />
I want to set a "default" color for the textblock. I achieve that by having a resourcedictionary which has the following content:
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="White"/>
</Style>
The problem is, that the Button should still have a black Textblock foreground, but although in another sourcedictionary i have the following, it still changes to white:
<Style TargetType="Button">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border BorderThickness="1,0,0,1" CornerRadius="5" Background="{TemplateBinding Background}">
<ContentPresenter
x:Name="ContentPresenter"
Margin="1"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.Foreground="Black"
Opacity="1.0"/>
</Border>
</ControlTemplate/>
<Setter.Value/>
</Setter>
</Style.Setters>
</Style
Edit:
The ResourceDictionaries are defined in Application.xaml like this:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="TextBlock.xaml"/>
<ResourceDictionary Source="Buttons.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
You could try overriding the default TextBlock style locally for the ContentPresenter by defining another one in its Resources:
<ContentPresenter ... >
<ContentPresenter.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
But a better way to set a default control text color is like this in App.Resources. TextElement.Foreground will override this on any given individual element.
<SolidColorBrush
x:Key="{x:Static SystemColors.ControlTextBrushKey}"
Color="White"
/>
If you use that and discard your default TextBlock style, your original ContentPresenter should work as you had it.
With the help of #ebattulga this has been solved.
I created a Resource Dictionary with multiple template overrides. http://pastebin.com/nt3FxkM4
And an example visual studio project to download https://www.dropbox.com/s/20mpnbi27xv7nny/ComboBoxColors.zip?dl=0
The following keys have Red and Blue added to the end of name:
ComboBoxToggleButton
ComboBoxTemplate
ComboBoxEditableTemplate
I have 2 ComboBoxes. I need to make one Red and one Blue.
I've made an example project below.
Changing the background color in Brush Properties doesn't work. You need to override the Default Template Style LinearGradientBrush ComboBox.Static.Background which is grey and white.
Using Edit Template I can override the Default brush to change them all Red. But I cannot find a way to create another Style to make the other Blue.
I'm trying Resource Dictionary, but the Style does not take effect.
XAML 2 ComboBoxes
<Window x:Class="ComboBoxColors.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary Source="ComboBoxStylesDictionary.xaml"/>
</Window.Resources>
<Grid>
<ComboBox x:Name="ComboBoxRed" Style="{StaticResource ComboBoxRed}" HorizontalAlignment="Left" Margin="109,105,0,0" VerticalAlignment="Top" Width="120"/>
<ComboBox x:Name="ComboBoxBlue" Style="{StaticResource ComboBoxBlue}" HorizontalAlignment="Left" Margin="286,105,0,0" VerticalAlignment="Top" Width="120"/>
</Grid>
</Window>
Resource Dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush x:Key="ComboBoxRed.Static.Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Red" Offset="0.0"/>
<GradientStop Color="Red" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ComboBoxRed.Static.Border" Color="Red"/>
<Style x:Key="ComboBoxRed" TargetType="{x:Type ComboBox}">
<Setter Property="Background" Value="{StaticResource ComboBoxRed.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ComboBoxRed.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
</Style>
<LinearGradientBrush x:Key="ComboBoxBlue.Static.Background" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="Blue" Offset="0.0"/>
<GradientStop Color="Blue" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ComboBoxBlue.Static.Border" Color="Blue"/>
<Style x:Key="ComboBoxBlue" TargetType="{x:Type ComboBox}">
<Setter Property="Background" Value="{StaticResource ComboBoxBlue.Static.Background}"/>
<Setter Property="BorderBrush" Value="{StaticResource ComboBoxBlue.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
</Style>
</ResourceDictionary>
C#
I have also tried this, but resource not found.
Brush ComboBoxRedStyle = (Brush)Application.Current.FindResource("ComboBoxRed");
ComboBoxRed.Background = ComboBoxRedStyle;
And this with no effect.
ComboBoxRed.Background = Brushes.Red;
You declare resource in App.xaml
<Application.Resources>
<ResourceDictionary Source="ComboBoxStylesDictionary.xaml"/>
</Application.Resources>
Or if you only use it in locally, use this
Style ComboBoxRedStyle = (Style)this.FindResource("ComboBoxRed");
In XAML, use it like this,
<Page>
<Page.Resources>
<ResourceDictionary Source="GiveFileName"/>
</Page.Resources>
</Page>
I am trying to make the background not overflow the tab item in WPF. Here's what is happening (the blue background should not extend outside the border):
Here's my WPF XAML code:
<Window x:Class="DevelopmentConfigurator.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:DevelopmentConfigurator"
mc:Ignorable="d"
Title="Development Configurator" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="467*"/>
</Grid.ColumnDefinitions>
<TabControl x:Name="tabControl" HorizontalAlignment="Left" Height="320" VerticalAlignment="Top" Width="517" Grid.ColumnSpan="2" Margin="10">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Background="{TemplateBinding Background}" Height="30">
<Border Name="Border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Gainsboro" CornerRadius="4,4,0,0" Margin="0,2,2,0" Padding="0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="10,2"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="#FF0067CD"></Setter>
<Setter Property="FontWeight" Value="Bold"></Setter>
<Setter Property="Background" Value="White"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="White"></Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
<Setter Property="BorderThickness" Value="1,1,1,0"></Setter>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FF00A0E8" Offset="0"/>
<GradientStop Color="#FF0067CD" Offset="1"/>
<GradientStop Color="#FFDDDDDD" Offset="1"/>
<GradientStop Color="#FFCDCDCD" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Header="Packages">
<Label Content="Content goes here..." />
</TabItem>
<TabItem Header="Updates" Padding="0" />
<TabItem Header="EnvironmentVariables" />
</TabControl>
</Grid>
</Window>
Move the background binding from the Grid to the Border of your template.
<ControlTemplate TargetType="TabItem">
<Grid Name="Panel" Height="30">
<Border Name="Border" Background="{TemplateBinding Background}" ...