WPF Button Change Background during Click - wpf

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>

Related

ListBox ItemContainerStyle does not register white space click

Putting in an ItemContainerStyle no longer registers when clicking on white space within the ListBoxItem.
Background: I have a ListBox where I want to customize the ItemContainerStyle. The style works, however, it brings up a new issue, the ListBox no longer changes selection when clicking the white space within a ListBoxItem. Using the arrow keys works perfectly and if I click on a control within the ListBoxItem then the selection is changed
Here is my ItemContainerStyle
<Style TargetType="ListBoxItem" x:Key="RegListBoxItem">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Opacity" Value="1.0" />
<Setter Property="MinHeight" Value="100" />
<Setter TargetName="_Border" Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="25" ShadowDepth="8" Direction="270" Color="Black" Opacity=".42" RenderingBias="Performance" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I know it is the ItemContainerStyle because if I remove the ItemContainerStyle from the ListBox it works correctly.
Thanks

Unselected tabs disappear

I'm trying to fix a problem on a WPF app that was written, and seems to have worked, on Windows XP and Windows 7. On Windows 10, we're having a problem with unselected tabs disappearing.
The main window has a TabControl that has a custom style applied to its TabItems:
<TabItem
x:Name="dashboardTab"
Header="Dashboard"
Style="{StaticResource mainTabStyle}"
>
<local:DashboardControl x:Name="DashboardControl"/>
</TabItem>
The style:
<Style x:Key="mainTabStyle" TargetType="{x:Type TabItem}">
<Setter Property="Margin" Value="10,5,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="ContentWrapper">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Bottom" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" Width="150" RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ContentWrapper" Property="Background" Value="AliceBlue" />
<Setter TargetName="ContentSite" Property="TextBlock.FontWeight" Value="Medium" />
<Setter TargetName="ContentSite" Property="TextBlock.Margin" Value="12,2,12,8" />
<Setter TargetName="ContentSite" Property="TextBlock.FontSize" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=FontSize, Converter={StaticResource mathConverter}, ConverterParameter=5}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentWrapper" Property="TextBlock.Foreground" Value="Black" />
<Setter TargetName="ContentWrapper" Property="Background">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.5" />
</Setter.Value>
</Setter>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="White" />
<Setter TargetName="ContentWrapper" Property="Background">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.15" />
</Setter.Value>
</Setter>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The idea is to change the look of the tab item headers to look less like tabs and more like a row of selection buttons.
If I remove the style from the TabItems, I get a perfectly ordinary looking set of tab headers. If I leave it in place, under Windows 7 it works fine. The selected tab is highlighted with a light blue background. In Windows 10, though, the unselected tabs are invisible. The foreground text seems to be white.
Unfortunately, our WPF expertise has walked out the door, and I'm stuck trying to fix this. I know that its this style that controls the visibility. As I said, if I remove it I get normal tab headers. If I leave it in place and change the background color from "AliceBlue" to "Red", I see the change.
My question: how do I change this style to apply a specified foreground color to the textblocks of unselected tabs?
In the last multi-trigger, you are setting the TextBlock.Foreground property to White when IsSelected and IsMouseOver is false
This line right here <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="White" />
And also you are setting the Background color to white in the following setter (i'm not sure what the opacity is for)
<Setter TargetName="ContentWrapper" Property="Background">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.15" />
</Setter.Value>
</Setter>

WPF Thumb Set Cursor on Drag

I'm using a thumb control to act as a sizing control. When I move over the thumb I set the cursor to SizeWE. However, when I press the mouse to initiate the drag operation. The cursor goes back to a pointer.
I've tried setting the cursor explictly during the drag but that does not work. Thoughts?
<Style x:Key="HorizontalSizeThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Rectangle Name="thumb" Width="1" Stroke="{StaticResource AppBackgroundBrush}" StrokeThickness="0.5" Cursor="SizeWE">
<Rectangle.Fill>
<SolidColorBrush Color="{StaticResource AppBackgroundColor}" />
</Rectangle.Fill>
</Rectangle>
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="thumb" Property="Stroke" Value="{StaticResource PressedBrush}" />
<Setter TargetName="thumb" Property="Cursor" Value="SizeWE" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Remove the TargetName from the IsDragging handler:
<Setter Property="Cursor" Value="SizeWE" />
instead of:
<Setter TargetName="thumb" Property="Cursor" Value="SizeWE" />

How are WPF Buttons and TextBlock styles related?

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?

How can I set a property of a DropShadowEffect via a Trigger in a ControlTemplate?

I have a Button ControlTemplate and I'm trying to modify a DropShadowEffect on a Border by using a Trigger. Here is my Xaml:
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonBorder" Margin="10" CornerRadius="5" Background="Gray">
<Border.Effect>
<DropShadowEffect ShadowDepth="5" x:Name="BorderEffect" />
</Border.Effect>
<ContentPresenter HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter Property="Background" TargetName="ButtonBorder" Value="LightGray" />
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="Margin" TargetName="ButtonBorder" Value="13,13,7,7" />
<!-- this is where I get the error -->
<Setter Property="ShadowDepth" TargetName="BorderEffect" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
I get an error stating that the BorderEffect cannot be found.
I have also tried:
<Setter Property="Effect.ShadowDepth" TargetName="ButtonBorder" Value="2" />
But I also get an error telling me that the property ShadowDepth could not be found on the object of type Effect (because it's using the base class instead of DropShadowEffect)
How can I solve this?
You can set the Effect as a whole in the setter.value
<Setter Property="Margin" TargetName="ButtonBorder" Value="13,13,7,7" />
<Setter Property="Effect" TargetName="ButtonBorder" >
<Setter.Value>
<DropShadowEffect ShadowDepth="2" />
</Setter.Value>
</Setter>
</Trigger>

Resources