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
Related
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>
I want to replace the normal behaviour of Validation.ErrorTemplate.
I want to put a background border object (filled with red color) behind my own UserControl
and then apply a simple color animation to blink it.
I tried this in my implicit control style:
<Style TargetType="{x:Type local:myControl}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Border Name="ErrorBorder" CornerRadius"5" Background="Red">
<AdornedElementPlaceholder />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding
RelativeSource={RelativeSource Self},
Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
Unfortunately the border object entirely overlays the control UI.
The other question is: where is the right place to put a DoubleAnimation applied on Opacity to make my Background blinking? Wich property/event should I trigger? Should I use style or simply place it in the Border.Triggers?
Thank you
I'm pretty sure this isn't possible, adorners are always drawn on top of the adorned element.
See the Adorners Overview on MSDN
"An Adorner is a custom FrameworkElement that is bound to a UIElement. Adorners are rendered in an AdornerLayer, which is a rendering surface that is always on top of the adorned element or a collection of adorned elements"
You could probably get the same effect by adorning with a normal border that just borders the adorned element instead of trying to stick it behind the adorned element.
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.
What do I have?
I have a ListBox populated with items from an XML file. Given a DynamicResource for Style property and written trigger for IsSelected in ItemContainerStyle.
What do I want to do?
I want to keep the selected Item highlighted even after focus moved out of the ListBox.
What problem am I facing?
When I select an item the style specified in IsSelected trigger works. But, when I move the focus out of list box (press tab or click on some other control) the selected item loses its style. Is there any way so that I can retain the selected item style?
Thanks in advance!
The answer referenced will in some cases solve the problem, but is not ideal as it breaks when the control is disabled/readonly and it also overrides the color schemes, rather than taking advantage of them. My suggestion is to add the following in the ListBox tags:
<ListBox....>
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<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 TargetName="Border" Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
What this will do is set the Highlight background color on the list box item whenever it is selected (regardless of the control state).
My answer is based on help from the answers already given to these answers, along with the following blog: http://blogs.vbcity.com/xtab/archive/2009/06/29/9344.aspx
If you're only setting the background color, try replacing ControlBrush for the ListBox, as per this answer.
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!