I'm not sure if it's even possible, but worth to try and ask. So - it is possible to add somehow control to resource dictionary?
For example I have style which I apply to every window in my application:
<Style x:Key="WindowStyle" TargetType="Window">
<Setter Property="WindowState" Value="Maximized" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.PrimaryScreenWidth}}" />
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.PrimaryScreenHeight}}" />
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/myApp;component/Pictures/gradientBackground.png" />
</Setter.Value>
</Setter>
<Setter Property="Icon" Value="/myApp;component/Pictures/logo_small.png" />
</Style>
As you can see every window is maximized and have no borders etc - it's just full screen window. What I'd like to do is add simple button in the right-top corner, which will work as minimize.
Any idea?
Thanks in advance!
<Style x:Key="WindowStyle" TargetType="Window">
<Setter Property="WindowState" Value="Maximized" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Width" Value="{DynamicResource {x:Static SystemParameters.PrimaryScreenWidth}}" />
<Setter Property="Height" Value="{DynamicResource {x:Static SystemParameters.PrimaryScreenHeight}}" />
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/myApp;component/Pictures/gradientBackground.png" />
</Setter.Value>
</Setter>
<Setter Property="Icon" Value="/myApp;component/Pictures/logo_small.png" />
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Button Content="X" HorizontalAlignment="Right" Margin="2"></Button>
<ContentControl Grid.Row="1" Content="{TemplateBinding Content}"></ContentControl>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
This question already has answers here:
Change color of Button when Mouse is over
(5 answers)
Closed 1 year ago.
I need to change text color, cursor and background of a button on mouse hover. I'm trying to do this by changing styles but also tried adding style trigger directly to the button
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
Text color and cursor change, but background color remain the same (light blue). Please tell me what could be the problem?
Screenshot
Full code:
<Window x:Class="WpfApp3.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:WpfApp3"
mc:Ignorable="d"
Title="Заголовок" Height="640" Width="960">
<Window.Resources>
<Style TargetType="Button" x:Key="SidebarButton">
<Style.Setters>
<Setter Property="Control.FontFamily" Value="Segoe UI" />
<Setter Property="Control.Background" Value="#333742" />
<Setter Property="Control.Foreground" Value="White" />
<Setter Property="Control.BorderThickness" Value="0" />
<Setter Property="Control.Padding" Value="10" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Background="#333742">
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.2*" MinWidth="150" MaxWidth="200"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" Background="#414550"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0"></StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="0" Grid.Row="1" Background="#333742">
<Border Height="80">
<TextBlock FontSize="18" Foreground="#fff" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="30">Меню</TextBlock>
</Border>
<Button Style="{StaticResource SidebarButton}">Печать кодов</Button>
<Button Style="{StaticResource SidebarButton}">Настройки</Button>
<Button Style="{StaticResource SidebarButton}">О программе</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Grid.Row="1" Background="#2d3039"></StackPanel>
</Grid>
</Window>
You can find the answer in this response.
You can define the style like this :
<Style TargetType="Button" x:Key="SidebarButton">
<Style.Setters>
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Background" Value="#333742" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}" Padding="10">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Black" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
I have a button that I need to change the background and foreground color of when the button is in focus. I have the background color change working, but cannot get the foreground color change (on the label) to work.
I want to do this in XAML only.
My Button:
<Button Style="{StaticResource ModButtonWhite}"
Name="btnConnect"
Height="30"
Click="btnConnect_Click"
Width="75"
Margin="0,0,15,0">
<Label Name ="btnConnectLabel" Content="Re-_Connect" />
</Button>
My Style:
<Style TargetType="Button"
x:Key="ModButtonWhite">
<Setter Property="Foreground"
Value="White" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
BorderThickness="1"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="Label">
<Setter Property="Foreground"
Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Opacity"
Value=".4" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</Style.Triggers>
All you need to do is to bind the Label.Foreground to the Button.Foreground. No need of any additional styles defined in the Style.Resources dictionary. Just the plain style to override the Button.Template:
<Window>
<Window.Resources>
<Style TargetType="Button"
x:Key="ModButtonWhite">
<Setter Property="Foreground"
Value="White" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
BorderThickness="1"
BorderBrush="White">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsFocused"
Value="True">
<Setter Property="Background"
Value="White" />
<Setter Property="Foreground"
Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Button Style="{StaticResource ModButtonWhite}">
<Label Content="Click me!"
Foreground="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}" />
</Button>
</Window>
I can create a standard WPF window as follows, and all works fine.
<Window x:Class="WpfWindowStyleTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
AllowsTransparency="True"
Background="Transparent"
ResizeMode="CanResizeWithGrip"
SizeToContent="WidthAndHeight"
TextOptions.TextFormattingMode="Display"
TextOptions.TextRenderingMode="ClearType"
Topmost="True"
UseLayoutRounding="True"
WindowStyle="None">
<Grid>
<Border Background="LightGreen"
BorderBrush="Navy"
BorderThickness="2"
CornerRadius="4">
// window content here ...
</Border>
</Grid>
</Window>
However, my application requires a number of common components (way beyond a simple border) to be shared by all windows, so I tried to extract it into a common class.
public class BaseView: Window
{
static BaseView()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(BaseView), new FrameworkPropertyMetadata(typeof(BaseView)));
}
}
with the following style in generic.xaml
<Style BasedOn="{StaticResource {x:Type Window}}" TargetType="{x:Type local:BaseView}">
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="SizeToContent" Value="WidthAndHeight" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="TextOptions.TextRenderingMode" Value="ClearType" />
<Setter Property="Topmost" Value="True" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:BaseView}">
<Grid>
<AdornerDecorator>
<Border Background="LightGreen"
BorderBrush="Navy"
BorderThickness="2"
CornerRadius="4">
<ContentPresenter Margin="24" HorizontalAlignment="Left" />
</Border>
</AdornerDecorator>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This works fine.
However, when I add another property setter to the style
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
The whole control template is ignored, and just the specified window content is displayed (in an empty, resizable window).
Is there any way around this?
Your issue depends on the standard Window style; take a look:
<Style x:Key="{x:Type Window}" TargetType="{x:Type Window}">
<Setter Property="Control.Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Control.Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border Background="{TemplateBinding Control.Background}" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="{TemplateBinding Control.BorderThickness}">
<AdornerDecorator>
<ContentPresenter />
</AdornerDecorator>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Window.ResizeMode" Value="CanResizeWithGrip">
<Setter Property="Control.Template" Value="{StaticResource ħ}" />
</Trigger>
</Style.Triggers>
</Style>
As you can see, if the ResizeMode is set to CanResizeWithGrip, a trigger changes the Window's template.
A simple solution could be adding a ResizeGrip to your template and avoing that your style inherits from the default one. Something like:
<Style TargetType="{x:Type local:BaseView}">
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="SizeToContent" Value="WidthAndHeight" />
<Setter Property="TextOptions.TextFormattingMode" Value="Display" />
<Setter Property="TextOptions.TextRenderingMode" Value="ClearType" />
<Setter Property="Topmost" Value="True" />
<Setter Property="UseLayoutRounding" Value="True" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="ResizeMode" Value="CanResizeWithGrip" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:BaseView}">
<Grid>
<AdornerDecorator>
<Border Background="LightGreen"
BorderBrush="Navy"
BorderThickness="2"
CornerRadius="4">
<ContentPresenter Margin="24" HorizontalAlignment="Left" />
</Border>
</AdornerDecorator>
<ResizeGrip Name="WindowResizeGrip" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsTabStop="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I hope it can help you.
I want to create buttons which have a image and a text included and get a nice shadowing. Particularly, I want the image and label have a light grey shadowing, but when moving the mouse over the button I'd like a kind of blue shadowing. Moving away sets it back to light grey. I would need some help as I just can't figure out how to achive it (I'm new to WPF).
The Buttons looks like ...
<Button>
<Button.Content>
<StackPanel Orientation="Vertical">
<Image Source="Images/preferences-system.png" />
<Label HorizontalAlignment="Center">Settings</Label>
</StackPanel>
</Button.Content>
</Button>
The Canvas goes ...
<Canvas DockPanel.Dock="Left" Background="#FF349EBC">
<Canvas.Resources>
<DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" />
<DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" />
<Style TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="2">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource dropMouseOverShadow}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style TargetType="{x:Type Image}">
<Style.Setters>
<Setter Property="Effect" Value="{StaticResource dropLightShadow}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Label}">
<Style.Setters>
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Gill Sans MT" />
<Setter Property="Effect" Value="{StaticResource dropLightShadow}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</Canvas.Resources>
What I get is a light grey shadowing on image and labels on begin. Moving the mouse over the button the grey and light blue get mixed. When moving further on the image it gets the light blue only. The same goes for the label.
How can I achive switching the shadowning to light blue when I mouse over the button and not the image and label itself? Anyone an idea or an completly other approach?
Apply the LightGray Effect to the ContentPresenter. Then on the IsMouseOver Trigger, set the Effect property of the ContentPresenter to the blue Effect.
NOTE: Accomplish this by setting the x:Name attribute of the ContentPresenter, then accessing the ContentPresenter by name via the Setter using TargetName.
NOTE: Remove the various other Effect settings in the styles of the child elements. Applying the Effect to the ContentPresenter causes the child elements to inherit the Effect.
<Canvas DockPanel.Dock="Left" Background="#FF349EBC">
<Canvas.Resources>
<DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" />
<DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" />
<Style TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="2">
<ContentPresenter x:Name="cp" Effect="{StaticResource dropLightShadow}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="cp" Property="Effect" Value="{StaticResource dropMouseOverShadow}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style TargetType="{x:Type Label}">
<Style.Setters>
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Gill Sans MT" />
</Style.Setters>
</Style>
How can I make Button to look like LinkButton, and I don't want to use
Hyperlink...!!
Any suggestions
If you don't want any of the normal Button style and just want something that looks like a hyperlink you could start with this
<Button Margin="5" Content="Test" Cursor="Hand">
<Button.Template>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Button.Template>
<Button.Style>
<Style TargetType="Button">
<Setter Property="Foreground" Value="Blue" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Here's the same as a style:
<Style
x:Key="LinkButton"
TargetType="Button">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Button">
<TextBlock
TextDecorations="Underline">
<ContentPresenter /></TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter
Property="Foreground"
Value="Blue" />
<Style.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
and you can use it like this:
<Button Style="{StaticResource LinkButton}" Content="Clicky" />
<Style x:Key="LinkButton"
TargetType="Button"
BasedOn="{StaticResource ResourceKey={x:Type Button}}"
>
<Setter Property="Width" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="Center"
>
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextDecorations" Value="Underline" />
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
MichaC's and Anderson's version placed the underline slightly wrong, here is an updated version that will just add an underline to any TextBlock that are inside the ContentPresenter.
Here's MichaC's suggestion implemented as a Style that you can reuse on any button:
<Style x:Key="LinkButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline">
<ContentPresenter />
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="Blue" />
<Setter Property="Cursor" Value="Hand" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
The easiest way (I do this in my application):
<TextBlock Name="..."
Text="..."
Cursor="Hand"
Foreground="Blue"
TextDecorations="Underline"
MouseLeftButtonUp=..."
/>
you have full control on TextDecoration, e.g. change pen style or offset.
take a look at this link to find out more: http://msdn.microsoft.com/en-us/library/system.windows.textdecorations.underline.aspx
Another solution using Hyperlink is to put in inside TextBlock.
<TextBlock>
<Hyperlink Click="...">
<TextBlock Text="Link text" />
</Hyperlink>
</TextBlock>
Why do you not want to use Hyperlink?
<Button>
<Hyperlink>
</Button>
Combination of all proposed solutions:
Completed style, as in the accepted version, but without hardcoded values.
<Style
x:Key="HyperlinkButton"
TargetType="{x:Type Button}"
BasedOn="{StaticResource {x:Type Button}}"
>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<TextBlock>
<Hyperlink
Command="{TemplateBinding Command}"
CommandTarget="{TemplateBinding CommandTarget}"
CommandParameter="{TemplateBinding CommandParameter}"
>
<ContentPresenter />
</Hyperlink>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>