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.
Related
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" />
[...]
So I want to use this border in multiple places, but I don't want to have to copy/paste it multiple times. How would I define it in the <Window.Resources> so I could just reference it?
<Border BorderThickness="0,0,0,1.5" Margin="5" Padding="0">
<Border.BorderBrush>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0" Opacity="0.7">
<GradientStop Offset="0.2" Color="Black"/>
<GradientStop Offset="0.5" Color="White"/>
<GradientStop Offset="0.8" Color="Black"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
Thank you for any help...
In Resources you can keep style, and can apply that style to any control in your Window/User Control. So you can do
<Style x:Key="BorderStyle" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="0,0,0,1.5" />
<Setter Property="Margin" Value="5" />
<Setter Property="Padding" Value="0" />
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,1" EndPoint="1,0" Opacity="0.7">
<GradientStop Offset="0.2" Color="Black"/>
<GradientStop Offset="0.5" Color="White"/>
<GradientStop Offset="0.8" Color="Black"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
and can use it like
<Border Style="{StaticResource BorderStyle}" />
I have below style declared for ProgressBar in App.xaml
<Application.Resources>
<LinearGradientBrush x:Key="ProgressBarBorderBrush"
EndPoint="0,1"
StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#B2B2B2"
Offset="0"/>
<GradientStop Color="#8C8C8C"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarBackground"
EndPoint="1,0"
StartPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#BABABA"
Offset="0"/>
<GradientStop Color="#C7C7C7"
Offset="0.5"/>
<GradientStop Color="#BABABA"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarTopHighlight"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#80FFFFFF"
Offset="0.05"/>
<GradientStop Color="#00FFFFFF"
Offset="0.25"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarGlassyHighlight"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#50FFFFFF"
Offset="0.5385"/>
<GradientStop Color="#00FFFFFF"
Offset="0.5385"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorGlassyHighlight"
StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#90FFFFFF"
Offset="0.5385"/>
<GradientStop Color="#00FFFFFF"
Offset="0.5385"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectLeft"
RadiusX="1"
RadiusY="1"
RelativeTransform="1,0,0,1,0.5,0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#60FFFFC4"
Offset="0"/>
<GradientStop Color="#00FFFFC4"
Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorLightingEffect"
StartPoint="0,1"
EndPoint="0,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#60FFFFC4"
Offset="0"/>
<GradientStop Color="#00FFFFC4"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<RadialGradientBrush x:Key="ProgressBarIndicatorLightingEffectRight"
RadiusX="1"
RadiusY="1"
RelativeTransform="1,0,0,1,-0.5,0.5">
<RadialGradientBrush.GradientStops>
<GradientStop Color="#60FFFFC4"
Offset="0"/>
<GradientStop Color="#00FFFFC4"
Offset="1"/>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeLeft"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#0C000000"
Offset="0"/>
<GradientStop Color="#20000000"
Offset="0.3"/>
<GradientStop Color="#00000000"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorDarkEdgeRight"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#00000000"
Offset="0"/>
<GradientStop Color="#20000000"
Offset="0.7"/>
<GradientStop Color="#0C000000"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
StartPoint="0,0"
EndPoint="1,0">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#00FFFFFF"
Offset="0"/>
<GradientStop Color="#60FFFFFF"
Offset="0.4"/>
<GradientStop Color="#60FFFFFF"
Offset="0.6"/>
<GradientStop Color="#00FFFFFF"
Offset="1"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style x:Key="{x:Type ProgressBar}"
TargetType="{x:Type ProgressBar}">
<Setter Property="Foreground"
Value="#01D328"/>
<Setter Property="Background"
Value="{StaticResource ProgressBarBackground}"/>
<Setter Property="BorderBrush"
Value="{StaticResource ProgressBarBorderBrush}"/>
<Setter Property="BorderThickness"
Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid Name="TemplateRoot"
SnapsToDevicePixels="true">
<Rectangle Fill="{TemplateBinding Background}"
RadiusX="2"
RadiusY="2"/>
<Border Background="{StaticResource ProgressBarGlassyHighlight}"
Margin="1"
CornerRadius="2"/>
<Border BorderBrush="#80FFFFFF"
Background="{StaticResource ProgressBarTopHighlight}"
BorderThickness="1,0,1,1"
Margin="1"/>
<Rectangle Name="PART_Track"
Margin="1"/>
<Decorator x:Name="PART_Indicator"
HorizontalAlignment="Left"
Margin="1">
<Grid Name="Foreground">
<Rectangle x:Name="Indicator"
Fill="{TemplateBinding Foreground}"/>
<Grid x:Name="Animation" ClipToBounds="true">
<Rectangle x:Name="PART_GlowRect" Width="100"
Fill="{StaticResource ProgressBarIndicatorAnimatedFill}"
Margin="-100,0,0,0"
HorizontalAlignment="Left">
</Rectangle>
</Grid>
<Grid x:Name="Overlay">
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="15"/>
<ColumnDefinition Width="0.1*"/>
<ColumnDefinition MaxWidth="15"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Rectangle x:Name="LeftDark"
Grid.RowSpan="2"
Fill="{StaticResource ProgressBarIndicatorDarkEdgeLeft}"
RadiusX="1"
RadiusY="1"
Margin="1,1,0,1"/>
<Rectangle x:Name="RightDark"
Grid.RowSpan="2"
Grid.Column="2"
RadiusX="1"
RadiusY="1"
Fill="{StaticResource ProgressBarIndicatorDarkEdgeRight}"
Margin="0,1,1,1"/>
<Rectangle x:Name="LeftLight"
Grid.Column="0"
Grid.Row="2"
Fill="{StaticResource ProgressBarIndicatorLightingEffectLeft}"/>
<Rectangle x:Name="CenterLight"
Grid.Column="1"
Grid.Row="2"
Fill="{StaticResource ProgressBarIndicatorLightingEffect}"/>
<Rectangle x:Name="RightLight"
Grid.Column="2"
Grid.Row="2"
Fill="{StaticResource ProgressBarIndicatorLightingEffectRight}"/>
<Border x:Name="Highlight1"
Grid.RowSpan="2"
Grid.ColumnSpan="3"
Background="{StaticResource ProgressBarIndicatorGlassyHighlight}"/>
<Border x:Name="Highlight2"
Grid.RowSpan="2"
Grid.ColumnSpan="3"
Background="{StaticResource ProgressBarTopHighlight}"/>
</Grid>
</Grid>
</Decorator>
<Border BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
CornerRadius="2"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Orientation"
Value="Vertical">
<Setter TargetName="TemplateRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsIndeterminate"
Value="true">
<Setter TargetName="LeftDark"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="RightDark"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="LeftLight"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="CenterLight"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="RightLight"
Property="Visibility"
Value="Collapsed"/>
<Setter TargetName="Indicator"
Property="Visibility"
Value="Collapsed"/>
</Trigger>
<Trigger Property="IsIndeterminate"
Value="false">
<Setter TargetName="Animation"
Property="Background"
Value="#80B5FFA9"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
As you can see <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> has been mentioned and as per my knowledge, this should be applied to all ProgressBar in the application.
I have below ProgressBar in Login.xaml page and this is kept under View folder.
<ProgressBar Name="LoginProgress" Minimum="0" Maximum="100" HorizontalAlignment="Left"
Height="24" Margin="99,124,0,0" VerticalAlignment="Top" Width="109"
Style="{DynamicResource {x:Type ProgressBar}}">
</ProgressBar>
And I have also implicitly mentioned Style property for ProgressBar. After all of this, the style is not getting applied. Searched through all the pages in google but couldn't quite get proper resource to understand and hence am here. Could anyone let me know or provide more insights on how this has to be done?
Please refer below stack overflow link. This issue sis discussed in depth here.
I guess answer given by Dylan should help you out.
what does x:Key="{x:Type TextBox}" do?
I've been having a problem with assigning Color to GradientStop in a trigger (because trigger cannot target a GradientStop element). So I read some article about this and found solution with using Tag. Here is my code:
<Border BorderThickness="1" CornerRadius="1.5" x:Name="border">
<Border.Tag>
<Color>#FF28AAE6</Color>
</Border.Tag>
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="{Binding ElementName=border, Path=Tag}" Offset="0" />
<GradientStop Color="#FF0A78AA" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Tag" Value="#FF46C8FF" />
</Trigger>
</ControlTemplate.Triggers>
But I need to set more values in that trigger - Color for the second GradientStop. How can I do it?
Why not just set the Background to the a new brush that you want it to be instead of trying to update the brush properties?
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#FF46C8FF" Offset="0" />
<GradientStop Color="#FF0A78AA" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
If you do need to do it your way, you could create some Canvases with Visibilty="Collapsed" and use ElementBinding to get the colours from those
<ControlTemplate>
<Border BorderThickness="1" CornerRadius="1.5" x:Name="border">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="{Binding ElementName=Canvas1, Path=Tag}" Offset="0" />
<GradientStop Color="{Binding ElementName=Canvas2, Path=Tag}" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<Grid>
<Canvas Name="Canvas1" Visibility="Collapsed">
<Canvas.Tag>
<Color>#FF28AAE6</Color>
</Canvas.Tag>
</Canvas>
<Canvas Name="Canvas2" Visibility="Collapsed">
<Canvas.Tag>
<Color>#FF0A78AA</Color>
</Canvas.Tag>
</Canvas>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Canvas1" Property="Tag" Value="Yellow" />
<Setter TargetName="Canvas2" Property="Tag" Value="Green" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I just want to ask how should I put my image (dynamically) in this following code:
<Style x:Key="ButtonStyler" TargetType="{x:Type Button}">
<Setter Property="Background">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="black" Offset="0" />
<GradientStop Color="black" Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="40" />
<Setter Property="Foreground" Value="white" />
<Setter Property="Grid.Row" Value="2" />
<Setter Property="Grid.Column" Value="3" />
<Setter Property="Content" Value="Forgot your password?" />
<Setter Property="ContentTemplate"
Value="{DynamicResource myContentTemplate}" />
<Setter Property="Margin" Value="3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="GelBackground"
Opacity="1"
RadiusX="9"
RadiusY="9"
Fill="{TemplateBinding Background}"
StrokeThickness="0.35">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="white"
Offset="0" />
<GradientStop Color="#666666"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine"
Margin="2,2,2,0"
VerticalAlignment="top"
RadiusX="6"
RadiusY="6"
Opacity="1"
Stroke="transparent"
Height="15px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ccffffff"
Offset="0" />
<GradientStop Color="transparent"
Offset="1" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter x:Name="GelButtonContent"
VerticalAlignment="center"
HorizontalAlignment="center"
Content="{TemplateBinding Content}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="lime"
Offset="0" />
<GradientStop Color="DarkGreen"
Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="GelBackground">
<Setter.Value>
<RadialGradientBrush>
<RadialGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#ffcc00"
Offset="0" />
<GradientStop Color="#cc9900"
Offset="1" />
</GradientStopCollection>
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="black " />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Foreground" Value="black " />
</Trigger>
</Style.Triggers>
</Style>
I am planning to set the image's file destination in my code-behind (C#). For the output, the WPF button can both display the text and the image (placed in the right side of the text)
Any suggestions?
Your template includes a ContentPresenter, bound to the Content of the Button. So, you can simply set the image and/or text as the content of the button and they will go there.
<Button Style="{StaticResource ButtonStyler}">
<StackPanel Orientation="Horizontal">
<Image Source="..." />
<TextBlock Text="..." />
</StackPanel>
</Button>
just try this link. In this they created custom implementation of the button and a dependency property ImageSource so the you can use either from the code behind or from the XAML
Creating an image+text button with a control template?