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" />
[...]
Related
I try to get the look of the button like in css you can see here.
When you press this button it looks as if it goes inside.
Following is my XAML try, I used DropShadowEffect, but is not exactly like in css.
How can I achieve exactly look like in css?
Is it possible to translate CSS to XAML?
<Window x:Class="Window1"
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"
mc:Ignorable="d"
Title="Window1" Height="250" Width="400">
<Window.Resources>
<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 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}">
<Grid>
<Border BorderThickness="0,0,0,0"
CornerRadius="5" Margin="0,6,0,-5" AllowDrop="True">
<Border.Background>
<RadialGradientBrush SpreadMethod="Reflect">
<GradientStop Color="#FFA8A8A8" Offset="0.923"/>
<GradientStop Color="White"/>
<GradientStop Color="#FFE0E0E0" Offset="0.391"/>
</RadialGradientBrush>
</Border.Background>
</Border>
<Border x:Name="Shadowborder" BorderBrush="Black" BorderThickness="0,0,0,10"
CornerRadius="5">
<Border.Effect>
<DropShadowEffect Direction="270" Opacity="0.5"/>
</Border.Effect>
</Border>
<Border CornerRadius="5" 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>
</Grid>
<ControlTemplate.Triggers>
<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}"/>
<Setter Property="Margin" TargetName="border" Value="0,5,0,-5"/>
<Setter Property="Margin" TargetName="Shadowborder" Value="0,5,0,-5"/>
<Setter Property="Effect" TargetName="Shadowborder">
<Setter.Value>
<DropShadowEffect Direction="270" Opacity="0.3" BlurRadius="1" ShadowDepth="1"/>
</Setter.Value>
</Setter>
</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>
</Window.Resources>
<Grid>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" Content="Hello!"/>
</Grid>
</Window>
Achieve exactly look like in CSS?
Yes, you only need to convert to XAML from CSS - by your brain.
Maybe it's a bit bloated, but it should be the most similar, welcome others to improve
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Padding="25,10"
Content="Hello!"
FontSize="36"
FontFamily="Franklin Gothic Medium">
<Button.Template>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="IsPressed"
Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
Storyboard.TargetProperty="Margin"
To="0,4,0,4"
Duration="0:0:0.15">
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
Storyboard.TargetProperty="ShadowDepth"
To="2"
Duration="0:0:0.15">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ThicknessAnimation Storyboard.TargetName="BUTTON_FACE"
Storyboard.TargetProperty="Margin"
To="0,0,0,8"
Duration="0:0:0.15">
<ThicknessAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
<DoubleAnimation Storyboard.TargetName="BUTTON_SHADOW"
Storyboard.TargetProperty="ShadowDepth"
To="6"
Duration="0:0:0.15">
<DoubleAnimation.EasingFunction>
<QuinticEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
<Grid>
<Grid.Effect>
<DropShadowEffect x:Name="BUTTON_SHADOW"
BlurRadius="6"
Color="Gray"
Direction="-90"
ShadowDepth="6" />
</Grid.Effect>
<Border CornerRadius="0,0,10,10"
VerticalAlignment="Bottom"
Height="18">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#DEDEDE"
Offset="0.3" />
<GradientStop Color="#BEBEBE"
Offset="0.5" />
<GradientStop Color="#4E4E4E"
Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Name="BUTTON_FACE"
Margin="0,0,0,8">
<Border.Effect>
<DropShadowEffect BlurRadius="0"
Color="White"
Direction="90"
ShadowDepth="1" />
</Border.Effect>
<Border CornerRadius="10"
Background="#E8E8E8">
<Border.Effect>
<DropShadowEffect BlurRadius="1"
Direction="-90"
ShadowDepth="1"
Color="White" />
</Border.Effect>
<Grid>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,2"
EndPoint="2,0"
MappingMode="Absolute"
SpreadMethod="Reflect">
<GradientStop Color="#00FFFFFF"
Offset="0" />
<GradientStop Color="#00FFFFFF"
Offset="0.2" />
<GradientStop Color="#FFD2D2D1"
Offset="0.2" />
<GradientStop Color="#FFD2D2D1"
Offset="0.8" />
<GradientStop Color="#00FFFFFF"
Offset="0.8" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#00FFFFFF"
Offset="0" />
<GradientStop Color="#7FFFFFFF"
Offset="0.2" />
<GradientStop Color="#7FFFFFFF"
Offset="0.8" />
<GradientStop Color="#00FFFFFF"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="1,0">
<GradientStop Color="#4CD2D2D2"
Offset="0" />
<GradientStop Color="#00D2D2D2"
Offset="0.2" />
<GradientStop Color="#00D2D2D2"
Offset="0.8" />
<GradientStop Color="#4CD2D2D2"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle RadiusX="10"
RadiusY="10">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0,0"
StartPoint="0,1">
<GradientStop Color="#00FFFFFF"
Offset="0.5" />
<GradientStop Color="#4CFFFFFF"
Offset="0.5" />
<GradientStop Color="#33FFFFFF"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border>
<Border.Effect>
<DropShadowEffect BlurRadius="0"
Direction="-90"
ShadowDepth="1"
Color="White" />
</Border.Effect>
<ContentPresenter x:Name="contentPresenter"
Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
RecognizesAccessKey="False"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="0"
Direction="90"
ShadowDepth="1"
Color="#262F33" />
</ContentPresenter.Effect>
</ContentPresenter>
</Border>
</Grid>
</Border>
</Border>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
And it seem I've found something interesting.
Using CSS in XAML - XamlCSS
https://forums.xamarin.com/discussion/67249/xamlcss-styling-xaml-applications-with-css
I am new in WPF and trying to create some simple project.
I have created a window with a button. Then I need to create the same buttons but I cant understand how to create a template from exist button?
Here is the code:
<Grid Background="Black">
<ToggleButton x:Name="btn" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White">
<ToggleButton.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF5D5D5D"/>
</LinearGradientBrush>
</ToggleButton.BorderBrush>
<ToggleButton.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE43DFF" Offset="0"/>
<GradientStop Color="Black" Offset="0.997"/>
</LinearGradientBrush>
</ToggleButton.Background>
</ToggleButton>
</Grid>
As we see there is single button on grid. I need to create a lot of same buttons and need a template. How to make a template? Internal question can BorderBrush be a template? I ask because in future I need to make a different buttons (like red, green, magenta etc) with the same border you can see in my code. Thanks!
You don't need a Template, you can do this with a Style:
<Window.Resources>
<Style x:Key="PurpleButton" TargetType="{x:Type ToggleButton}">
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="1"/>
<GradientStop Color="#FF5D5D5D"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE43DFF" Offset="0"/>
<GradientStop Color="Black" Offset="0.997"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Black">
<ToggleButton x:Name="btn" Style="{StaticResource PurpleButton}" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White" />
<ToggleButton Style="{StaticResource PurpleButton} Content="2" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White"" />
</Grid>
Here is an example of a style which has triggers implemented aswell. Doing it this way using a control template you are able to create and design your own type of button.
<Style x:Key="ButtonNormal" TargetType="Button">
<Setter Property="Height" Value="40" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="#18272d" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonBorder"
CornerRadius="4"
BorderThickness="1"
BorderBrush="#adcae6"
>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#ffffff" Offset="0"/>
<GradientStop Color="#e2eaf6" Offset="0.4"/>
</LinearGradientBrush>
</Border.Background>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1.7*"/>
</Grid.RowDefinitions>
<ContentPresenter x:Name="ButtonContentPresenter"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Grid.RowSpan="2" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#d6e2f3" Offset="0"/>
<GradientStop Color="#fff" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonBorder" Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#bed0ed" Offset="0"/>
<GradientStop Color="#fff" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="#7ba7d1" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonBorder" Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
<GradientStop Color="#f6f6f6" Offset="0"/>
<GradientStop Color="#eaeaea" Offset="0.9"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="DarkGray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Hope this helps and gives a better overview of how Styling/Templating works.
Trying to make a DataTemplate style, where it should change the colour of a couple of gradient stops based on the value of a boolean 'IsReported'. This is a MVVM Project.
However, when I add items to the ObservableCollection (in the view model) which the list box is binded to, it comes up with this error:
{"'Provide value on 'System.Windows.Markup.StaticResourceHolder' threw an exception.' Line number '153' and line position '38'."}
Cannot find resource named 'timeSlotColorValue'. Resource names are case sensitive.
Here is the Style / Data Template:
<LinearGradientBrush x:Key="bordBackground" EndPoint="1,1" StartPoint="0,0">
<GradientStop x:Name="timeSlotColorValue" Color="Lime" Offset="0" />
<GradientStop Color="Transparent" Offset="0.2"/>
<GradientStop Color="Transparent" Offset="0.8"/>
<GradientStop x:Name="timeSlotColorValue2" Color="Lime" Offset="1"/>
</LinearGradientBrush>
<Style TargetType="ListBox" x:Key="timeSlotTemplate">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate DataType="model:DVRTimeSlot">
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsReported}" Value="true">
<Setter Property="GradientStop.Color" TargetName="{StaticResource timeSlotColorValue}" Value="Red" />
<Setter Property="GradientStop.Color" TargetName="{StaticResource timeSlotColorValue2}" Value="Red" />
</DataTrigger>
</DataTemplate.Triggers>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TimeString}" Padding="2" FontSize="13" FontWeight="Black" >
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0,1">
<GradientStop Color="LightGray" Offset="0"/>
<GradientStop Color="Azure" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
<Border Grid.Column="1" Background="{StaticResource bordBackground}">
<Border.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextAlignment" Value="Right" />
<Setter Property="Padding" Value="5,0"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="SemiBold" />
</Style>
<Style TargetType="Border">
<Setter Property="Padding" Value="3" />
<Setter Property="Margin" Value="-3,0,-3,0" />
<Setter Property="MinWidth" Value="240"/>
</Style>
</Border.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Reason}" TextAlignment="Center"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Here is the Model I'm basing my Data off:
public class DVRTimeSlot
{
public DVRTimeSlot()
{
}
public bool IsReported { get; set; }
public string Reason { get; set; }
public CallReportCategory Category { get; set; }
public DateTime TimeValue { get; set; }
public string TimeString
{
get { return TimeValue.Hour + ":" + TimeValue.Minute; }
}
}
Can anyone shed some light on this, have I gone the wrong way about it?
I've used this article for a guide: Change color of textbox with trigger,
but doesn't seem to work in this scenario
The StaticResource extension will look for a resource with the x:Key that you specified as parameter. In the code you posted you only specified a x:Name
I completely re-thought my approach and solved it via using a separate style for the border
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsReported}" Value="True">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.2"/>
<GradientStop Color="Transparent" Offset="0.8"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsReported}" Value="False">
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="Lime" Offset="0"/>
<GradientStop Color="Transparent" Offset="0.2"/>
<GradientStop Color="Transparent" Offset="0.8"/>
<GradientStop Color="Lime" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
<Setter Property="Padding" Value="3" />
<Setter Property="Margin" Value="-3,0,-3,0" />
<Setter Property="MinWidth" Value="240"/>
</Style>
</Grid.Resources>
I have a Menu made in MVVM, but my Menuitem are big as shown here
http://i49.tinypic.com/wi1vk3.png
So in my Mainwindow I have a menu that binds to a list of menu.
In my View
<Menu VerticalAlignment="Top">
<MenuItem Header="File" ItemsSource="{Binding MenuList}" />
</Menu>
And in my ViewModel
List<MenuViewModelBase> _menuList = new List<MenuViewModelBase>();
_menuList.Add(new MenuViewModel("New", NewCommand));
_menuList.Add(new MenuViewModel("Open", OpenCommand));
_menuList.Add(new MenuViewModel("Save", SaveCommand));
_menuList.Add(new MenuViewModel("Exit", ExitCommand));
My MenuView is
<MenuItem>
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="Header" Value="{Binding Name}" />
<Setter Property="Command" Value="{Binding ActionCommand}" />
</Style>
</MenuItem.Resources>
</MenuItem>
Can someone tell me how to resize the menuitem to match their content?
I believe what you're seeing is the space the default template reserves for InputGestureText. If you want to remove that area I believe your best bet is to implement your own template for the menu item. Using the default template as a starting point it should be fairly easy to modify it to get what you're looking for.
Update:
I've included an example in which I copied the MenuItem style from the above link and added it to my project. I then removed the Icon and InputGesture areas from the SubMenuHeaderTemplate. In general, if you see default behavior that you'd like to change you can try to change via a style and if that doesn't work you can override the default template using the ones provided by Microsoft as a base.
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow">
<Window.Resources>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>
<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<!--Border colors-->
<Color x:Key="BorderMediumColor">#FF888888</Color>
<LinearGradientBrush x:Key="MenuPopupBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="0" />
<GradientStop Color="{DynamicResource ControlMediumColor}" Offset="0.5" />
<GradientStop Color="{DynamicResource ControlLightColor}" Offset="1" />
</LinearGradientBrush>
<!-- TopLevelHeader -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelHeaderTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup x:Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" BorderThickness="1"
Background="{DynamicResource MenuPopupBrush}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer CanContentScroll="True" Style="{StaticResource MenuScrollViewer}">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None" />
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{StaticResource ControlLightColor}" />
<GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- TopLevelItem -->
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border">
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{StaticResource ControlLightColor}" />
<GradientStop Color="{StaticResource ControlMouseOverColor}" Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- SubmenuItem -->
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid>
<ContentPresenter x:Name="HeaderHost" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="{DynamicResource ControlMouseOverColor}" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderMediumColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="{x:Static MenuItem.SubmenuHeaderTemplateKey}"
TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid>
<ContentPresenter x:Name="HeaderHost" ContentSource="Header" RecognizesAccessKey="True" />
<Popup x:Name="Popup" Placement="Right" HorizontalOffset="-4" IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border x:Name="SubmenuBorder" SnapsToDevicePixels="True" Background="{DynamicResource MenuPopupBrush}"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<ScrollViewer CanContentScroll="True" Style="{StaticResource MenuScrollViewer}">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Transparent" Offset="0" />
<GradientStop Color="{DynamicResource ControlMouseOverColor}" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" TargetName="Border">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{DynamicResource BorderMediumColor}" Offset="0" />
<GradientStop Color="Transparent" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="4" />
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,3,0,3" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{StaticResource DisabledForegroundColor}" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- MenuItem Style -->
<Style x:Key="{x:Type MenuItem}"
TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Style.Triggers>
<Trigger Property="Role"
Value="TopLevelHeader">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.TopLevelHeaderTemplateKey}}" />
<Setter Property="Grid.IsSharedSizeScope"
Value="true" />
</Trigger>
<Trigger Property="Role"
Value="TopLevelItem">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.TopLevelItemTemplateKey}}" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuHeader">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.SubmenuHeaderTemplateKey}}" />
</Trigger>
<Trigger Property="Role"
Value="SubmenuItem">
<Setter Property="Template"
Value="{StaticResource {x:Static MenuItem.SubmenuItemTemplateKey}}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Background="Red">
<Grid.ContextMenu>
<ContextMenu>
<MenuItem Header="This is a menu item without InputGesture area"/>
</ContextMenu>
</Grid.ContextMenu>
</Grid>
</Window>
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.