Here is my Code which I made by control template. I try <Border.Effect> but it does not work properly. Anybody does have any idea that how to implement drop shadow in custom made tool tip. I try to give a border in my template so that the shadow appear but still there no dropshadow.
<Style x:Key="{x:Type ToolTip}"
TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="HasDropShadow"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToolTip}">
<Grid x:Name="grid" >
<Border x:Name="Border" Margin="0,0,0,0"
BorderThickness="0.5"
Width="{TemplateBinding Width}"
Height="19">
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="White"
Offset="0.0" />
<GradientStop Color="White"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasDropShadow" Value="True" >
<Setter TargetName="Border"
Property="CornerRadius"
Value="0" />
<Setter TargetName="Border"
Property="SnapsToDevicePixels"
Value="true" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The effect of Border.Background overrides the effect of Border.Effect.You set your all GradientStop to 'white',the effect is the same as just setting the background to White in here.To see the shadow, you can set the background of the Grid to white and remove the part of Border.Background.Here is my edited Grid part:
<Grid x:Name="grid" Background="White" >
<Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="19">
<Border.BorderBrush>
<SolidColorBrush Color="Gray" />
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
</Border.Effect>
<ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
</Border></Grid>
The following shows two buttons. When the mouse is over the second button, I would like to change the firsts borderbrush to white.
<ItemsControl ItemsSource="{Binding Path=ModuleCollection}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0">
<Button Content="{Binding ModuleName}" Template="{StaticResource navModuleButton}"/>
<Button Template="{StaticResource CloseButtonStyle}"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I believe could possibly be done with a datatrigger on the first button as follows, but in order to do that I need to name the second button, not sure how to dynamically name.
<DataTrigger Binding="{Binding ElementName=closeBtn1, Path=IsMouseOver}" Value="True">
<Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/>
</DataTrigger>
How to do this?
[EDIT]
This is the template for the first button where you'll see btnBorder is the border I would like to change the color of.
<ControlTemplate x:Key="navModuleButton" TargetType="{x:Type Button}">
<Border x:Name="btnBorder" RenderTransformOrigin="0.5,0.5" BorderThickness="1,1,1,1" CornerRadius="0,0,7,0">
<Grid x:Name="Grid" RenderTransformOrigin="0.5,0.5">
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border x:Name="Border1" RenderTransformOrigin="0.5,0.5" BorderThickness="0.5,0.5,0.5,0.5" CornerRadius="0,0,7,0">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
<RotateTransform Angle="90" />
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
</LinearGradientBrush>
</Border.Background>
</Border>
<DockPanel Name="myContentPresenterDockPanel">
<ContentPresenter x:Name="myContentPresenter" Margin="10,0,21,0"
Content="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
TextBlock.Foreground="White" />
</DockPanel>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsEnabled" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property ="Opacity" Value="0.30" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Border1">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<LinearGradientBrush.RelativeTransform>
<TransformGroup>
<TranslateTransform X="0" Y="0"/>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="90"/>
<TranslateTransform X="0" Y="0"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</LinearGradientBrush.RelativeTransform>
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#837C7C7C" Offset="0"/>
<GradientStop Color="#83343434" Offset="0.99496336996337187"/>
<GradientStop Color="#83343434" Offset="0.523844744998591"/>
<GradientStop Color="#837C7C7C" Offset="0.48045224006762494"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Cursor" Value="Hand" TargetName="Grid"/>
<Setter Property="BitmapEffect" TargetName="Border1">
<Setter.Value>
<OuterGlowBitmapEffect GlowColor="Blue"/>
</Setter.Value>
</Setter>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
You can use the SourceName property in a trigger, like this:
<DataTemplate>
<Grid Margin="0">
<Button x:Name="btnModule"
Content="{Binding ModuleName}"
Template="{StaticResource navModuleButton}"/>
<Button x:Name="btnClose"
Template="{StaticResource CloseButtonStyle}"/>
</Grid>
<DataTemplate.Triggers>
<Trigger SourceName="btnClose" Property="IsMouseOver">
<Setter TargetName="btnModule" Property="BorderBrush" Value="White"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
Don't worry about the names, WPF takes care of that, since the DataTemplate has it's own Name Scope
Edit: your button ControlTemplate is wrong.
A ControlTemplate should be defined in such a way that the properties of the Visual elements inside of it are "tied" to the properties of the Control the template is applied to.
In other words, your btnBorder should depend on the properties of the "parent templated item" the Control to which template is applied, in this case, btnModule.
For that purpose, a common approach is to use a TemplateBinding in the ControlTemplate, like this:
<Border x:Name="btnBorder"
RenderTransformOrigin="0.5,0.5"
BorderThickness="1,1,1,1"
CornerRadius="0,0,7,0"
BorderBrush="{TemplateBinding BorderBrush}"> <!-- See the TemplateBinding here -->
this will bind the btnBorder.BorderBrush property to the parent's BorderBrush (in this case btnModule.BorderBrush)
I have a WPF application. Where I have a toggle button that has a glass effect. When the button is checked the button fills blue which in the code below has been commented out. I have created a rectangle with a glow effect and would like this to be activated when the IsChecked = true. At the moment it doesn't appear to be doing anything.
<Style x:Key="ToggleButtonTemplate" TargetType="ToggleButton">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="5,5,5,5"/>
<Setter Property="IsChecked" Value="{Binding SecurityList[0].Run}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="ButtonBorder"
CornerRadius="15,15,15,15"
BorderThickness="3,3,3,3"
Background="#AA000000"
BorderBrush="#99FFFFFF"
RenderTransformOrigin="0.5,0.5">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="1.7*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.ColumnSpan="2" CornerRadius="23,23,0,0">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#08FFFFFF" Offset="0"/>
<GradientStop Color="#88FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter x:Name="ButtonContentPresenter"
VerticalAlignment="Center"
Grid.RowSpan="2"
HorizontalAlignment="Center"/>
<Rectangle x:Name="recGlow" HorizontalAlignment="Left" Stroke="Black"
VerticalAlignment="Top" Opacity="0">
<Rectangle.Fill>
<RadialGradientBrush>
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1.248" ScaleX="1.276"/>
<SkewTransform CenterY="0.5" CenterX="0.5"/>
<RotateTransform CenterY="0.5" CenterX="0.5"/>
<TranslateTransform Y="0.317" X="-0.007"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF088CE8" Offset="0"/>
<GradientStop Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Row="0" Grid.ColumnSpan="2" Text="GBP / USD" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="SemiBold"/>
<Image Grid.Row="1" Grid.Column="0" Source="/Resources/GBP.ico"/>
<Image Grid.Row="1" Grid.Column="1" Source="/Resources/USD.ico"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<!--<Setter TargetName="ButtonBorder" Property="Background" Value="Blue"/>-->
<Setter TargetName="recGlow" Property="Opacity" Value="0.8"/>
<Setter Property="RenderTransform" TargetName="ButtonBorder">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Rectangle is too small to be observed.
Set HorizontalAlignment and VerticalAlignment to Stretch and set Grid.ColumnSpan to 2 on rectangle -
<Rectangle x:Name="recGlow" HorizontalAlignment="Stretch" Stroke="Black"
VerticalAlignment="Stretch" Opacity="0" Grid.ColumnSpan="2">
Would somebody know how to recreate this button style in WPF? As I do not know how to make the different compartments. As well as the 2 different texts and text styles?
To solve your question definitely need to use the Style and Template for the Button. But how exactly does he look like? Decisions may be several. For example, Button are two texts to better define the relevant TextBlocks? Can be directly in the template, but then use the buttons will be limited, because the template can be only one ContentPresenter. I decided to do things differently, to identify one ContentPresenter with an icon in the form of a Path, and the content is set using the buttons on the side.
The style:
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Sample of using:
<Button Width="200" Height="50" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button.Content>
<StackPanel>
<TextBlock Text="Watch Now" FontSize="20" />
<TextBlock Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Button.Content>
</Button>
Output
It is best to StackPanel determine the Resources and set the Button so:
<Window.Resources>
<StackPanel x:Key="MyStackPanel">
<TextBlock Name="MainContent" Text="Watch Now" FontSize="20" />
<TextBlock Name="DurationValue" Text="Duration: 50m" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Window.Resources>
<Button Width="200" Height="50" Content="{StaticResource MyStackPanel}" VerticalAlignment="Top" Margin="0,20,0,0" />
The question remains with setting the value for TextBlock Duration, because this value must be dynamic. I implemented it using attached DependencyProperty. Set it to the window, like that:
<Window Name="MyWindow" local:MyDependencyClass.CurrentDuration="Duration: 50m" ... />
Using in TextBlock:
<TextBlock Name="DurationValue" Text="{Binding ElementName=MyWindow, Path=(local:MyDependencyClass.CurrentDuration)}" FontSize="12" Foreground="Gainsboro" />
In fact, there is no difference for anyone to determine the attached DependencyProperty, because it is the predominant feature.
Example of set value:
private void Button_Click(object sender, RoutedEventArgs e)
{
MyDependencyClass.SetCurrentDuration(MyWindow, "Duration: 101m");
}
A complete listing of examples:
XAML
<Window x:Class="ButtonHelp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ButtonHelp"
Name="MyWindow"
Title="MainWindow" Height="350" Width="525"
WindowStartupLocation="CenterScreen"
local:MyDependencyClass.CurrentDuration="Duration: 50m">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#373737" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="FontFamily" Value="./#Segoe UI" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}">
<Grid>
<Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z "/>
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel x:Key="MyStackPanel">
<TextBlock Name="MainContent" Text="Watch Now" FontSize="20" />
<TextBlock Name="DurationValue" Text="{Binding ElementName=MyWindow, Path=(local:MyDependencyClass.CurrentDuration)}" FontSize="12" Foreground="Gainsboro" />
</StackPanel>
</Window.Resources>
<Grid>
<Button Width="200" Height="50" Content="{StaticResource MyStackPanel}" VerticalAlignment="Top" Margin="0,20,0,0" />
<Button Content="Set some duration" Style="{x:Null}" Width="140" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left" Click="Button_Click" />
</Grid>
Code behind
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
MyDependencyClass.SetCurrentDuration(MyWindow, "Duration: 101m");
}
}
public class MyDependencyClass : DependencyObject
{
public static readonly DependencyProperty CurrentDurationProperty;
public static void SetCurrentDuration(DependencyObject DepObject, string value)
{
DepObject.SetValue(CurrentDurationProperty, value);
}
public static string GetCurrentDuration(DependencyObject DepObject)
{
return (string)DepObject.GetValue(CurrentDurationProperty);
}
static MyDependencyClass()
{
PropertyMetadata MyPropertyMetadata = new PropertyMetadata("Duration: 0m");
CurrentDurationProperty = DependencyProperty.RegisterAttached("CurrentDuration",
typeof(string),
typeof(MyDependencyClass),
MyPropertyMetadata);
}
}
Here's my attempt. Looks more similar to the OP's sample and provides settable properties for icon (FrameworkElement), title (string) and subtitle (string). The output looks like this:
Here's XAML:
<Button x:Class="Controls.FancyButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Controls"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Width="300" Height="80"
BorderBrush="{x:Null}" BorderThickness="0">
<Button.Effect>
<DropShadowEffect BlurRadius="12" Color="Gray" Direction="270" Opacity=".8" ShadowDepth="3" />
</Button.Effect>
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid Width="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=ActualWidth}"
Height="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=ActualHeight}">
<Border x:Name="MainBorder" CornerRadius="3" Grid.ColumnSpan="2" Margin="0,0,4,4" BorderBrush="Black" BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF5E5E5E" Offset="0" />
<GradientStop Color="#FF040404" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Border CornerRadius="2" Margin="0" BorderBrush="LightGray" BorderThickness="0,1,0,0" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Line X1="10" Y1="0" X2="10" Y2="10" Stretch="Fill" Grid.Column="0" HorizontalAlignment="Right" Stroke="#0C0C0C" Grid.RowSpan="2" />
<Line X1="10" Y1="0" X2="10" Y2="10" Stretch="Fill" Grid.Column="1" HorizontalAlignment="Left" Grid.RowSpan="2">
<Line.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#4D4D4D" Offset="0" />
<GradientStop Color="#2C2C2C" Offset="1" />
</LinearGradientBrush>
</Line.Stroke>
</Line>
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" Grid.RowSpan="2">
<ContentControl.Content>
<Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Image">
<Binding.FallbackValue>
<Path Data="M0,0 L30,15 L0,30Z">
<Path.Effect>
<DropShadowEffect Direction="50" ShadowDepth="2" />
</Path.Effect>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#4B86B2" Offset="0" />
<GradientStop Color="#477FA8" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</Binding.FallbackValue>
</Binding>
</ContentControl.Content>
</ContentControl>
<Grid Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock x:Name="Title" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Title, FallbackValue='Watch Now'}" Grid.Column="1" VerticalAlignment="Bottom" FontFamily="Calibri" FontWeight="Bold" FontSize="28" Foreground="White" Margin="20,0,0,0" />
<TextBlock x:Name="SubTitle" Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SubTitle, FallbackValue='Duration: 50 min'}" Grid.Column="1" Grid.Row="1" VerticalAlignment="top" FontFamily="Calibri" FontSize="14" Foreground="White" Margin="20,0,0,0" />
</Grid>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Title" Property="TextDecorations" Value="Underline" />
<Setter TargetName="SubTitle" Property="TextDecorations" Value="Underline" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="MainBorder" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF5E5E5E" Offset="0" />
<GradientStop Color="#FFA4A4A4" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Here's the code-behind:
using System.Windows;
using System.Windows.Controls;
namespace Controls
{
public partial class FancyButton : Button
{
public FancyButton()
{
InitializeComponent();
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(FancyButton), new FrameworkPropertyMetadata("Title", FrameworkPropertyMetadataOptions.AffectsRender));
public string SubTitle
{
get { return (string)GetValue(SubTitleProperty); }
set { SetValue(SubTitleProperty, value); }
}
public static readonly DependencyProperty SubTitleProperty =
DependencyProperty.Register("SubTitle", typeof(string), typeof(FancyButton), new FrameworkPropertyMetadata("SubTitle", FrameworkPropertyMetadataOptions.AffectsRender));
public FrameworkElement Image
{
get { return (FrameworkElement)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(FrameworkElement), typeof(FancyButton), new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
}
}
Here is how to use it:
<controls:FancyButton Grid.Row="1" HorizontalAlignment="Right" Margin="3" Title="Watch Now" SubTitle="Duration: 50 min">
<controls:FancyButton.Image>
<Path Data="M0,0 L30,15 L0,30Z">
<Path.Effect>
<DropShadowEffect Direction="50" ShadowDepth="2" />
</Path.Effect>
<Path.Fill>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#4B86B2" Offset="0" />
<GradientStop Color="#477FA8" Offset="1" />
</LinearGradientBrush>
</Path.Fill>
</Path>
</controls:FancyButton.Image>
</controls:FancyButton>
<!--Customize button -->
<LinearGradientBrush x:Key="Buttongradient" StartPoint="0.500023,0.999996" EndPoint="0.500023,4.37507e-006">
<GradientStop Color="#5e5e5e" Offset="1" />
<GradientStop Color="#0b0b0b" Offset="0" />
</LinearGradientBrush>
<Style x:Key="hhh" TargetType="{x:Type Button}">
<Setter Property="Background" Value="{DynamicResource Buttongradient}"/>
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="15" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="4" Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0.5">
<Border.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="2"></DropShadowEffect>
</Border.Effect>
<Grid>
<Path Width="9" Height="16.5" Stretch="Fill" Fill="#000" HorizontalAlignment="Left" Margin="16.5,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z " Opacity="0.2">
</Path>
<Path x:Name="PathIcon" Width="8" Height="15" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="17,0,0,0" Data="F1 M 30.0833,22.1667L 50.6665,37.6043L 50.6665,38.7918L 30.0833,53.8333L 30.0833,22.1667 Z ">
<Path.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="5"></DropShadowEffect>
</Path.Effect>
</Path>
<Line HorizontalAlignment="Left" Margin="40,0,0,0" Name="line4" Stroke="Black" VerticalAlignment="Top" Width="2" Y1="0" Y2="640" Opacity="0.5" />
<ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E59400" />
<Setter Property="Foreground" Value="White" />
<Setter TargetName="PathIcon" Property="Fill" Value="Black" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="OrangeRed" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In this day and age of mouse driven computers and tablets with touch screens etc, it is often forgotten to cater for input via keyboard only. A button should support a focus rectangle (the dotted rectangle when the button has focus) or another shape matching the button shape.
To add a focus rectangle to the button, use this XAML (from this site).
Focus rectangle style:
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="2" StrokeThickness="1" Stroke="#60000000" StrokeDashArray="1 2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Applying the style to the button:
<Style TargetType="Button">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}" />
...
<Button x:Name="mybtnSave" FlowDirection="LeftToRight" HorizontalAlignment="Left" Margin="813,614,0,0" VerticalAlignment="Top" Width="223" Height="53" BorderBrush="#FF2B3830" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontFamily="B Titr" FontSize="15" FontWeight="Bold" BorderThickness="2" TabIndex="107" Click="mybtnSave_Click" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF080505" Offset="1"/>
<GradientStop Color="White" Offset="0.536"/>
</LinearGradientBrush>
</Button.Background>
<Button.Effect>
<DropShadowEffect/>
</Button.Effect>
<StackPanel HorizontalAlignment="Stretch" Cursor="Hand" >
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF3ED82E" Offset="0"/>
<GradientStop Color="#FF3BF728" Offset="1"/>
<GradientStop Color="#FF212720" Offset="0.52"/>
</LinearGradientBrush>
</StackPanel.Background>
<Image HorizontalAlignment="Left" Source="image/Append Or Save 3.png" Height="36" Width="203" />
<TextBlock HorizontalAlignment="Center" Width="145" Height="22" VerticalAlignment="Top" Margin="0,-31,-35,0" Text="Save Com F12" FontFamily="Tahoma" FontSize="14" Padding="0,4,0,0" Foreground="White" />
</StackPanel>
</Button>
I want to create a custom WPF dropdown menu, so I created a User control which contains a ToggleButton and a Popup control. The popup appears when I click on the button.
Now I want to add a mouse hover effect on the menu items in the popup: but the LinearGradientBrush is not working with alpha channels:
<UserControl.Resources>
...
<Style x:Key="SubMenuItemStyle" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
<Rectangle x:Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"
Fill="{TemplateBinding Background}" />
<StackPanel>
<TextBlock x:Name="text" Text="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" />
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="rectangle" Value="#30000000"/>
<Setter Property="Fill" TargetName="rectangle">
<Setter.Value>
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="#10000000" Offset="0"/>
<GradientStop Color="#10FFFFFF" Offset="1"/>
<!-- Not works... -->
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" TargetName="text" Value="#FF9A9A9A"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Controls:ToggleImageButton Style="{DynamicResource ArrowMenuStyle}" x:Name="imageButton" Height="21" />
<Popup x:Name="popup" PlacementTarget="{Binding ElementName=imageButton}" Placement="Bottom" StaysOpen="False" IsOpen="{Binding ElementName=imageButton, Path=IsChecked}">
<ItemsControl ItemsSource="{Binding MenuCommands}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding Name}" Command="{Binding Command}" Background="{Binding ElementName=popupMenuControl, Path=MenuBackground}" Foreground="{Binding ElementName=popupMenuControl, Path=MenuForeground}" Click="MenuItem_Click" Style="{StaticResource SubMenuItemStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Popup>
</Grid>
When I set the GradientBrush to this, everything works fine:
<LinearGradientBrush EndPoint="0,0" StartPoint="1,1">
<GradientStop Color="Green" Offset="0"/>
<GradientStop Color="Yellow" Offset="1"/>
</LinearGradientBrush>
But it seems the Alpha channel breaks the whole thing, and what I see is a black rectangle.
...Any idea?
If I put the MenuItems inside a Menu container, the Menu overrides my styles...
Thanks in advance!
have you set AllowsTransparency to true?