Change a Style based on Visual State - wpf

"Blend makes it simple to setup Visual States based on say minWindowWidth. But it would be very nice to have state-based Styles defined for TextBlock elements, say with tag="header", tag="body", and have the Setter change the Style automatically."
Maybe I wasn't explicit enough in my initial question, let me rephrase this.
I am resizing my application window from say Landscape to Portrait. My VisualStateManager has setters which adjust the page properties based on the new minimum width.
I have multiple TextBlocks (header,body, etc) and other controls with .Text (ToggleSwitch), that I want to automatically adjust FontSize based on the new width.
Aside from manually setting every single control by name in all the states, is there a way to have the VisualStateManager do it automatically for each 'type' of Text(body/header/etc)? My work around at the moment is to DataBind a Style for every .Text control and have the ViewModel do all the scaling. That works, but this is really something Blend is made for, right? So I must be missing the obvious way everyone is using.
Thanks for all the good comments so far.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="PhonePortrait">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowMinWidth}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SwitchStackPanel.(StackPanel.Orientation)" Value="Vertical"/>
<!-- Setter to change all Body textblocks to FontSize=8-->
<!-- Setter to change all Header textblocks to FontSize=10-->
<!-- Setter to change all ToggleSwitch.Text to FontSize=8-->
<!-- etc..-->

You could use a global style. That utilizes triggers based on the Tag.
<Style TargetType="{x:Type TextBlock}">
<!--Default Setters Here-->
<Setter Property="Background" Value="White"/>
<Style.Triggers>
<Trigger Property="Tag" Value="body">
<Setter Property="Background" Value="Gray"/>
<!--Insert desired state setters here-->
</Trigger>
<Trigger Property="Tag" Value="header">
<Setter Property="Background" Value="DarkGray"/>
<!--Insert desired state setters here-->
</Trigger>
</Style.Triggers>
</Style>
You can then have a default state, and Triggered setters than only affect a Textblock when an applicable tag is attached.
If you already have other styles or want to have a selection process, you may want to add a key and then use BasedOn within the style.

Related

Adding an ErrorTemplate to a WPF User Control disables TextBox input

I have a very basic custom control consisting of a Label and a Textbox. I've used my control for sometime without any issues.
I've now come to styling my application and have my style inside a XAML file containing just a ResourceDictionary. I have the following for my UserControl:
<Style TargetType="local:LabelEdit">
<Setter Property="Background" Value="{StaticResource BackgroundBrush}" />
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource BorderBrush}" />
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<AdornedElementPlaceholder />
<Image Source="/AJSoft.Controls;component/Resources/Icons/cross.ico" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Foreground" Value="{StaticResource ErrorForegroundBrush}" />
<Setter Property="Background" Value="{StaticResource ErrorBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource ErrorBorderBrush}" />
</Trigger>
</Style.Triggers>
</Style>
Everything works absolutely fine if I comment out the Setter for Validation.ErrorTemplate. If the ErrorTemplate is left intact, the cross shows (I haven't sorted out placement yet, but that can come later...), but the Textbox component of my UserControl does not show the caret or accept keyboard input. The rest of the controls in my Window work as expected.
Here are some screenies where I've deliberately put in some erroneous text to show how it looks.
The same problem happens even if I change that huge image to be a textblock with a small red "!" - the image is just for effect for now.
What am I doing that's causing the problem? I'm new to Validation in WPF...
EDIT: The image shown (big red cross) is just one example of what I've done. Even if I use a small image shown alongside the UserControl, I still get the same effect.
If you were to look at how error templates usually work, you'd see they apply to a single control.
Part of the issue you have here is you've got a label and textbox in one parent user control.
If you then apply an error template at the usercontrol level, it's on everything in that. Label, textbox, everything in your usercontrol.
The next thing to consider is how your error template ends up visible on top of everything. This happens because your error template generates UI in the adorner layer. That's top of everything ( in the window ).
Add these together and you got a big image on top of the content of your usercontrol.
At risk of over simplifying:
You put a top on your box and you can't now get at what's in that box.
There are several ways you could "fix" this but they all involve some design change or compromise.
Maybe a big X on top of your input control isn't a good idea.
You could kind of make it work.
You could make your image IsHitTestVisible="False".
It'll be visually in the way but you can then likely click on the textbox and type.
Just maybe not see everything.
Probably not ideal.
You could show your cross next to the textbox using a datatrigger rather than error template.
Add an image to your usercontrol so you have label, textbox, CrossImage.
Add a style to that with a setter makes it visible collapsed by default.
Use a trigger in that style to show the CrossImage when the control has errors.
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter ... />
</Trigger>
</Style.Triggers>
You may well find it simplest to use the tag on the usercontrol and set that to visible/collapsed. Bind visibility of the image to that.

xctk:IntegerUpDown custom style to hide ButtonSpinner

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"/>

wpf ListView - disable header mouse over effect

I have a simple 1 column ListView and I need to disable the mouse over effect for the GridViewColumnHeader.
I tried grabbing the style from here: http://msdn.microsoft.com/en-us/library/ms788747.aspx
However that gave my header a purple gradient so I guess it was the wrong style. I do notice it has a
<VisualState x:Name="MouseOver">
But I have no idea how to remove that without finding and including the correct GridViewColumnHeader style and then removing it.
I tried the following, but it doesn't do anything (The VisualState overrides?) and wouldn't work anyway as setting the background to null wouldn't be what I want.
<Style x:Key="hcs" TargetType="{x:Type GridViewColumnHeader}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
The problem is, like you said yourself, in MouseOver visual state and its Storyboard. I think it`s better to get rid from redundant functionality than try to override it later. So we basically just need the same style but without that storyboard. For bare minimum we need to have following things (can be found on MSDN via the link you provided):
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>
<Style x:Key="GridViewColumnHeaderGripper"
TargetType="Thumb">
<!-- Full GridViewColumnHeaderGripper style here -->
</Style>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewColumnHeader">
<!-- Standard template but with redundant Storyboard removed -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The last Style doesn`t have a key so it applies to all GridViewColumnHeader on page \ application (depends on where it is defined). Or you can set the key and use it only in specific grids.
That`s bare minimum so for more customizable approach it may be better to copy other parts of default style too.

Specify a binding in an application-level style resource?

I'm fairly new to WPF and have created a style to alter the appearance of a button control. The style contains a data trigger to change the button background (amongst other things) based on a boolean property in the data context, e.g.:-
<Style x:Key="IndicatorButton" TargetType="Button">
<DataTrigger Binding="{Binding Path=ValveIsOpen}" Value="True">
<Setter Property="Background" Value="#00FF00"/>
..etc..
Currently the style is only used by a single button, so the data trigger binding is hard-coded with a property called "ValveIsOpen".
I now want to re-use this style throughout my app, with different buttons being bound to different properties. How would I change the data trigger binding on each button that the style is applied to?
Many thanks
You need to define a base style and derived styles, such as
<Style x:Key="IndicatorButton" TargetType="Button">
<Setter Property="Foreground" .../>
...
<Style x:Key="ValveIndicatorButton" TargetType="Button" BasedOn={StaticResource IndicatorButton}>
<DataTrigger Binding="{Binding Path=ValveIsOpen}" Value="True">
<Setter Property="Background" Value="#00FF00"/>
..etc..

How to change the control template effectively in WPF?

The subject is that I've defined a customized control bound to a DataContext. And I wished to change the control template dynamically according to the DataContext's specific property values.
There're 2 ways I've thought of,but I have no idea about which way is better.
1.Do not use the control template in a ResourceDictionary and all details of the control are defined in C# code.Use the DependencyProperty CallBack method to render the control when DataContext's property values change.
2.Define control template in the ResourceDictionary and use DataTrigger to change the 'Control.Template' property.
In my application,thousands of instances in this type would be created,so it's really unacceptable if the ControlTemplate changging is not effective.
Could you please give me some advices or better solutions?
Using any standard WPF technique might not be effective if it would involve a thousands of instances of complex controls. See http://msdn.microsoft.com/en-us/magazine/dd483292.aspx.
I would go with MultiBinding + IMultiValueConverter to Control.Template dependency property, since Template would depend on multiple DataContext properties and would, perhaps, involve complex logic.
Perhaps you could used a ContentPresenter in your ControlTemplate to customize parts of your control. You could provide DataTemplates for those customizable parts which are automatically applied.
I would use a style with the data triggers to control which template is displayed. Like this example:
<Style x:Key="Die1Face" TargetType="{x:Type Button}">
<Setter Property="Template" Value="{StaticResource dieNone}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ThrowDie1[0]}" Value="1" >
<Setter Property="Template" Value="{StaticResource dieOneA}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=ThrowDie1[0]}" Value="2" >
<Setter Property="Template" Value="{StaticResource dieTwoA}" />
</DataTrigger>
</Style.Triggers>
</Style>
This would give the flexibility you need.

Resources