I have a custom style for my 'default' Buttons, and also created a custom style for TextBlocks. If I remove the TextBlock style entirely, everything works fine, but once the TextBlock styling is added in for some reason the Button style is used on the Button's text 'default' state. It seems like some kind of inheritance is going on here but I can't see where in the msdn docs. What's going on?
I'm using Expression Blend 4-- and also another odd thing is that the preview in Blend looks fine, but when I RUN the application, the button styles are incorrect in their default state. Here's the styles which seem to be conflicting:
<ResourceDictionary>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFFDFF00" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleY="1.20" ScaleX="1.20"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
</ContentPresenter.Effect>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="/Rtk;component/Fonts/#Segoe Print"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Background" Value="{x:Null}"/>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="/Rtk;component/Fonts/#Segoe Print"/>
</Style>
</ResourceDictionary>
This is how I am using the Button control itself:
<Button Content="Button Text" FontSize="24"/>
(note that this fontsize is different from the size I specified in the default style, 18 - I want to override it in this button's case)
Edit:
The actual button entry looks like this in MainWindow.xaml, there's no other customizations other than the style changes I posed from App.xaml:
<Button Content="Button" HorizontalAlignment="Left" Margin="336,0,0,274.226" VerticalAlignment="Bottom" Width="75"/>
To illustrate what I'm seeing:
Just a fast wild guess, but when the content of a button is a string, isn't it default a textblock?
As people have suggested, your Button contains a Textblock created to hold the content, it is picking up the style from app.xaml, you can work around this in a few ways, here are a couple:
Put an explicit textblock into your button, and apply no style:
<Button Margin="272,192,277,0" VerticalAlignment="Top">
<TextBlock Text="Button" Style="{x:Null}"/>
</Button>
Put a textblock into your button style, also with a null style:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<TextBlock Text="{TemplateBinding Content}" Style="{x:Null}">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
Hopefully one of those 2 will work for you.
Looking only ay the code you posted, I can't see how the TextBlock Style would in any way influence the appearance of the Buttons - unless the Content of the Buttons consists (directly or indirectly) of TextBlocks. Can you post a more complete code sample, possibly including the Button's XAML?
Related
This should be simple, therefore it is something I am missing. I need to change the background color of the a button during the click only. So if a user click the button for 2 days, then the color changes during that two day period. Once the user is done clicking it returns to the normal color. Figured this would solve my issue:
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Button.Background" Value="Purple" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="0" BlurRadius="0" Opacity="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
Now I know the IsPressed does work as the DropShadowEffect work correctly during the press. However the color does not change. The only reason I could think why is that IsMouseOver is taking priority over IsPressed. If this is the case how can I get the two events to "work together?"
Now before people start linking me to this;
WPF changing button background on click or this Change Button Background color on EventTrigger in WPF or this Change Button Background color on EventTrigger in WPF
Yes those change the color of the button but irrespective on the users click time. As stated above I only want it effected during the actual user's click, like the DropShadowEffect
ahhh, I was right! The problem was in fact that IsMouseOver and IsPressed where not getting along! Here is the fix;
<Style x:Key="NewButton" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Green" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Button.Background" Value="Purple" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="0" BlurRadius="0" Opacity="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
I'm new to WPF and by following a quick tutorial I succeeded on getting a personalized button style as the following one:
<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>
<SolidColorBrush x:Key="NormalBrush" Color="#FF0C0C13"/>
<SolidColorBrush x:Key="LightBrush" Color="#FF2E2E3E"/>
<SolidColorBrush x:Key="PressedBrush" Color="#FF209FD4"/>
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#FF494968" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#FF2E2E3E" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<SolidColorBrush x:Key="HorizontalNormalBrush" Color="AntiqueWhite"/>
<SolidColorBrush x:Key="HorizontalLightBrush" Color="AntiqueWhite"/>
<SolidColorBrush x:Key="DarkBrush" Color="AntiqueWhite"/>
<SolidColorBrush x:Key="NormalBorderBrush" Color="Aqua"/>
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" BorderThickness="1" Background="{StaticResource NormalBrush}" BorderBrush="#FF2E2E3E">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource LightBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It seems indeed that we need to override the ControlTemplate and that to keep some functionalities (like the behaviour while hovering the mouse) we need to define them. What is already strange to me here, is that under ControlTemplate it is defined a Border tag and then the trigger refer to that Border. So as a first question, why Border and not something else?
But now the main question is: suppose I want exactly the same button, with the same colors and functionalities but without the borders. I tried to use the BasedOn similar to the following:
<Style x:Key="MyButtonStyleNoBorder" TargetType="{x:Type Button}" BasedOn="{StaticResource MyButtonStyle}">
<Setter Property="BorderThickness" Value="0"/>
</Style>
but no way. The only solution I found is to copy the entire code of MyButtonStyle and then to change only one character (!) to have BorderThickness="0". But this to me looks stupid. Can you please help?
So as a first question, why Border and not something else?
The element named Border is the outermost element and its child will inherit most of its state, in this case the background.
But now the main question is: suppose I want exactly the same button, with the same colors and functionalities but without the borders.
If you like a button without borders you can just set the BorderThickness property of the button to 0. directly or as a setter in the style.
The only solution I found is to copy the entire code of MyButtonStyle and then to change only one character (!) to have BorderThickness="0". But this to me looks stupid. Can you please help?
Styles are kind of a list for what property to change on a target. The basedOn functionality will use the basedOn-style and "add" the new setter from the new style.
A Template is more like a drawing (and some graphical behavior) of the control and when you specify a new one you just throw away the old one. I would be possible to do a basedOn there. How would we determine what to use and what to replace?
Not the answer you wished for but hopefully you got it anyway.
<Border x:Name="Border" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource NormalBrush}" BorderBrush="#FF2E2E3E">
<ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True"/>
</Border>
Will pick up the value the Button object gets on BorderThickness.
I would have done this using MVVM (if you have not considering MVVM yet).
In my ViewModel bound to the Button, I would add a property "IsBorderLess".
Then, on the Triggers:
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding IsBorderLess}" Value="True">
<Setter TargetName="Border" Property="BorderThickness" Value="0"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsBorderLess}" Value="False">
<Setter TargetName="Border" Property="BorderThickness" Value="10"/>
</DataTrigger>
..........
So I have the following style in my Window.Resources:
<Style TargetType="TabItem" x:Key="tiS">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Height="40" Width="186">
<Border Name="tiBorder" Background="Transparent">
<ContentPresenter ContentSource="Header"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.FontSize="20"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="90"/>
<Setter TargetName="tiBorder" Property="Background" Value="{DynamicResource tiB}"/>
<!--<Setter TargetName="tiBorder" Property="Margin" Value="0,-4,0,-4"/>-->
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Panel.ZIndex" Value="80"/>
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style is used on 5 TabItems, each with a different color given by 'DynamicResource tiB' in the trigger.
In each TabItem I have the following resource placed (Color1 is set in the Window.Resources):
<TabItem.Resources>
<SolidColorBrush x:Key="tiB" Color="{StaticResource Color1}"/>
</TabItem.Resources>
I was wondering, is there an easier way to do this or am I doing it right? This is the first time I'm working with styles in WPF so I want to do it right. (This code is working! Looking for a better (if there is one) solution to my situation.)
Here is the full code: http://pastebin.com/igwxgp6M
I believe this will work
<TabControl ...>
<TabControl.ItemsContainerStyle>
<Style TargetType="TabItem">
//Put triggers here
</Style>
<TabControl.ItemsContainerStyle>
</TabControl>
I am new in WPF.
What the way to change a togglebutton behavior.
to
with black baground and no border.
Is need to use Control Template?
You have to modify the Control Template or Style to change the look and feel of the existing Control available. Have a look at this sample which is some what similar to your requirement. what i have done is i changed the Chrome (default style of windows) and created my own style with Border and content presenter. Then i have created the Triggers for the style. For visualization, in the mouseover and ischecked event i am changing background color of the Border.
<Window.Resources>
<Style x:Key="ToggleButtonStyle1" TargetType="{x:Type ToggleButton}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="border">
<ContentPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
RecognizesAccessKey="True" TextElement.Foreground="White" HorizontalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true"/>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" TargetName="border" Value="#FF6C6C6C"/>
<Setter Property="CornerRadius" TargetName="border" Value="5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="border" Value="#FF282828"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ToggleButton HorizontalAlignment="Left" Margin="136,59,0,0" Style="{DynamicResource ToggleButtonStyle1}" VerticalAlignment="Top" Width="27" Height="24" Content="-" FontSize="21.333" FontWeight="Bold" HorizontalContentAlignment="Center" Padding="0" VerticalContentAlignment="Center" IsThreeState="True"/>
</Grid>
Yes, you want to use a ControlTemplate to change how the ToggleButton looks. Take a look at the page for the ToggleButton as well as this article:
Customizing the Appearance of an Existing Control by Creating a ControlTemplate
to get you started.
I've been recently playing with WPF and I've come across a number of problems that I can't solve. I have the following code in my generic.xaml:
<Style TargetType="{x:Type local:ClearButton}">
<Style.Resources>
<con:ValueConverter x:Key="converter" />
</Style.Resources>
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ClearButton}">
<Grid>
<Image Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/WPF-Libraries;component/Resources/ClearEnabled.png" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BitmapEffect">
<Setter.Value>
<OuterGlowBitmapEffect Opacity="0.5" GlowColor="Red" GlowSize="3" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source"
Value="/WPF-Libraries;component/Resources/ClearDisabled.png" />
</Trigger>
<!--Binding #1-->
<Trigger Property="{TemplateBinding local:ClearButton.IsPressed}" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<!--Binding #2-->
<ScaleTransform CenterX="CONVERTER BINDING:PASS WIDTH TO CONVERTER" CenterY="CONVERTER BINDING:PASS HEIGHT TO CONVERTER" ScaleX="0.75" ScaleY="0.75" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I can't get Binding #1 to work. I want to bind the trigger to the IsPressed property of the button, what should the binding be? Also what should the binding be for Binding #2 if I want to pass the button's Width and Height to the converter?
Also I could set the trigger this way instead:
<Style TargetType="{x:Type local:ClearButton}">
<Style.Resources>
<con:ValueConverter x:Key="converter" />
</Style.Resources>
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ClearButton}">
<!--Abbreviated-->
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!--Binding #1-->
<Trigger Property="{TemplateBinding local:ClearButton.IsPressed}" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<!--Binding #2-->
<ScaleTransform CenterX="CONVERTER BINDING" CenterY="CONVERTER BINDING" ScaleX="0.75" ScaleY="0.75" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Which one is better and what would the binding be for Binding #1 and #2?
Both approaches are a little bit off. Your first approach is struggling to reach the IsPressed property using binding, however the Property property of the Trigger object is not a DependencyProperty so it doesn't support binding.
Your second approach is closer to the mark but still wrong, again uses binding on the Property property of the Trigger.
Check this out instead:
<Style TargetType="Button" x:Key="ClearButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<TextBlock
Name="x"
Text="I will change my color when ou press me"
TextAlignment="Center"
VerticalAlignment="Center"
Foreground="Red"
TextWrapping="Wrap"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter
TargetName="x"
Property="Foreground"
Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice that I put the trigger logic on the control template level (specifying the target element), not on the individual element (the TextBlock in this case).