I Don't want message "SELECT DATE" in DatePicker - wpf

I don't want display "Select Date" in textbox of DatePicker but I want see something like this //____ or another text.
This is my RESOURCE
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ABC" TargetType="DatePicker">
<Setter Property="Foreground" Value="#FF333333" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="SelectedDateFormat" Value="Short" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="DisplayDateStart" Value=" 01/01/1990" />
<Setter Property="DisplayDateEnd" Value="12/31/2090" />
<Setter Property="Padding" Value="2"/>
<Setter Property="FontFamily" Value="Verdana" />
<Setter Property="FontSize" Value="14" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value ="Center" />
<Setter Property="VerticalAlignment" Value= "Center" />
<Setter Property = "Text" Value="{x:Null}" />
<Setter Property = "SelectedDate" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property ="IsMouseOver" Value="True">
<Setter Property= "Background" Value="Coral"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property= "Background" Value="LemonChiffon"/>
</Trigger>
</Style.Triggers>
</Style>

You can modify the default template for the DatePickerTextBox
The thing to change is the 'PART_Watermark' ContentControl. The code for the DatePicker sets the Content property of this control, so we can't just change the Content. Instead override the ControlTemplate for this control and just make it a TextBlock with the text you want.
<ContentControl x:Name="PART_Watermark"
Opacity="0"
Focusable="False"
IsHitTestVisible="False"
Padding="2">
<ContentControl.Template>
<ControlTemplate>
<TextBlock Text="//____"/>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
Here's the whole thing:
<Style 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="DatePickerTextBox">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
<VisualTransition To="MouseOver" GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
<ColorAnimation Storyboard.TargetName="watermark_decorator" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState Name="Unwatermarked" />
<VisualState Name="Watermarked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
<DoubleAnimation Storyboard.TargetName="PART_Watermark" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
</VisualStateGroup.Transitions>
<VisualState Name="Unfocused" />
<VisualState Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
CornerRadius="1"
Opacity="1">
<Grid x:Name="WatermarkContent"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border x:Name="ContentElement" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="#FFFFFFFF"/>
</Border.BorderBrush>
</Border>
<Border x:Name="watermark_decorator" BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="#FFFFFFFF"/>
</Border.BorderBrush>
<ContentControl x:Name="PART_Watermark"
Opacity="0"
Focusable="False"
IsHitTestVisible="False"
Padding="2">
<ContentControl.Template>
<ControlTemplate>
<TextBlock Text="//____"/>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>
</Border>
<ScrollViewer x:Name="PART_ContentHost"
Margin="0"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
<Border x:Name="FocusVisual" BorderBrush="#FF45D6FA" CornerRadius="1" Opacity="0" IsHitTestVisible="False"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Extending #wizzardz's answer, you may introduce a DependencyProperty in Code to set the value in XAML on DesingTime:
public class CustomDatePicker : DatePicker
{
public string WatermarkText
{
get { return (string)GetValue(WatermarkTextProperty); }
set { SetValue(WatermarkTextProperty, value); }
}
public static readonly DependencyProperty WatermarkTextProperty =
DependencyProperty.Register("WatermarkText", typeof(string), typeof(CustomDatePicker), new PropertyMetadata("Datum wählen..."));
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DatePickerTextBox box = base.GetTemplateChild("PART_TextBox") as DatePickerTextBox;
box.ApplyTemplate();
ContentControl watermark = box.Template.FindName("PART_Watermark", box) as ContentControl;
watermark.Content = WatermarkText;
}
}
and in XAML
<local:CustomDatePicker WatermarkText="Start"/>
This way you may also set Binding on the Watermarktext.

This is another solution from the code
public class CustomWatermarkedDatePicker : DatePicker
{
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
DatePickerTextBox box = base.GetTemplateChild("PART_TextBox") as DatePickerTextBox;
box.ApplyTemplate();
ContentControl watermark = box.Template.FindName("PART_Watermark", box) as ContentControl;
watermark.Content = "Custom Text";
}
}
Hope this helps.

Related

Binding the textbox width of a ComboBox to the width of its parent ComboBox in Window.Resources (WPF)

I designed a custom ComboBox.
I'd like to bind my ComboBox's textbox width to the width of its parent ComboBox.
For example, if the width of the ComboBox changes in Grid.Children, its TextBox should likewise change.
XAML:
Note: Some unnecessary blocks have been removed for readability and convenience.
Note: I'm aware that the PART EditableTextBox section needs to be edited, but I'm not sure how.
<Window.Resources>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="20" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Padding" Value="4,4,0,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox" Storyboard.TargetProperty="(TextElement.Foreground). (SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FF888888" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="EditStates">
<VisualState x:Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PART_EditableTextBox">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ContentSite">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
<ContentPresenter x:Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Stretch"
HorizontalAlignment="Left">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBoxTemplate}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Foreground="{TemplateBinding Foreground}"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid x:Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderBrush="DarkGray" BorderThickness="1" Background="White">
</Border>
<ScrollViewer BorderBrush="DarkGray" Padding="3,3,3,11" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="9" />
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Resources>
<Style TargetType="ScrollBar" >
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="True"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid>
<Border CornerRadius="0,9,9,0" Background="{StaticResource ScrollBarNormalBackground}" Width="15" Margin="2,2,0,0" BorderBrush="DarkGray" BorderThickness="1"/>
<Track x:Name="PART_Track" IsDirectionReversed="True" Uid="PART_Track">
<Track.Thumb>
<Thumb Uid="Thumb_0">
<Thumb.Template>
<ControlTemplate>
<Border Background="LightGoldenrodYellow" Width="15" Height="12" Margin="2,2,0,0" CornerRadius="0,9,9,0" BorderBrush="DarkGray" Cursor="Hand" BorderThickness="1"/>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border" CornerRadius="9" SnapsToDevicePixels="true" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFC5CBF9" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="#FFDDDDDD" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.Children>
<ComboBox x:Name="Category_ComboBox" GotFocus="Category_ComboBox_GotFocus" LostFocus="Category_ComboBox_LostFocus" ContextMenu="{StaticResource CustomContextMenu}" IsEditable="True" BorderBrush="DarkGray" HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="267" Margin="21,138,0,0"/>
</Grid.Children>
</Grid>
Thanks
The text box PART_EditableTextBox is only visible when the ComboBox is in edit mode (which is when ComboBox.IsEdit is enabled).
To make it stretch simply set the TextBox.HorizontalAlignment property to HorizontalAlignment.Stretch:
<TextBox x:Name="PART_EditableTextBox"
HorizontalAlignment="Stretch" />
In case you meant to make the items in the selection box to stretch set ComboBox.HorizontalContentAlignment to HorizontalAlignment.Stretch:
<ComboBox HorizontalContentAlignment="Stretch" />

WPF, Create brush animation in Style.Triggers of a button style

I am working now on a Button style, I've included a control template and style triggers. Now I want to make the background brush fade to a certain colour when mouse enter to button. But the colour animation won't work with a brush. and I'm stuck on that since yesterday. Here is what I've done so far in my button style:
<Converters:MathConverter x:Key="MathConverter" />
<Converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
<Style TargetType="Button">
<Setter Property="FontSize"
Value="{Binding FontSizeButton}" />
<Setter Property="Margin"
Value="{Binding FontSizeBase, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE/3}" />
<Setter Property="Padding"
Value="{Binding FontSizeButton, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE/3}" />
<Setter Property="MinWidth"
Value="{Binding ActualHeight, RelativeSource={RelativeSource Self}}" />
<Setter Property="Width"
Value="NaN" />
<Setter Property="Background"
Value="{Binding BrushBackButton}" />
<Setter Property="BorderBrush"
Value="{Binding BrushBorder}" />
<Setter Property="BorderThickness"
Value="{Binding BorderThicknessBase}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="Content"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextElement.Foreground="{TemplateBinding Foreground}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!--
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="{Binding BrushBackButtonOver}" />
</Trigger>
-->
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetProperty="Background">
<ColorAnimation To="Blue" Duration="10"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
You should use the VisualStateManager for this kind of problem.
It may lead you to something like that :
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name ="Border" Background="LightBlue">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Red"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
To="Blue"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
[...]
[Edit]
Concerning your specific problem, you should put your trigger in the ControlTemplate's Triggers.
<ControlTemplate TargetType="{x:Type Button}">
[...]
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard TargetName="Border" TargetProperty="(Background).(SolidColorBrush.Color)">
<ColorAnimation To="Blue" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>

dynamic bind to a resource but in a state animation

I have defined a visual state in which a button has a glow effect.
But I want to have a variable BlurRadius in that state.
My approach was adding a resource and change that resource in code behind.
But changes doesn't affect the visual controls.
here is xaml code :
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="blend1.question"
Title="question" Height="300" Width="300">
<Window.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#F3F3F3" Offset="0"/>
<GradientStop Color="#EBEBEB" Offset="0.5"/>
<GradientStop Color="#DDDDDD" Offset="0.5"/>
<GradientStop Color="#CDCDCD" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
<System:Double x:Key="d1">10</System:Double>
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true">
<Microsoft_Windows_Themes:ButtonChrome.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="0"/>
</Microsoft_Windows_Themes:ButtonChrome.Effect>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidFocused"/>
<VisualState x:Name="InvalidUnfocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="mySG">
<VisualState x:Name="sMouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="Chrome">
<EasingDoubleKeyFrame KeyTime="0" Value="{StaticResource d1}"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="Chrome">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="Chrome">
<EasingColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="sMouseOut">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="Chrome">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="Chrome">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Microsoft_Windows_Themes:ButtonChrome>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#ADADAD"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Margin="1">
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="16.4,8,0,0" VerticalAlignment="Top" Width="75" Style="{DynamicResource ButtonStyle1}" >
<Button.Effect>
<DropShadowEffect BlurRadius="0" ShadowDepth="0" Color="Red"/>
</Button.Effect>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:GoToStateAction TargetObject="{Binding ElementName=button}" StateName="sMouseOver"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:GoToStateAction TargetObject="{Binding ElementName=button}" StateName="sMouseOut"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
<Button Content="increase" HorizontalAlignment="Right" Margin="0,8,30.8,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
</Grid>
</Window>
and here is the code behind :
/// <summary>
/// Interaction logic for question.xaml
/// </summary>
public partial class question : Window
{
public question()
{
InitializeComponent();
}
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
double d= (double)Resources["d1"];
Resources["d1"]=d+10;
MessageBox.Show(Resources["d1"].ToString());
}
}
How should I dynamic bind to a resource in a state ? and what about the condition in which I use a DependencyProperty in my window class for varying BlurRadius ? and If there is another logical approach let me know.
Thanks in advance.
It was impossible. :)
Thanks for all who contributed to this answer.

Unable to find resource style error

I am having a problem with my stying where an error message is showing saying: Cannot find a Resource with the Name/Key PerformanceBarChartBarTemplate [Line: 454 Position: 35]
My style code is:
<Style x:Key="MainChartStyle" TargetType="toolkit:Chart">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="TitleStyle" Value="{StaticResource ChartTitle}"/>
<Setter Property="Palette">
<Setter.Value>
<datavis:ResourceDictionaryCollection>
<ResourceDictionary>
<Style TargetType="toolkit:BarDataPoint">
<Setter Property="Background"
Value="#FF57007f" />
<Setter Property="BorderBrush"
Value="#FF2e0007" />
<Setter Property="Template"
Value="{StaticResource PerformanceBarChartBarTemplate}" />
</Style>
</ResourceDictionary>
</datavis:ResourceDictionaryCollection>
</Setter.Value>
</Setter>
<Setter Property="LegendStyle">
<Setter.Value>
<Style TargetType="dataVisualizationToolkit:Legend">
<Setter Property="Margin"
Value="15,0,15,0" />
<Setter Property="VerticalAlignment"
Value="Center" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="Background"
Value="Transparent" />
</Style>
</Setter.Value>
</Setter>
<Setter Property="ChartAreaStyle">
<Setter.Value>
<Style TargetType="Panel">
<Setter Property="MinWidth" Value="100"/>
<Setter Property="MinHeight" Value="75"/>
</Style>
</Setter.Value>
</Setter>
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="Background"
Value="Transparent">
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:Chart">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<dataVisualizationToolkit:Title Style="{TemplateBinding TitleStyle}"
Content="{TemplateBinding Title}" />
<Grid Margin="0,15,0,15"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<dataVisualizationToolkit:Legend x:Name="Legend"
Style="{TemplateBinding LegendStyle}"
Grid.Column="1"/>
<toolkitChartingPrimitives:EdgePanel x:Name="ChartArea"
Style="{TemplateBinding ChartAreaStyle}">
<Grid Style="{TemplateBinding PlotAreaStyle}"
Canvas.ZIndex="-1" />
</toolkitChartingPrimitives:EdgePanel>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And the control which it can't see is:
<ControlTemplate x:Key="PerformanceBarChartBarTemplate"
TargetType="toolkit:BarDataPoint">
<Border BorderThickness="0"
Opacity="0"
x:Name="Root">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MouseOverHighlight"
Storyboard.TargetProperty="Opacity"
To="0.6"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectionHighlight"
Storyboard.TargetProperty="Opacity"
To="0.6"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="0 4 0 4">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Main bar shape -->
<Rectangle Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"
RadiusX="3"
RadiusY="3"
Grid.Row="0"
Grid.RowSpan="2">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="10"
Direction="0"
Color="#FFFFFFFF"
ShadowDepth="0" />
</Rectangle.Effect>
</Rectangle>
<!-- Diffuse Glow -->
<Rectangle RadiusX="3"
RadiusY="3"
Margin="4"
Grid.Row="0"
Grid.RowSpan="2"
Opacity=".25"
Fill="White"
>
<Rectangle.Effect>
<BlurEffect Radius="8" />
</Rectangle.Effect>
</Rectangle>
<!-- Specular Highlight -->
<Rectangle RadiusX="3"
RadiusY="3"
Margin="2"
Grid.Row="0">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#99ffffff"
Offset="0" />
<GradientStop Color="#22ffffff"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<!--<Border BorderBrush="#ccffffff"
BorderThickness="1">
<Border BorderBrush="#77ffffff"
BorderThickness="1" />
</Border>-->
<Rectangle x:Name="SelectionHighlight"
Fill="Red"
Opacity="0" />
<Rectangle x:Name="MouseOverHighlight"
RadiusX="3"
RadiusY="3"
Fill="White"
Opacity="0" />
</Grid>
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
</ToolTipService.ToolTip>
</Border>
</ControlTemplate>
I think you just need to move the 'PerformanceBarChartBarTemplate' control template above the style you defined in the resource section.
Edit:
First you need to wrap your template in a style and give it a name
<Style x:Key="BarDataPointStyle" TargetType="toolkit:DataPoint">
<Setter Property="Template" Value="{StaticResource PerformanceBarChartBarTemplate}"/>
</Style>
The reason of doing this is because I noticed I have to have the inner style named 'DataPointStyle' to get it working, and then I use BasedOn to get your template.
Here is how you define the palette.
<toolkit:Chart.Palette>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint" BasedOn="{StaticResource BarDataPointStyle}">
<Setter Property="Background" Value="Yellow" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint" BasedOn="{StaticResource BarDataPointStyle}">
<Setter Property="Background" Value="Red" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</toolkit:Chart.Palette>
I hope this helps.
Solution 2:
Just replace your setter of the Palette with this one. You will notice I added a x:Key to the style, which was what you were missing. I tested it and it works.
<Setter Property="Palette">
<Setter.Value>
<toolkit:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint">
<Setter Property="Background"
Value="#FF57007f" />
<Setter Property="BorderBrush"
Value="#FF2e0007" />
<Setter Property="Template"
Value="{StaticResource PerformanceBarChartBarTemplate}" />
</Style>
</ResourceDictionary>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="toolkit:BarDataPoint">
<Setter Property="Background"
Value="Red" />
<Setter Property="BorderBrush"
Value="Black" />
<Setter Property="Template"
Value="{StaticResource PerformanceBarChartBarTemplate}" />
</Style>
</ResourceDictionary>
</toolkit:ResourceDictionaryCollection>
</Setter.Value>
</Setter>

Alternating an image and color as button background depending on state in XAML

I have an image that I'm using as a background for my buttons. If the button is disabled, I want it to be a certain color, in this case, #FFCCCCCC, but when it is enabled, I want it to use the image as the background. Is this possible? I'm modifying the template in Expression Blend, but I can't find the right combination. It seems that either the button has an image background or a color background, but can't change according to state.
I'm using Windows Phone 7 / Silverlight.
My XAML is below:
<Style x:Key="SiteKeyButtonStyle" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="24" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="MinWidth" Value="140" />
<Setter Property="Height" Value="50" />
<Setter Property="Padding" Value="24, 0, 24, 0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentContainer" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="#FFCCCCCC"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ButtonBackground" To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" >
<Border.Background>
<ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/>
</Border.Background>
<ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The typical approach to this sort of thing is to add a Rectangle element to the core design like this:-
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" >
<Rectangle x:Name="BackgroundElement">
<Rectangle.Fill>
<ImageBrush ImageSource="/ProjectName;component/Images/Icons/button-background.png" Stretch="Fill"/>
</Rectangle.Fill>
</Rectangle>
<ContentControl x:Name="ContentContainer" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Padding="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
</Border>
You can now change the Disabled VisualState so that background is not Transparent but #FFCCCCCC. Also add a DoubleAnimation to set the Opacity of the "BackgroundElement" to 0 in both the Disabled and Pressed states.
So when enabled the the image in the rectangle is seen beding any content in the content container. When disabled the image is transparent and the #FFCCCCCC color is seen. When pressed the PhoneForegroundBrush color is seen.
you can change the entire controltemplate in the trigger so something like this.
i didn't test this but hopefully it will give u a good idea of how to do it.
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<ControlTemplate TargetType="{x:Type Button}">
</ControlTemplate>
</Trigger>
</Style.Trigger>
</Style>

Resources