xctk:IntegerUpDown custom style to hide ButtonSpinner - wpf

On the xctk:IntegerUpDown, I would like the textbox border and the ButtonSpinner to only be visible when focused or mouseover.
It is easy enough to turn the border on/off using a <Style.Triggers> section.
It is also possible to control the ShowButtonSpinner property.
However, the content of the TextBox jumps to the right if I set ShowButtonSpinner=False.
I would like to simply hide the ButtonSpinner without TextBox contents jumping around.
Like this:
How can I get access to the appropriate property?

your question helped me to find ShowButtonSpinner property which I needed to hide up and down buttons
i can suggest a workaround with setting a fixed Padding for content when buttons are hidden. Value 0,0,17,0 seems ok to me (Win7, wpf toolkit version v2.6.0.0)
<xctk:IntegerUpDown.Style>
<Style TargetType="xctk:IntegerUpDown">
<Setter Property="Padding" Value="0,0,17,0"/>
<Setter Property="ShowButtonSpinner" Value="False"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Padding" Value="0"/>
<Setter Property="ShowButtonSpinner" Value="True"/>
</Trigger>
</Style.Triggers>
</Style>
</xctk:IntegerUpDown.Style>
another simple thing is to align text to left side via property
<xctk:IntegerUpDown TextAlignment="Left"/>

Related

XAML Style Trigger - Change Style ONLY for Object of with a specific Name

I am new XAML however I am given the task to override some styles for certain elements within an existing application.
In my custom Theme, I am attempting to override the style of a BORDER control.
From what I can tell (using Snoop) to inspect the application, the element I want to change is just a plain border.
The border also seems to have a Name of "SubMenuBorder". Please see the image below.
Here is the latest iteration of my style snippet in which I am trying to set the border control's Background, BorderBrush and BorderThickness BUT ONLY if the control has a name of "SubMenuBorder"
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="Name" Value="SubMenuBorder">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</Trigger>
</Style.Triggers>
</Style>
Unfortunately the above does NOT work.
The style trigger does not seem to fire/apply to the intended control.
If I simplify things further and just style ALL borders with the following snippet, then it seems to work and the border control I want to change, is styled, but so is every other border control in the application.
<Style TargetType="{x:Type Border}">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</Style>
Further Findings
I attempted to use a DataTrigger... which unfortunately doesn't work either.
Snoop shows below that the data trigger is being satisfied, however on the second image below you can see that the property of the background and borderbrush are still from the parenttemplate.
Any ideas please?
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Name}" Value="SubMenuBorder">
<Setter Property="Background" Value="Red"></Setter>
<Setter Property="BorderBrush" Value="Red"></Setter>
<Setter Property="BorderThickness" Value="20"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
You cannot use triggers to modify a Border that is defined in a ControlTemplate, with the exception of using an implicit Style that applies to all elements of the type specified by the TargetType property of the implicit Style.
You will either have to modify the ControlTemplate itself, or programmatically find the Border element in the visual tree and then change its runtime property values. The first approach, i.e. modifying or creating a custom template, is the recommended approach.
The name "SubMenuBorder" is only known and applicable within that Border element's namescope.

WPF Focus on "run" element

I would like to change the background of the Run that has the focus in a FlowDocument in a RichTextBox.
I would like to provide to my users a visual cue as to which Run element they are currently editing and I think a light background would be the best way for my application.
I see that the Run has Focusable (which I set to true), IsFocused, FocusVisualStyle, GotFocus, etc. but none of those properties or events seam to work.
Thank you for any help you can give.
You can use a data trigger to get the effect you want. Here's an example:
<Style TargetType="{x:Type RichTextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="BorderBrush" Value="LightGrey" />
</Trigger>
</Style.Triggers>
</Style>

WPF DataGrid: How to leave some extra space with fill-in columns to avoid scrollbar showing up

First off, the title may not be a good one.
I'm using WPF 4 DataGrid a lot. One feature I'd like to have is to highlight the mouse over row. My first attempt is to change the background color using a Trigger on DataGridRow. However, there is a conflict with the read-only datagrid cells, see my other post here. Now, the next best thing I can do is to add a border to the mouse over row. This can easily be done with this style:
<Style TargetType="DataGridRow">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
The problem is that some of the DataGrid have star sized columns, and it doesn't normally show horizontal scrollbar. However, with this style Trigger, because it's adding one unit border, the scrollbar becomes visible when mouse is over the grid. I thought it could be resolved if I could make the star column a little bit smaller. Is it possible? Or do you have any other idea?
EDIT: Even if I change the value for border thickness to "1 1 0 1" (so to make it borderless at right), the scrollbar still shows up.
You may try reducing the DataGridRow's margins.
<Style TargetType="DataGridRow">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="Margin" Value="0,0,-2,0"/>
</Trigger>
</Style.Triggers>
</Style>
Two caveats for the value I gave: The right-side border line does not appear, no matter what you set the margin to, although that may be true even without the margin setter. And when the trigger activates for your "last" or "bottom" row, the column headers shift (in this case, they all shift to the right a bit).

WPF ComboBox ControlTemplate Background problem

This is an example of a ComboBox's ControlTemplate.
CLICK HERE
I've tried to set the Background / add a trigger to change the background when the ComboBox is focused (with a tab key for example),
both without success.
I don't even understand why it isn't included by default !
(compared to the original generic template)
Do you mean change the background of the ComboBoxItem when it is focused? Its not normal to change the background of an entire ComboBox. Keep in mind that the template is different for editable ComboBoxes.
From looking at the template you referenced, the Background property is used for the ComboBox dropdown. So you're trigger needs to target that outter most Grid. Did you try adding triggers like these?
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="[outtermostgrid]" Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsDropdownOpen" Value="True">
<Setter TargetName="[outtermostgrid]" Property="Background" Value="Red" />
</Trigger>

Make active control background colour change

I have a requirement to change the background colour of the active control (to make it easier to identify where the cursor is).
I've tried using a style with a trigger on the IsFocused property but I'm not having any luck at all; it doesn't seem to fire.
A XAML solution is most preferred.
I kept playing and this seems to work well :)
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="TextBox.Background" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>

Resources