I'm assuming that this may be a style issue, but being new to wpf I'm not sure what I should be changing. I have built a user control containg various buttons (whose background colour I have set to be transparent). None the less when added to a form or other user control they exhibit a coloured background when disabled, or when run over by the mouse when enabled (see illustration below)
What do I need to do to remove the grey background on the button's disabled state, and also the blue background that appears on rollover when it is enabled. My aim is to try aand retain a clean and clear rendition of the button images.
Thanks
You would need to override the ControlTemplate of the Button controls using a Style. The following Style will apply to all Button controls, but you can specify a Key for the Style and use it on specific Button controls if you wish.
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="ButtonContent">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonContent"
Property="Background"
Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Related
I have an Itemscontrol with an Itemscontrol with buttons. This makes a matrix with 64 buttons.
Each button is bound to a ViewModel. The buttons have an eclipse that has a color.
A button can have two states.
1) The ViewModel gives a Color for the eclipse in the button and then the button IsEnabled=true.
2) the button IsEnabled=false and the button is not clickable anymore.
I would to have a transparant background for number 2 (when the button is not enabled). I worked something out and got this (see code on Pastebin), but now my borders are gone and everything is transparant.
How can I get a border for each button that is visible all the time, so it is not restricted to number 1 and 2.
Here is my code. I put it on Pastebin to save space.
Pastebin: http://pastebin.com/4GHCW0y8
Thanks
There are a couple issues with your code:
You are setting the Background, BorderBrush and BorderThickness properties directly on your button instead of using setters in the style. Setting them this way overrides anything the style does, so you cannot see the effects of the style triggers. This is the line I am referring to:
<Button Style="{StaticResource MyButton2}" Command="{Binding PlaceStoneCommand}" Background="Transparent" BorderBrush="Black" BorderThickness="0.75" Width="30" Height="30">
Remove the Background, BorderBrush and BorderThickness properties from that line and make setters in the style instead. Also, note that you are setting the default to transparent, so even with this change, you are just switching between Transparent and Transparent when IsEnabled changes.
Your style is overriding the control template for the button and not using the BorderBrush or BorderThickness properties in the template, so setting those properties on the button is not going to have any effect. You probably want to setup template bindings for those properties on the Border defined in the template. So, you would end up with a style looking something like this:
<Style TargetType="{x:Type Button}" x:Key="MyButton2">
<!-- Put default values here, or remove these if you want to use the existing button defaults -->
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
See if those changes give you the desired result.
Suppose I have n number of rectangles.
I want them to behave such that when I click on any rectangle it should be filled white and all other should be filled with black color.
I know that I can create a style. But while creating style I can tell the trigger that fill the rectangle with black color but how can I say that fill all the remaining rectangles with white color.
Can anyone suggest me?
I want just a small hint.
Don't make rectangles work like RadioButtons, make RadioButtons look like rectangles.I would suggest to use RadioButton instead and change template to make it look like rectangle. Then you can trigger change of background based on RadioButton.IsChecked property. This way RadioButton will take care of tick/untick operation and trigger background change in other RadioButtons in the same group.
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border BorderBrush="Black" BorderThickness="1" Background="Black" x:Name="PART_Border">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="PART_Border" Property="Background" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and use your RadioButton like this:
<RadioButton>
<RadioButton.Content>
<!-- content to be displayer inside border -->
</RadioButton.Content>
</RadioButton>
You've answered the question yourself. Take two radio buttons and try editing the template. Basically when you'll have the close look at the template you will find an ellipse with a dot whose visibility gets toggled off on mouse click
Instead of having the ellipse you can have a rectangle/border with some thickness and set its background color on mouse click
A few months ago in a C# application I began using a ListBox as a container for some UserPanels. When a panel was selected it was highlighted, just like any listbox item. I found the following XAML I was able to add to give all items a transparent background (Not sure where I originally found this or I'd link it)
<Application.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Border x:Name="border" Background="Transparent">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="border" Property="Background">
<Setter.Value>Transparent</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
This worked fine but now I need to sometimes have a background color instead of a transparent background. There is only 1 listbox and the contents change so I want to programatically change the style in the codebehind.
I found examples on changing the style in code but I wasn't able to create two of this same style. I gave it a x:name="transparentListbox", copied it, and gave the other one x:name="normalListbox" with a background of Blue, but I get an XML parse exception having two style elements, possibly because they're both generically trying to modify every listbox.
How can I have two named styles that accomplish the same thing (modifying the background when an item is selected) that I can switch between in code as needed?
Edit:
In every case my listbox is used to store UserPanels. I add them to the listbox using lstPanels.Items.Add(p) where p is an instance of a class derived from UserPanel.
When I first made the app there were multiple windows so the windows that required transparency had this style, and those that required selecting items did not. Managing multiple windows became cumbersome so it was re-factored into a single window and the listbox would be cleared and loaded with different types of panels when the mode changed. Some still required transparent backgrounds, but now some did not.
Programatically assigning a named style to the Listbox as a whole, when the mode changes, would be okay. Assigning a style to every ListBoxItem would involve updates to a lot of code as that functionality is spread out.
Perhaps the solution would be to maintain a single style but have the background property be bound to a varaible, if that is at all possible?
I have always created the style in my UserControl.Resources section.
In your case:
<Style x:Key="ListBoxStyle1" TargetType="MyDerivedListBoxItem">
...
<Style x:Key="ListBoxStyle2" TargetType="MyDerivedListBoxItem">
...
and in the code behind I have set the styles this way.
If Not MyListBox.ItemContainerStyle.Equals(CType(Resources("ListBoxStyle1"), Style)) Then
MyListBox.ItemContainerStyle= CType(Resources("ListBoxStyle1"), Style)
I wouldn't mess with trying to modify styles in your code. It may be feasible and even work, but that seems like a world of pain to me. One idea that might help is that you could inherit from ListBoxItem, defining your own control. You could then put a dependency property on that inheritor like UseAlternateBackgroundColor of type bool or something.
Then, you'd modify your style:
<Style TargetType="MyDerivedListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MyDerivedListBoxItem}">
<Border x:Name="border" Background="Transparent">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="border" Property="Background">
<Setter.Value>Transparent</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="UseAlternateBackgroundColor" Value="true">
<Setter TargetName="border" Property="Background">
<Setter.Value>Black</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Generally speaking, I personally try to avoid dealing with layout and visual style considerations in code as much as possible.
You need to set different x:Key directives, if the styles are resources the Name is pretty useless anyway. If you do not set a key the TargetType is used as the key instead which causes a collision. To apply one of the styles in code you can call FindResource with the respective key.
I change the background color of my TabItem conditionally in code behind. This works fine as long as no theme is set in the App.xaml. How can I change colors of a TabItem (in code) while keeping an application-wide theme?
Background:
I'm using a free WPF theme from Nukeation Reuxables. The theme is set in the Application.Resources section of my App.xaml:
<ResourceDictionary Source="/ReuxablesLegacy;component/Edge.xaml" />.
I'm trying to conditionally set the background color of a TabItem in code behind:
MyTabItem.Background = new SolidColorBrush(Colors.Gray);
The background color changes if I remove or comment out the App.xaml line that sets the theme. Why does the theme break my code? I'm changing the tab color (as data is loaded) to show which tabs contain data.
I'm aware that XAML and binding are typically used to change colors, but the solutions I've attempted seem overly complex. Here is my related StackOverflow question seeking an all XAML and binding solution. The answers given just raised more questions which I haven't found answers to.
Thanks in advance.
Edit:
The problem does not happen when changing the background of a button:
button1.Background = new SolidColorBrush(Colors.Red);
The button changes color as expected (while using an application-wide theme).
It REALLY depends on how the theme itself is implemented. If the theme was using TemplateBinding to bind to the background color of the tab to the theme's controls, then your code behind solution would work. That is probably why your button properly changes background colors in your example.
You'll probably have to dig deep into the tab's style xaml, and modify it there first for the codebehind solution to work.
If you look at the ControlTemplate of TabItem its Background property is bound to a internal resource it doesn't do TemplateBinding, I presume the theme has just given colors to it. For your code to work you have to restyle it.
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,-4,0"
Background="{TemplateBinding Background}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have made two changes to the normal ControlTemplate, you can do the same to your theme.xaml.
Changed Background="{StaticResource LightBrush}" to Background="{TemplateBinding Background}"
Removed Background setter in IsSelected = True trigger.
Unfortunately, this is a simple problem with no simple answer (that I have found so far). Taking a different path to satisfy users was my final solution.
Instead of attempting to change the TabItem Background color I simply change the TabItem Foreground color to Gray if NO data exists. I also add the word "Blank" like this: "Tab 1 Blank", "Tab 2 Blank", etc. This an effective solution to the original problem. I describe it in detail here.
I am attempting to create a LinkLabel control for WPF. Essentially, I'm going to create the LinkLabel from a TextBlock and handle MouseEnter, MouseLeave, and MouseLeftButtonUp events. In the back end I have a base class that has properties that you would expect to see with a LinkLabel. With most other clickable controls in WPF, there is a default MouseEnter animation where the control becomes Ice Blue. I would like to duplicate this behavior when the mouse cursor enters over the TextBlock. I'm not sure if I'm needing to derive from ButtonBase or something along those lines. I have a I am able to change the cursor to a hand, and handle the event for when the "LinkLabel" is clicked. If accessing this seemingly default color changing animations, then I just may have to resort to a simple foreground color swap without the smooth transition. If anyone has created a custom WPF LinkLabel before or has any advice into the matter your input would be much appreciated.
You can create the equivalent of WinForms' LinkLabel right now using a combination of TextBlock and HyperLink:
<TextBlock>Here is a <Hyperlink NavigateUri="http://example.com">link</Hyperlink></TextBlock>
You won't get the "ice blue" mouse-over effect, but you will get the hand cursor. I'm sure you can introduce your mouse-over effects using a simple style trigger.
The "NavigateUri" property works in navigation-style applications where the hyperlink is inside a Frame control. In a standard WPF application you'll want to handle the Hyperlink's Click event instead and use Process.Start to kick off a web browser with the correct URL.
I just created a style for a button and apply a style to a button whenever you want LinkLabel look. Click event of button is used to perform a function when the text is clicked.
<Style x:Key="LinkLabelButtonStyle" TargetType="Button">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="CornflowerBlue"></Setter>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock TextDecorations="Underline" Text="{TemplateBinding Content}"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="DarkBlue"></Setter>
<Setter Property="MinWidth" Value="90"></Setter>
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="Padding" Value="5"></Setter>
<Setter Property="Margin" Value="5"></Setter>
<Setter Property="Cursor" Value="Hand"></Setter>
</Style>
You can place above style in the Window.Resources so you can use it in entire window.
Then apply the style to a button whenever you want LinkLabel look.
<Button Name="LinkLabelLookALikeButton" Content="Text goes here" Style="{StaticResource LinkLabelButtonStyle}" Click="Event_Goes_Here">
</Button>
Hope this helps!