Windows Phone Toolkit: add ContextMenu to Button style template - wpf

I have a piece of XAML code that defines a template for some Buttons inside a StackPanel:
<StackPanel x:Name="ThumbnailsStack">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Height" Value="120" />
<Setter Property="Margin" Value="3" />
<Setter Property="BorderThickness" Value="0" />
</Style>
</StackPanel.Resources>
</StackPanel>
The code works and all the buttons inside the stack assume the defined style.
Now I want to attach a ContextMenu (from the Toolkit library) to each one of them. I tried the following way:
In App.xaml
<Application.Resources>
<toolkit:ContextMenu x:Key="ThumbBtnMenu">
<toolkit:MenuItem Header="delete"></toolkit:MenuItem>
</toolkit:ContextMenu>
</Application.Resources>
In the previous code I added a new tag:
<StackPanel x:Name="ThumbnailsStack">
<StackPanel.Resources>
<Style TargetType="Button">
<Setter Property="Height" Value="120" />
<Setter Property="Margin" Value="3" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="toolkit:ContextMenuService.ContextMenu" Value="{StaticResource ThumbBtnMenu}" />
</Style>
</StackPanel.Resources>
</StackPanel>
Now, when the Page loads, it raises a System.Windows.Markup.XamlParseException: Failed to assign to property 'System.Windows.Setter.Value'

The problem is when you define the Context menu in the resource, there will be only one instance of the ContextMenu (and this same instance will get added to all button) so there will be some issue when it's added to the visual tree since an item can only have one parent.
I think the only way for you to define the Context menu at the Style level is actually to define it inside the complete stlye of the button, like this for example:
<Style TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<toolkit:ContextMenuService.ContextMenu>
<toolkit:ContextMenu>
<toolkit:MenuItem Header="delete"></toolkit:MenuItem>
</toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Related

textbox border not setting correctly on focus - WPF

I have a custom textbox I created in Expression Blend for WPF and I am trying to get the focus states to work correctly. When i tab into the textbox, the Focused part of the style works (and the border changes); however, if I do not have focus in the textbox and I click the textbox, it is not applying the style. If i click around the edges of the textbox (in the border part), it will set correctly. For some reason my scrollviewer is not firing off the focus event correctly.
Below is my style:
<Style x:Key="TextBoxDark" TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="#FF171717" />
<Setter Property="Background" Value="#FF212121" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Grid x:Name="grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
<EasingDoubleKeyFrame KeyTime="0" Value="0.395"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="scrollViewer">
<EasingDoubleKeyFrame KeyTime="0" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
<EasingColorKeyFrame KeyTime="0" Value="#FF0B5A8F"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="scrollViewer" Margin="{TemplateBinding Padding}" Foreground="{TemplateBinding Foreground}"
ToolTipService.ToolTip="{TemplateBinding Text}" VerticalScrollBarVisibility="Hidden" Content="{TemplateBinding Text}" VerticalAlignment="Center"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderBrush" Value="#FF007ACC"/>
<Setter Property="BorderThickness" Value="1"/>
</Trigger>
</Style.Triggers>
</Style>
Try this.may be this might be helpfull to you.thank you.
<Window.Resources>
<Style x:Key="TextBoxDark" TargetType="TextBox">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="#FF171717" />
<Setter Property="Background" Value="#FF212121" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Border Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer Margin="{TemplateBinding Padding}" VerticalScrollBarVisibility="Hidden" ToolTipService.ToolTip="{TemplateBinding Text}" x:Name="PART_ContentHost" Foreground="{TemplateBinding Foreground}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF007ACC"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF007ACC"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF0B5A8F"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter TargetName="PART_ContentHost" Property="Opacity" Value="0.5"></Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="#FF171717"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TextBox Style="{StaticResource TextBoxDark}" Foreground="Red" Height="35" Width="100"></TextBox>
Personally, I never use Blend or the designer window in Visual Studio, because they change the code in ways that I would not. I always write the XAML, so I know exactly what's going on. When I define a new ControlTemplate for a control, I always follow these simple steps and I've never had any problems.
First, find the default ControlTemplate from the TextBox Styles and Templates page on MSDN.
Next, add a Style for the TextBox that sets the Template property to a new ControlTemplate and copy and paste the whole default ControlTemplate in there.
You'll probably need to copy over some resources from the linked page too... basically for this step, get the TextBox control looking and behaving as normal.
Finally, tweak your ControlTemplate however you want, but always in small steps, so that you can keep checking that you haven't removed anything that might break some functionality.
That's it. You should now have a completely working custom TextBox now. Good luck.

Create a border that uses the windows theme

I want to create a border in WPF (XAML) that uses the colors from the current windows theme (XP, Areo, Classic, Modern UI).
I have already tried to use some Brushes from the SystemColors class but the border is not looking the same as the default border of a TextBox.
Is there any way to get the real brush of the borders?
Given below is the default style used by WPF for the TextBox control:
<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels"
Value="True" />
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation"
Value="None" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="MinWidth"
Value="120" />
<Setter Property="MinHeight"
Value="20" />
<Setter Property="AllowDrop"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border"
CornerRadius="2"
Padding="2"
BorderThickness="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}" />
</Border.Background>
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledControlLightColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer Margin="0"
x:Name="PART_ContentHost" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Button with image in: suppress the flicked effect when it's clicked

I have defined a button with a image in it (in a wp7 app). I want to be able to click it, but I don't want it to flicker when it's clicked. Is it possible?
<Button Name="imageButton" BorderThickness="0" Height="80" Width="80" Margin="0,-10,0,0" Clip="">
<Image Source="{Binding favoriteIcon}" Width="35" Height="35" Stretch="Uniform"/>
</Button>
By the 'flicker' effect I presume you mean the way that the colour of the button becomes inverted when clicked?
This behaviour is defined in the Button template, sorry for the huge block of code, but here it is with the part that causes this effect highlighted:
<Style x:Key="PhoneButtonBase" TargetType="ButtonBase">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Padding" Value="10,3,10,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ButtonBase">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<!-- the following visual state describes the behaviour you are observing -->
<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="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}" />
</ObjectAnimationUsingKeyFrames>
</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" Value="{StaticResource PhoneDisabledBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="0" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}" >
<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>
You can create a copy of this template and removed the 'Pressed' state effects to remove it.

How do not allow onMouseOver/Out state while Radio button is selected?

I am wondering if it is possible to halt onMouserOver state while Radio button is checked/selected. I have a prototype where I switch content by clicking restyled radio buttons. I need to keep selected state not changed while the radio button is selected. Now, when mouse rollover/rollout happed it changed the background color as supposed to change when button is not selected. Below is the code. Thank you in advance.
<StackPanel>
<RadioButton x:Name="one" Content="one" IsChecked="True" GroupName="intro" Style="{DynamicResource RadioButtons}" Style="{DynamicResource RadioButtons}" />
<RadioButton x:Name="two" Content="two" IsChecked="True" GroupName="intro" Style="{DynamicResource RadioButtons}" Style="{DynamicResource RadioButtons}" />
<RadioButton x:Name="three" Content="three" IsChecked="True" GroupName="intro" Style="{DynamicResource RadioButtons}" Style="{DynamicResource RadioButtons}" />
</StackPanel>
Style:
<Style x:Key="IntroRadioButtons" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="borderRadioButon" BorderBrush="{x:Null}" BorderThickness="0"
Background="#FFFFB343" Width="90" Height="90" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="0,0,0,4" HorizontalAlignment="Center" VerticalAlignment="Bottom"
TextBlock.FontSize="{DynamicResource PrimaryFontSize}"
TextBlock.FontFamily="{DynamicResource PrimaryFontFamily}"
/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Similar question here. Seems like the two VisualStateGroup's conflict when they target the same property for the same control. Used the same approach as in the link and it seems to be working: Added two borders, one for each group. If there's a better way to solve this than I'm interested in what that is as well :)
<Style x:Key="IntroRadioButtons" TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="borderRadioButon2">
<EasingColorKeyFrame KeyTime="0" Value="#FFFD7713"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="borderRadioButon" BorderBrush="{x:Null}" BorderThickness="0"
Background="#FFFFB343" Width="90" Height="90">
<Border HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="0"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
x:Name="borderRadioButon2" BorderBrush="{x:Null}" BorderThickness="0"
Background="Transparent" Width="90" Height="90">
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Margin="0,0,0,4" HorizontalAlignment="Center" VerticalAlignment="Bottom"
TextBlock.FontSize="{DynamicResource PrimaryFontSize}"
TextBlock.FontFamily="{DynamicResource PrimaryFontFamily}"/>
</Border>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasContent" Value="true">
<Setter Property="FocusVisualStyle" Value="{StaticResource CheckRadioFocusVisual}"/>
<Setter Property="Padding" Value="4,0,0,0"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

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