MouseOver ContentPresenter XAML Style - xaml

I need to change colour of mouseover/pointover of content presenter but my style does not work.
Someone help me?
Thanks
<Style x:Key="Test" TargetType="ContentPresenter">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ColorTest}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ColorTest}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Style>

I do not believe this is possible. Visual States are published by specific controls, and ContentPresenter represents something that could be any kind of control or arbitrarily complex tree of elements.
You can use the subsections in Control Styles and Templates to get an idea of which Visual States are valid for each control, but as you see these are specific for the control in question, and not every state is always supported.
Your style could be amended to use Triggers, such as <Trigger Property="IsMouseOver" Value="True">, but then you could only provide setters for properties of ContentPresenter, and Foreground is not one of those.
Update
However, as TextBlock.Foreground is an attached property, you can make the Trigger solution work in your specific example, and including complex control contents. Please note this won't work for all properties however.
<Grid>
<Grid.Resources>
<ControlTemplate TargetType="Button" x:Key="ButtonControlTemplate">
<ContentPresenter />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextBlock.Foreground" Value="Red" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="TextBlock.Foreground" Value="Blue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource ButtonControlTemplate}" Content="Test" />
</Grid>

Related

How to implement the edge button pointer event?

I have seen this kind of button styling only in edge button and would like to know how to implement it. So there are two different effects into play(as far as I know). First that when buttons are pressed the content inside them shrinks (unlike default effect provided by Windows) and then second a dark non-discrete border appears inside the button when clicked to almost give a feel of depth in it.
This question was a challenge!
My first idea was to use the UWP Community Toolkit DropShadowPanel to create a shadow and clip it to the button's rectangle. Unfortunately this didn't work well, as I would have to set the shadow on a Rectangle that would need to have a visible border, which is not really good for our purpose of having a nicely blended borderless button. In addition, the DropShadowPanel shadow just didn't give a strong enough shadow effect that would be enough for the button to look like in Edge.
I have used Visual Studio and attached it's debugger to the Edge browser to see which control does the browser actually use. The Live Tree Visualizer revealed this:
SpartanXAML.InnerShadowControl? Okay, we don't have that. Let's work around this.
I fired up Photoshop instead. Created a 64x64 square image, put a transparent rectangle layer on the surface and set its Inner Glow as shown in this screenshot:
After export, I got the following PNG:
That looks quite like the inner shadow on the Edge button!
Now let's create a custom button style that uses this image!
<Style TargetType="Button" x:Key="EdgeButtonStyle">
<Setter Property="Background" Value="#f5f5f5" />
<Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="FocusVisualMargin" Value="-3" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Width="64" Height="64" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c1c1c0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="#c1c1c0" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleX">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Scale" Storyboard.TargetProperty="ScaleY">
<DiscreteObjectKeyFrame KeyTime="0" Value="0.8" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerShadow" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw">
<interactivity:Interaction.Behaviors>
<behaviors:Scale x:Name="Scale"
ScaleX="1"
ScaleY="1"
CenterX="32"
CenterY="32"
Duration="100"
Delay="0"
EasingType="Default"
AutomaticallyStart="True"/>
</interactivity:Interaction.Behaviors>
</ContentPresenter>
<Image Source="/Assets/InnerShadowGray.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="Collapsed" x:Name="InnerShadow" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is a lengthy listing so I will just point out the most interesting things:
Removed all borders from the button
Set background to #f5f5f5 and hover background to #c1c1c0 to match Edge
Set the width and height to 64
Added an Image as the last control in the RootGrid, this is the shadow image, is Collapsed by default and appears only when pointer is pressed
Used UWP Community Toolkit's (Microsoft.Toolkit.Uwp.UI.Controls NuGet package) Scale behavior to create a simple, easy to control animation. This required adding xmlns:interactivity="using:Microsoft.Xaml.Interactivity" and xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Animations.Behaviors" XML namespaces to the root element of the file
Replaced the default PointerDownThemeAnimation with a custom animation utilizing Scale behavior, to make the animation more significant and scale uniformly, without skewing the content
Now let's just take our new button for a test ride!
<Button Style="{StaticResource EdgeButtonStyle}" HorizontalAlignment="Center">
<Image Source="Assets/Windows.png" />
</Button>
And the result:

Styling controls: How to overwrite the styles in different 'VisualState's (PointerOver, Pressed, ...)

How does one handle hover states and so on?
One could overwrite a brush like SystemControlHighlightBaseHighBrush for a Button:
<SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="White" />
If any other control uses that brush, it also takes this value, which is not desired. The other option I found is to overwrite the default style:
<!-- Default style for Windows.UI.Xaml.Controls.Button -->
<Style TargetType="Button">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="8,4,8,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here I would change the values in ObjectAnimationUsingKeyFrames. But what is if the default styling changes in an upcoming version of Windows?
Currently I see no other way than overwriting the default style. Perhaps one could overwrite some events and set e.g. the border color there. But I think there are not always all events available and you would have to write your custom button everytime.
It looks somehow wrong to me to overwrite a complete style for changing only one value. How do you handle such cases?
TL;DR: Yes, changing the complete template (not style) is the most used scenario.
There are different points to consider here:
You want all of your controls to have a consistent layout across your application.
So my first option would be to define a new theme for your application and indeed overwrite the SystemControlHighlightBaseHighBrush and other ThemeResource resources required to accomplish your new branding.
You only want a single control to change layout.
If for some valid reason you don't want all controls using the ThemeResource to change to your new theme, you will have to overwrite the complete control template (as the template is one block and thus an all or nothing). There is no need to overwrite all other property setters (like Foreground, Background, Padding, ... in your example).
If you're very lucky, the property you're trying to change is a templated property and you can simply use a single property setter to fix your layout.
The downside with this approach is indeed that future versions of the SDK can change the template of a given control. An example of this are the GridView/GridViewItem styles between Windows 8/8.1 and 10. So far there has mostly been a backward compatibility on styles, meaning your app will continue to work but might not be in line with the latest layout guidelines or miss some performance improvements. It's therefor 'best practice' to re-apply custom layout changes on the newest templates (if time permits).
A 'dirty' solution is 'hacking' into the Visual Tree to change properties at runtime (based on events, ...). But this won't prevent you from possible breaking changes on future SDK updates either, so I wouldn't even consider this as a valid option.
Going with custom controls
The final approach is going with a custom control, define your own template (again the same problem with newer SDK versions) or use the default template and override OnApplyTemplate and tweak the property you'd like to change by getting it from the Visual Tree. But same remarks apply here that a future SDK version might drop the control/state in your tree and break your code.
Conclusion: either option you choose, there's a possibility future SDK versions will break your implementation.

How to get a group of toggle buttons to act like radio buttons in WinRT

have a group of buttons that should act like toggle buttons, but also as radio buttons where only one button can be selected / pressed down at a current time. It also need to have a state where none of the buttons are selected / pressed down.
The behavior will be kind of like Photoshop toolbar, where zero or one of the tools are selected at any time!
Any idea how this can be implemented in Windows 8.
Is it possible to style the toggle button to act like radio button?
I am not looking for a solution like binding IsChecked Property. I need this to implement through editing the style of button.
You can try this:
<Page.Resources>
<Style x:Key="MyRadioStyle" TargetType="RadioButton">
<Setter Property="Background" Value="{ThemeResource PhoneRadioCheckBoxBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource PhoneRadioCheckBoxBorderBrush}"/>
<Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="VerticalAlignment" Value="Top"/>
<Setter Property="Padding" Value="{ThemeResource CheckBoxAndRadioButtonTextPaddingThickness}"/>
<Setter Property="MinWidth" Value="{ThemeResource CheckBoxAndRadioButtonMinWidthSize}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="Container"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked"/>
<VisualState x:Name="Indeterminate"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Container">
<Grid VerticalAlignment="Top">
<ToggleButton x:Name="CheckMark"
Content="{TemplateBinding Content}"
IsChecked="{TemplateBinding IsChecked}" />
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel>
<RadioButton GroupName="MyGroup" IsChecked="True" Content="One" Style="{StaticResource MyRadioStyle}" />
<RadioButton GroupName="MyGroup" Content="Two" Style="{StaticResource MyRadioStyle}" />
<RadioButton GroupName="MyGroup" Content="Three" Style="{StaticResource MyRadioStyle}" />
<RadioButton GroupName="MyGroup" Content="Four" Style="{StaticResource MyRadioStyle}" />
</StackPanel>
Best of luck!

Changing text color for selected ListViewItem in metro UI application

How to get things together?
I'm working on Windows 8 metro application that contains ListView. My listview contains TextBlocks.
Something like this:
MyPage.xaml:
<DataTemplate x:Key="ListViewItemTemplate">
<StackPanel>
<TextBlock Text="{Binding Goal, Mode=OneWay}"/>
</StackPanel>
</DataTemplate>
<ListView x:Name="ChainsList"
ItemsSource="{Binding Chains}"
SelectedItem="{Binding Path=SelectedChain, Mode=TwoWay}"
ItemTemplate="{StaticResource ListViewItemTemplate}"
ItemContainerStyle="{StaticResource ChainsListViewItemStyle}">
</ListView>
I don't like default ListView colors for selected/deselected items, so in Designer mode I selected "Edit additional templates/Edit generated item container" and created own copy of ListViewItem style within StandardStyles.xml:
<Style x:Key="ChainsListViewItemStyle" TargetType="ListViewItem">
<!-- a lot of setters goes here -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="OuterContainer">
<!-- description of visual states goes here (I changed some colors) -->
<Grid x:Name="ReorderHintContent" Background="Transparent">
<!-- List view item structure details goes here -->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now I want to change text color of my list view items depending on selection. If item selected TextBlock's color should be black. If item not selected - white.
AND HERE IS A QUESTION: where should I put logic for chaning TextBlock color? If somewhere in StandardStyles.xml then how I would assign it to TextBlock? If somewhere in list view item template then how should I get selection state?
EDITED:
Try adding these animations to the SelectionStates VisualStateGroup in your ChainsListViewItemStyle style:
<VisualState x:Name="Unselected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="White"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedSwiping">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>

How to set textbox background transferent when readonly = true in windows phone 8

I want to set the textbox background is tranfernt when readonly = true i don't want the default color .. can anyone give me solution
I am trying this one but its not working
<TextBox Name="MyTextBox" Background="Transparent" Text="My Text" IsReadOnly="True" />
Thanks
Setting IsReadOnly on a TextBox applies certain styles to the TextBox including its Background. You can change these styles by doing the following:
Open your xaml file in Blend from within Visual Studio
In Blend, right click on your TextBox and click on Edit Template-->Edit Copy
In the next dialog, tick Application to define the new style in App.xaml and give your style a name.
Click save and close Blend.
You will see the new style that you just created is in App.xaml. You would want to change the value of Background story board target property under the ReadOnly visual state to whichever color you want.
To apply this new style to any TextBox just add Style="{StaticResource TextBoxStyle1}" to your TextBox where TextBoxStyle1 is the name you assigned to your style.
Edit:
Here is the full style, add it in App.xaml inside <Application.Resources>
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
<Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>
<Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Background="Transparent">
<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="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReadOnly">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ReadonlyBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="MainBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Margin="{StaticResource PhoneTouchTargetOverhang}"/>
<Border x:Name="ReadonlyBorder" BorderBrush="{StaticResource PhoneDisabledBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}" Visibility="Collapsed"/>
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then in your text box you simply point to this style:
<TextBox IsReadOnly="True" Style="{StaticResource TextBoxStyle1}" />
Another approach is to set the TextBox IsHitTestVisible=false. The field is then also not editable by the user and you can set the background as usual.
By the way, setting a different border color of a disabled textbox can be done application wide programmatically:
(App.Current.Resources["PhoneDisabledBrush"] as SolidColorBrush).Color = Colors.Magenta;
RichTextBox allows a lot of customization and works well for when you want to register events. Note that IsReadOnly is set to true by default for RichTextBox so you do not need to set this property.