I would like to change the border color for the focus state on the DatePicker control.
I took a look at the Default Style Template and didn't see any Focus State for the VisualStateManager.
The only thing I saw was a primitive control for the TextBox as follows:
<controlsPrimitives:DatePickerTextBox x:Name="TextBox" SelectionBackground="{TemplateBinding SelectionBackground}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Column="0" />
How can I change the color for the focus state for the border for the DatePicker... I had no problem changing this color for the TextBox, ComboBox and the CheckBox controls.
Please Help!
You're right, the DatePicker control doesn't have a Focus state for the VisualStateManager. Note that it is possible to add a state group and Focused/Unfocused states for the DatePicker, but that wouldn't be the best approach here.
The template for the DatePicker control contains a DatePickerTextBox control, which, according to MSDN, "represents the text input of a DatePicker".
Looking at the template for the DatePickerTextBox, we find that it has a FocusStates state group, and definitions for both the Unfocused and Focused states. We also find this line:
<Border x:Name="FocusVisual" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
So as you can see, the default "focused color" is #FF6DBDD1. The Focused state for the DatePickerTextBox sets the Opacity property of this border to 1.
To change the border color for the Focused state, you can create a copy of this template, replacing #FF6DBDD1 with the color you want. Then, create a copy of the DatePicker template, which should specify that the DatePickerTextBox contained within it should use your modified template.
Alternatively, you can create a copy of the DatePickerTextBox template, make the adjustment to the border color, and place this template in a style with TargetType set to DatePickerTextBox:
<Style x:Key="MyStyle1" TargetType="DatePickerTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DatePickerTextBox">
<!-- Modified template for DatePickerTextBox goes here -->
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hopefully this is useful to you!
EDIT: Default Template for DatePickerTextBox
Most of the default styles and templates for controls are available on MSDN. However (for whatever reason), DatePickerTextBox is not. If you have a copy of Expression Blend (which I highly recommend if you are working with the appearance of controls; it's invaluable -- download a free trial here), you can do the following:
Right-click on a DatePicker, click "Edit Template -> Edit a Copy...". You'll see the DatePickerTextBox in the "Objects and Timeline" panel. Right-click on that, click "Edit Template -> Edit a Copy..." once more. You can then right-click on the Template in the "Objects and Timeline" panel and click "View XAML."
Again, if you're doing any sort of work like this, I can't recommend Blend highly enough. It will save you so much time in the long run (and you'll learn a ton about XAML, styles, templates, how they all fit together, etc). If you don't have access to it, though, here's the default template for the DatePickerTextBox control:
<Style x:Key="DatePickerTextBoxStyle" TargetType="System_Windows_Controls_Primitives:DatePickerTextBox">
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="System_Windows_Controls_Primitives:DatePickerTextBox">
<Grid x:Name="Root">
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement">
<SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement2">
<SplineColorKeyFrame KeyTime="0" Value="#FF99C1E2"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unwatermarked"/>
<VisualState x:Name="Watermarked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Watermark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="1">
<Grid x:Name="WatermarkContent" Background="{TemplateBinding Background}">
<Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
<Border x:Name="ContentElement2" BorderBrush="#FFFFFFFF" BorderThickness="1">
<ContentControl x:Name="Watermark" Background="{TemplateBinding Background}" Content="{TemplateBinding Watermark}" Foreground="{StaticResource WatermarkBrush}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsHitTestVisible="False" IsTabStop="False" Opacity="0" Padding="2" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<Border x:Name="FocusVisual" BorderBrush="#FF6DBDD1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Apologies for the length, and many thanks to this thread (which had the same issue).
Does this work for you:
public class MyDatePicker : DatePicker
{
public MyDatePicker()
{ }
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DatePickerTextBox textBox = (DatePickerTextBox)this.GetTemplateChild("TextBox");
textBox.GotFocus += new RoutedEventHandler(textBox_GotFocus);
textBox.LostFocus += new RoutedEventHandler(textBox_LostFocus);
}
void textBox_GotFocus(object sender, RoutedEventArgs e)
{
(sender as DatePickerTextBox).BorderBrush = new SolidColorBrush(Colors.Red);
}
void textBox_LostFocus(object sender, RoutedEventArgs e)
{
(sender as DatePickerTextBox).ClearValue(DatePickerTextBox.BorderBrushProperty);
}
}
Related
I am making a custom control. When mouse over it, the opacity of content will animate from 0.5 to 0.8. When mouse pressed it, the opacity of content will set to 1 immediately.
Here is my code:
<ControlTemplate TargetType="{x:Type local:OpacityButton}">
<Border x:Name="B" Background="{TemplateBinding Background}" Opacity="0.5" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Margin="{TemplateBinding Padding}" TextBlock.FontFamily="{TemplateBinding FontFamily}" Content="{TemplateBinding Content}" TextBlock.Foreground="{TemplateBinding Foreground}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextBlock.FontSize="{TemplateBinding FontSize}"></ContentPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="B"
Storyboard.TargetProperty="Opacity"
To="0.8" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="B"
Storyboard.TargetProperty="Opacity"
To="0.5" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Opacity" Value="1" TargetName="B"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
When the button is pressed, the opacity doesn't change any.
Soon I found this solution:
Storyboard animation not completing when triggering property changes
I add the RemoveStoryboard to the EnterActions and ExitActions, now when the mouse is over, the opacity does not change any.
It seems because it removes the Storyboard immediately but not after it is complete.
How can I solve this?
This is a better job for VisualStates:
<ControlTemplate TargetType="{x:Type local:OpacityButton}">
<Border x:Name="B"
Background="{TemplateBinding Background}"
Opacity="0.5"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="B"
Storyboard.TargetProperty="Opacity"
To="0.5"
Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="B"
Storyboard.TargetProperty="Opacity"
To="0.8"
Duration="0:0:0.3" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="B"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.3" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Margin="{TemplateBinding Padding}"
TextBlock.FontFamily="{TemplateBinding FontFamily}"
Content="{TemplateBinding Content}"
TextBlock.Foreground="{TemplateBinding Foreground}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextBlock.FontSize="{TemplateBinding FontSize}"></ContentPresenter>
</Border>
</ControlTemplate>
The problem with your Triggers is that more than one of them is true at the same time - when the button is pressed, the mouse is also over it, so the triggers are competing and the IsMouseOver one is winning.
The control can only have one VisualState at a time though, so you can define exactly what happens in each state and only that state.
If you're committed to triggers you could use MultiTrigger for the mouse over state, making the conditions IsMouseOver = true and IsPressed = false. Then when IsPressed is true, that trigger will run and the other won't.
But assuming you're subclassing Button here, WPF is already giving you the VisualState's for free, so you might as well use them.
I have a resource dictionary that contains the following code:
<Style TargetType="{x:Type TextBlock}" >
<Setter Property="FontSize" Value="20"/>
</Style>
In my app.xaml, I merge it globally:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Theme/Default.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
The problem is that the text "Select a Date" in my DatePickers is influenced by the style of the TextBlock, increasing the total height of the Datepicker (only at runtime; in design it looks ok).
When you start typing a date (or select one using the calendar) it does not inherit from TextBlock style. The problem is only the text "Select a Date".
I don't want to set a Key for every textblock in my app.
What do I do to fix this?
EDIT
Looking closer at the MSDN documentation, we can see that the text of a TextBox control is displayed inside a FrameworkElement, and not a TextBlock.
http://msdn.microsoft.com/en-us/library/ms752068%28v=vs.110%29.aspx
And the DatePicker has it's value displayed as a TextBox. But the text "Select a Date" seems to be a TextBlock over the TextBox.
EDIT 2
I can access the TextBox template inside the DatePicker:
http://msdn.microsoft.com/en-us/library/ff468215%28v=vs.110%29.aspx
But nothing about the textblock...
You are correct by viewing the style of datepicker control you will not able to find your textblock for Select a date. as this is a watermark value on the textbox within the datepicker control. you will require to edit the style of this textbox within this datepicker.
The textbox used within datepicker control is DatepickerTextbox. You will require to modify the style of this textbox. This is quite easy by using expression blend.
<Style x:Key="DatePickerTextBoxStyle1" TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"/>
<Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement"/>
<ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="watermark_decorator"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unwatermarked"/>
<VisualState x:Name="Watermarked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Watermark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
<Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1"/>
<Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1">
<ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2"/>
</Border>
<ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border x:Name="FocusVisual" BorderBrush="#FF45D6FA" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You will need to modify the style PART_Watermark control that is Content control in above style. by modifying this style it will resolve your problem.
i have a custom togglebutton with some visual states.
I have to override or change the "checked" state and do this in an easy way.
But the state isn't shown but called. What i am doing wrong?
Heres my code (sample)
[TemplateVisualState(GroupName = CommonStateGroup, Name = ToggleButton.CheckedNormal)]
public partial class ToggleButton : ToggleButton
{
internal const String CommonStateGroup = "CommonStates";
internal const String CheckedNormal = "CheckedNormal";
protected virtual void ChangeVisualState(bool useTransitions)
{
if (this.IsChecked.HasValue && this.IsChecked.Value)
{
VisualStateManager.GoToState(this, CheckedNormal, useTransitions);
}
}
protected override void OnChecked(RoutedEventArgs e)
{
base.OnChecked(e);
this.ChangeVisualState(true);
}
And the Template
<ControlTemplate x:Key="myTemplate" TargetType="{x:Type vw:ToggleButton}">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="CheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckedRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BackgroundBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ToggleButtonCheckedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="BackgroundBorder" CornerRadius="{TemplateBinding CornerRadius}" BorderBrush="{TemplateBinding BorderBrush}" Margin="3" BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Rectangle x:Name="CheckedRectangle" StrokeThickness="0"/>
<Rectangle x:Name="MouseOverRectangle" StrokeThickness="0"/>
<Border x:Name="BlinkBorder" Background="{TemplateBinding BlinkBrush}" CornerRadius="{TemplateBinding CornerRadius}" Opacity="0"/>
<ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Border>
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeDashArray="1,1"/>
<Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="0.5" StrokeEndLineCap="Square" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeDashArray="1,1"/>
</Grid>
</ControlTemplate>
The template is created in Blend and the state is testet by clicking around in visual states.
I think the behavior is interrupted by the "checked" state.
My Solution to this:
Adding a "UncheckedNormal" State reacting on Unchecked
Editing the following states:
Normal: Visibility of CheckedBorder = Visible
Enabled: Visibility of CheckedBorder = Visible
MouseOver: Visibility of CheckedBorder = Collapsed
CheckedNormal: Visibility of CheckedBorder = Visible
Background = CheckedBackgroundBrush
UncheckedNormal: Visibility of CheckedBorder = Visible
Background = transparent
I would like to change Border.Background when the ListBox's ListBoxItem is selected.
I made this resource in App.xaml:
<Style x:Key="HighlightStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFE20080" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Strange, it works with Foreground, it changes the color, but it's not working with Background, and that is what I want to change.
The Background property is not set in XAML, so there is no local default value there.
Try setting the Background in your style, in a setter. The reason for the animation not running could be that the brush from the theme is frozen. See http://msdn.microsoft.com/en-us/library/ms750509(v=vs.110).aspx
--- EDIT ---
Sorry, it was late last night when I answered and I missed a couple of things :) The most important of those is that this question concerns Windows Phone.
First, you don't need to animate the color, you want to replace the brush - that would be more efficient.
Second, you might want to change the background on the list box item, instead a particular component of it.
The following lines achieve this:
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFE20080" />
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Then, you have a hardcoded value ('White') on your container control component. Make it inherit the value from the list box item instead, like this:
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"/>
HTH
I have the following style and list box:
<Style x:Key="LwHListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="24, 0, 24, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="#FFCCCCCC" BorderThickness="0, 0, 0, 1" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox x:Name="lbxContainer" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}" />
I used Expression Blend to create the style. I want the ListBoxItem to have a 60% opacity when disabled. I'm populating the ListBox programatically with ListBoxItems that have their IsEnabled property set based on certain criteria. I've stepped through the debugger and confirmed that the ListBoxItems do have IsEnabled = false, so my conclusion is that there must be something wrong with my xaml. Is there something I'm missing or doing wrong that is causing the items to not become opaque when disabled?
The ListBox is on a white background and has black text as the content. The opacity should make it gray. If I add opacity to the normal visual state, it shows up as intended for the normal state, but also for the Disabled state. I know the disabled items are actually disabled because I can't click on them. I figured that the code below would show normal state as opaque but disabled items without opacity.
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="LayoutRoot" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
Update: I'm pretty sure there is something wrong with my disabled state. Nothing I add in the disabled state takes hold, even if I change the background to blue. I am creating ListBoxItems programatically and setting the content property to a user control I have created. Could this be causing problems? It doesn't make sense to me because I can set the normal state with 60% opacity and it works, so why wouldn't the disabled state?
You should not be using a ContentControl inside your control template. You should be using a ContentPresenter instead. You can run into weird issues by having a ContentControl displaying the content of another ContentControl.
Aside from that, the ListBoxItem will only go into the "Disabled" state, if the ListBoxItem.Content is not a Control. If the ListBoxItem.Content is a Control, then it will transition to the "Normal" state even if ListBoxItem.IsEnabled is false.
You've created a style for the ListBoxItem, but not for the ListBox itself. And you don't have to, necessarily. The problem is that by default the ListBox has a white background.
So the first step is to set the ListBox background to Transparent like this...
<ListBox x:Name="lbxContainer" Background="Transparent" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}" />
Then I just made a couple changes to your ListBoxItem style...
<Style x:Key="LwHListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Background" Value="White"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Padding" Value="24, 0, 24, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="LayoutRoot" BorderBrush="#FFCCCCCC" Background="{TemplateBinding Background}" BorderThickness="0, 0, 0, 1" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="LayoutRoot" />
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And now as long as the container around the ListBox is not white, then a disabled ListBoxItem should appear translucent thanks to the Opacity setting.
For example...
<Grid Background="Black">
<ListBox x:Name="lbxContainer" Background="Transparent" Height="Auto" Width="Auto" ScrollViewer.VerticalScrollBarVisibility="Disabled" VerticalAlignment="Top" ItemContainerStyle="{StaticResource LwHListBoxItemStyle}">
<ListBoxItem Content="enabled a" />
<ListBoxItem Content="disabled b" IsEnabled="False"/>
<ListBoxItem Content="enabled c"/>
</ListBox>
</Grid>
Will look like this...