I'm trying to recreate a Valve VGUI interface style in WPF. So far I am able to assign a border to a button, but the border style does not change when pressing the button.
Here's my XAML code:
<Window.Resources>
<Style x:Key="BorderLight_Style" TargetType="Border">
<Setter Property="BorderBrush" Value="#889180" />
<Setter Property="BorderThickness" Value="1,1,0,0" />
</Style>
<Style x:Key="BorderShadow_Style" TargetType="Border">
<Setter Property="BorderBrush" Value="#FF282E22" />
<Setter Property="BorderThickness" Value="0,0,1,1" />
</Style>
<Style x:Key="BorderLight_Style_pressed" TargetType="Border">
<Setter Property="BorderBrush" Value="#FF282E22" />
<Setter Property="BorderThickness" Value="1,1,0,0" />
</Style>
<Style x:Key="BorderShadow_Style_pressed" TargetType="Border">
<Setter Property="BorderBrush" Value="#889180" />
<Setter Property="BorderThickness" Value="0,0,1,1" />
</Style>
<Style TargetType="Grid">
<Setter Property="Background" Value="#FF4C5844" />
</Style>
<Style TargetType="Button">
<Setter Property="Background" Value="#FF4C5844" />
<Setter Property="Foreground" Value="#D8DED3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="border" Style="{StaticResource BorderShadow_Style}">
<Border x:Name="border2" Style="{StaticResource BorderLight_Style}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Style" Value="{StaticResource BorderShadow_Style_pressed}" />
<Setter TargetName="border2" Property="Style" Value="{StaticResource BorderLight_Style_pressed}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Am I doing anything wrong with this? Thanks!
Controls need to have a defined Background property to participate in hit-testing - and thus to allow the IsPressed property to be set on a Button for example.
Set the Background property of your inner Border to any valid value - such as Transparent - to fix your Trigger.
Note: if you were to press TAB to select your button and press the space bar, you would see your Trigger working even though you didn't set it any background, because IsPressed also reacts to the space bar.
Related
I have a custom Style for textbox, I apply DropShadowEffect and a border in this textbox, I would like to remove the effect of both the border and the Shadow when user clicks outside the wpf.
For example if a user has wpf open and clicks on the windows desktop, wpf should remove the border and shadow.
My Style:
<Style x:Key="MTextBox" TargetType="{x:Type TextBox}">
<Setter Property="BorderBrush" Value="White" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="1" Color="Red" Opacity="1" BlurRadius="2"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
Try property "IsKeyboardFocused" instead of "IsFocused" in your second trigger.
I made a simple style for the hyperlinks that target buttons:
<Style x:Key="Hyperlink" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{StaticResource ForegroundDarkBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<TextBlock x:Name="innerText" Text="{TemplateBinding Content}" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource AppDarkBlueBrush}" />
<Setter TargetName="innerText" Property="TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My problem is that, when applied to the button control that has set some properties like FontSize, FontWeight, FontFamily, they are simply ignored and do not work:
<Button
Command="{Binding OpenCommand}"
Content="Open"
FontSize="20"
Style="{StaticResource Hyperlink}" />
How can I make a TextBlock in my style template inherit such properties?
edit
Forgot my mention that properties like FontSize actually do work but only in the design mode.
You can indicate that you want your textblock to "inherit" some properties from the Button like this :
<Style x:Key="Hyperlink" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{StaticResource ForegroundDarkBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<TextBlock
x:Name="innerText"
Text="{TemplateBinding Content}"
FontSize={TemplateBinding FontSize}
FontWeight={TemplateBinding FontWeight}
FontFamily={TemplateBinding FontFamily}
/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="{StaticResource AppDarkBlueBrush}" />
<Setter TargetName="innerText" Property="TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am trying to set inactive buttons to have semi-transparent (i.e. greyed out) images. Yet for some reason the images become white/ yellow (as if on a bright background):
As you can see it's light yellow
Possibly better annotated screenshot
Here are the XAML Styles:
<Style x:Key="ToolButton" TargetType="{x:Type Button}" BasedOn="{x:Null}">
<Setter Property="Background" Value="#888"/>
<Setter Property="Padding" Value="10,2"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Resources>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5"/>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
<Style x:Key="ToolPanel" TargetType="{x:Type StackPanel}">
<Setter Property="Background" Value="#111"/>
<Style.Resources>
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource ResourceKey=ToolButton}"/>
</Style.Resources>
</Style>
(StackPanel and buttons are dark for contrast, they are actually mean to be light grey)
What should I do to get the greyed out effect I want?
The problem is the default Button template: it changes its background based on the control's state, and that new background takes precedence over the one you're setting in your style.
In this case, the brush for the 'Disabled' state is something like #F4F4F4, or a very light gray.
The fix would be to declare a new Button template. For example:
<ControlTemplate TargetType="Button">
<!--Optional: Add border brush/thickness if you want a border-->
<Border x:Name="border" Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentSite" Margin="{TemplateBinding Padding}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<!--Optional: Remove background when disabled-->
<!--Setter TargetName="border" Property="Background" Value="Transparent" /-->
<Setter TargetName="contentSite" Property="Opacity" Value="0.5" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="Background" Value="#AAA" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="Background" Value="#333" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Note that with this version, you do not need the Image style to change the Opacity; it's taken care of in the Button template.
When i add this controltemplate my checkboxes disapear and only the checkbox text is shown. And when mouse is over the textbackground becomes red, how do i get my checkbox background red when mouse is over?
<Style TargetType="CheckBox" x:Key="Checkbox">
<Setter Property="BorderThickness" Value="2" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="20,15,0,0" />
<Setter Property="FontFamily" Value="/Resources/Fonts/Source Sans Pro/#Source Sans Pro" />
<Setter Property="FontSize" Value="14" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Foreground" Value="{DynamicResource CheckboxForegroundColor}" />
<Setter Property="Background" Value="{DynamicResource CheckboxBackgroundColor}" />
<Setter Property="BorderBrush" Value="{DynamicResource CheckboxBorderbrushColor}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<CheckBox Background="{TemplateBinding Background}" >
<ContentPresenter />
</CheckBox>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
This will work for some properties (try FontSize, for example), but not for others. The default template for the CheckBox has triggers of its own, and they don't bother with such things as TemplateBindings.
This post tells you how to extract the default template for a ComboBox. Here is an excerpt which shows your problem:
<ControlTemplate.Triggers>
...
<Trigger Property="IsMouseOver" Value="true">
<Setter
Property="Background"
TargetName="checkBoxBorder"
Value="{StaticResource OptionMark.MouseOver.Background}"/>
...
</Trigger>
...
</ControlTemplate.Triggers>
Your best bet is probably to override the entire template. Happily, it isn't too complex...
Remove your own template.
Follow the steps outlined in the post I linked to. That should give you a copy of the default CheckBox template.
Modify that copy. In particular, the IsMouseOver trigger that I excerpted: Change {StaticResource OptionMark.MouseOver.Background} to Red.
If this is still unclear, see this related post.
I have these controls:
<Border Style="{StaticResource Button}">
<TextBlock>NEW</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
<TextBlock>CLOSE</TextBlock>
</Border>
<Border Style="{StaticResource Button}">
<TextBlock>EXIT</TextBlock>
</Border>
And this style:
<Style x:Key="Button" TargetType="{x:Type Border}">
<Setter Property="Padding" Value="15, 10" />
<Setter Property="Margin" Value="5, 0" />
<Setter Property="MinWidth" Value="150" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
</Style>
And I want to set each button/border to a specific, different color each, and another color for IsMouseOver.
I tried setting the Background on the control, but then the style can't overwrite the background and I can't do the IsMouseOver change.
I can only think of creating a different style for each one with their colors, but is there anyway to do a partial styling, like how you'd do in CSS?
<div class="button blue">NEW</div>
<div class="button red">CLOSE</div>
<div class="button gray">EXIT</div>
Or any other way to achieve this?
I haven't done any XAML in a while, so I'm a tad rusty. I'm pretty sure you can't do partial styles, but I know you can inherit styles using "BasedOn".
https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx
This will allow you to do your base button style, and then create a color variant for each color you need based upon the common style features.
<Style x:Key="Button" TargetType="{x:Type Border}">
<Setter Property="Padding" Value="15, 10" />
<Setter Property="Margin" Value="5, 0" />
<Setter Property="MinWidth" Value="150" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="VerticalAlignment" Value="Center" />
</Style>
</Style.Resources>
</Style>
<Style x:Key="ButtonBlue" TargetType="{x:Type Border}" BasedOn="{StaticResource Button}">
<Setter Property="Background" Value="Blue" />
</Style>
Something like that, and then you use "ButtonBlue" instead of "Button" as the static resource you're referencing in the XAML for the control that you want to be blue. You should be able to add triggers as well in the inheriting style. Hopefully I'm remembering my syntax correctly.
Also, you may want to change the style Key to something other than "Button". Could be a bit confusing.