Create a mouse hover effect in buttons using XAML

Create a mouse hover effect in buttons using XAML - c#

I am making a Windows 8 store app, and I want a HyperlinkButton that changes its color whenever it is clicked or mouse is hovered over it. Please provide me with its whole coding. I have looked everywhere, but none are working for my project. I am using Visual Studio Ultimate 2012.

Okay, right out of the box, here's the full implementation (Windows 8.1):
<Button Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>
First, I recommend that you do not attempt to customize the colors. This helps ensure a level of visual alignment with your app and the rest of the ecosystem. So, you might tweak the look and feel by changing the theme like this:
<Button RequestedTheme="Dark"
Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>
<Button RequestedTheme="Light"
Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>
However, sometimes you must customize more. I get that. So, if you want to customize those colors, you will need to override the theme. Like this (in app.xaml):
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Dark">
<!-- normal -->
<SolidColorBrush x:Key="ButtonForegroundThemeBrush" Color="Blue" />
<SolidColorBrush x:Key="ButtonBackgroundThemeBrush" Color="Transparent" />
<!-- hover -->
<SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="Red" />
<SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="Transparent" />
<!-- pressed -->
<SolidColorBrush x:Key="ButtonPressedForegroundThemeBrush" Color="White" />
<SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="Red" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Application.Resources>
Runny enough, I asked a similar question a while back Simple hover effect in XAML?
Best of luck!

You have two choice. Either you can customize the default style of HyperlinkButton or you can change the value of required default system brush (This will create effect to all HyperlinkButton).
System brush of HyperlinkButton.
<SolidColorBrush x:Key="HyperlinkButtonBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkDisabledThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="#FF9C72FF" />
<SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="#CC9C72FF" />
<SolidColorBrush x:Key="HyperlinkPressedForegroundThemeBrush" Color="#999C72FF" />
Default Style
<Style TargetType="HyperlinkButton">
<Setter Property="Foreground" Value="{StaticResource HyperlinkForegroundThemeBrush}" />
<Setter Property="Background" Value="{StaticResource HyperlinkButtonBackgroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource HyperlinkButtonBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{StaticResource HyperlinkButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="12,4,12,5" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="3">
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
<Rectangle x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5" />
<Rectangle x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
HyperlinkButton styles and templates

Related

WPF: Styling radio buttons into a square

I have a WPF application where I need the user to pick one and only one corner of an onscreen box.
It makes sense to me that the type of button would be a radio button. Exactly one corner can be selected at a time.
But, Radio buttons are naturally round in Windows and WPF. But WPF allows someone to restyle the UI elements, if they understand how.
Can someone show me how this could be restyled. I would like to see it done in a way that would not affect the look of the other radio buttons in the same window.

To style the RadioButton the way you want it, you'll need to change its ControlTemplate to a custom one. This link has a sample ControlTemplate. I've adapted it so that the RadioButton shows up as a square. It's a simplified ControlTemplate in that it has no animations:
<Style x:Key="SquareRadioButton" TargetType="{x:Type RadioButton}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<BulletDecorator Background="Transparent">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Rectangle
x:Name="Border"
StrokeThickness="1"
Stroke="Black"
Fill="White"
/>
<Rectangle
x:Name="CheckMark"
Fill="Black"
Visibility="Collapsed"
Margin="2"
/>
</Grid>
</BulletDecorator.Bullet>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Stroke.Color"
>
<DiscreteColorKeyFrame KeyTime="0" Value="LightGray" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="CheckMark"
Storyboard.TargetProperty="Fill.Color"
>
<DiscreteColorKeyFrame KeyTime="0" Value="LightGray" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked" >
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="CheckMark"
Storyboard.TargetProperty="(UIElement.Visibility)"
>
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter
Margin="4,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True"
/>
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can then apply it to the RadioButton you want to style:
<RadioButton Style="{StaticResource SquareRadioButton}" Content="Option 1" />

UWP VisualState - Modifying entire class (Button for example)

in UWP, we can easily change the properties of a button for example based on the window size, using the visualstate.setters
<VisualState x:Name="VisualStateNarrow" >
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="{StaticResource NarrowMinHeight}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="btnTest.Height" Value="100"/>
<Setter Target="btnTest.Width" Value="100"/>
....
</VisualState.Setters>
</VisualState>
....
Now let's say I have a large number of buttons. Instead of manually typing each entry, btnA.Height.., BtnB.Height... and so on, is there a way maybe to enter them within the custom.xaml?
I was trying something like:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="using:Template10.Controls">
<x:Double x:Key="CustomHeightN">100</x:Double>
<x:Double x:Key="CustomWidthN">100</x:Double>
<ResourceDictionary.ThemeDictionaries
<ResourceDictionary x:Key="VisualStateNarrow" >
<Style TargetType="Button">
<Setter Property="Height" Value="{ThemeResource CustomHeightN}" />
<Setter Property="Width" Value="{ThemeResource CustomWidthN}" />
</Style>
</ResourceDictionary>
....
But of course, it does not work. Could anyone suggest something by a chance?

The easiest way is to override the button template and add your state to its VisualStateManager.
Here, I've created a new AdaptiveGroup in the existing state manager which will change the Width and Height of the button root grid (some part of the style have been removed for clarity)
<Style TargetType="Button">      
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="buttonRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates" />
<VisualStateGroup x:Name="FocusStates" />
<VisualStateGroup x:Name="AdaptiveGroups">
<VisualState x:Name="narrow" />
<VisualState x:Name="wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="buttonRoot.Width" Value="200" />
<Setter Target="buttonRoot.Height" Value="200" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The full code:
<Page
x:Class="ButtonVisualStateManager.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonVisualStateManager"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" />
<Setter Property="Foreground" Value="{ThemeResource ButtonForegroundThemeBrush}"/>
<Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
<Setter Property="Padding" Value="12,4,12,4" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="buttonRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
<DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
<VisualState x:Name="PointerFocused" />
</VisualStateGroup>
<VisualStateGroup x:Name="AdaptiveGroups">
<VisualState x:Name="narrow" />
<VisualState x:Name="wide">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="buttonRoot.Width" Value="200" />
<Setter Target="buttonRoot.Height" Value="200" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="3">
<ContentPresenter x:Name="ContentPresenter"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw"/>
</Border>
<Rectangle x:Name="FocusVisualWhite"
IsHitTestVisible="False"
Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="1.5" />
<Rectangle x:Name="FocusVisualBlack"
IsHitTestVisible="False"
Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
StrokeEndLineCap="Square"
StrokeDashArray="1,1"
Opacity="0"
StrokeDashOffset="0.5" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="button 1" />
<Button Content="button 2" />
<Button Content="button 3" />
<Button Content="button 4" />
</StackPanel>
</Page>

XamarinForm CarouselPage - UWP Slideshow

Im trying to develop simple intro in my Xamarin app [For UWP], similar to slideshow with navigation dots ( https://github.com/chrisriesgo/xamarin-forms-carouselview - i think its too complicated, and its not for windows platform. Another example but its not work : https://gist.github.com/adamped/9367c64e64e12e063508309f35a9d6eb#file-carouselview-indicators) . Is there any easy way to add dots to Xamarin.Form.CarouselPage ?
Slideshow.cs:
public SlideShow()
{
Children.Add(new SimpleContentPage1());
Children.Add(new SimpleContentPage2());
Children.Add(new SimpleContentPage3());
}
App.xaml.cs
var slidePage = new SlideShow();
MainPage = slidePage;
Each ContentPage has some image / label / custom control.

Is there any easy way to add dots to Xamarin.Form.CarouselPage?
Sure, let's see how Xamarin implements this control:
For UWP, Xamarin uses the Renderer under Xamarin.Forms.Platform.WinRT namespace, see CarouselPageRenderer.cs
public class CarouselPageRenderer : FlipView, IVisualElementRenderer
It actually inherits from FlipView control.
So we can create a style which target type is FlipView and add an item indicator.
Create a control for indicator(LINK):
public sealed class FlipViewIndicator : ListBox
{
/// <summary>
/// Initializes a new instance of the <see cref="FlipViewIndicator"/> class.
/// </summary>
public FlipViewIndicator()
{
this.DefaultStyleKey = typeof(FlipViewIndicator);
}
/// <summary>
/// Gets or sets the flip view.
/// </summary>
public FlipView FlipView
{
get { return (FlipView)GetValue(FlipViewProperty); }
set { SetValue(FlipViewProperty, value); }
}
/// <summary>
/// Identifies the <see cref="FlipView"/> dependency property
/// </summary>
public static readonly DependencyProperty FlipViewProperty =
DependencyProperty.Register("FlipView", typeof(FlipView), typeof(FlipViewIndicator), new PropertyMetadata(null, (depobj, args) =>
{
FlipViewIndicator fvi = (FlipViewIndicator)depobj;
FlipView fv = (FlipView)args.NewValue;
// this is a special case where ItemsSource is set in code
// and the associated FlipView's ItemsSource may not be available yet
// if it isn't available, let's listen for SelectionChanged
fv.SelectionChanged += (s, e) =>
{
fvi.ItemsSource = fv.Items;
};
fvi.ItemsSource = fv.Items;
// create the element binding source
Binding eb = new Binding();
eb.Mode = BindingMode.TwoWay;
eb.Source = fv;
eb.Path = new PropertyPath("SelectedItem");
// set the element binding to change selection when the FlipView changes
fvi.SetBinding(FlipViewIndicator.SelectedItemProperty, eb);
}));
}
Theme(themes\Generic.xaml):
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="FlipViewIndicatorUnselectedThemeBrush">Gray</SolidColorBrush>
<SolidColorBrush x:Key="FlipViewIndicatorSelectedThemeBrush">#FFFFFFFF</SolidColorBrush>
</ResourceDictionary>
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="FlipViewIndicatorUnselectedThemeBrush">Gray</SolidColorBrush>
<SolidColorBrush x:Key="FlipViewIndicatorSelectedThemeBrush">#FF000000</SolidColorBrush>
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="FlipViewIndicatorUnselectedThemeBrush" Color="{ThemeResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="FlipViewIndicatorSelectedThemeBrush" Color="{ThemeResource SystemColorHighlightColor}" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<Style TargetType="ListBoxItem" x:Key="FlipViewIndicatorItem">
<Setter Property="Padding" Value="0,4,10,4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PART_FlipViewIndicatorItem">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewIndicatorSelectedThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PART_FlipViewIndicatorItem">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewIndicatorSelectedThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="PART_FlipViewIndicatorItem">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource FlipViewIndicatorSelectedThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="PART_FlipViewIndicatorItem"
Width="20" Height="20" Fill="{ThemeResource FlipViewIndicatorUnselectedThemeBrush}"
Margin="0,5,5,0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:FlipViewIndicator">
<Setter Property="Margin" Value="3,0,0,0" />
<Setter Property="ItemContainerStyle" Value="{StaticResource FlipViewIndicatorItem}" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="TabNavigation" Value="Once" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBox">
<Border x:Name="PART_FlipViewIndicatorLayoutRoot"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="PART_FlipViewIndicatorLayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="PART_FlipViewIndicatorLayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="PART_FlipViewIndicatorLayoutRoot">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListBoxFocusBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
Padding="{TemplateBinding Padding}" TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<ItemsPresenter Margin="{TemplateBinding Margin}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Modify the default template of FlipView, use the above control(LINK):
<Application
x:Class="CarouselPageNavigation.UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CarouselPageNavigation.UWP"
xmlns:control="using:CarouselPageNavigation.UWP.Controls"
RequestedTheme="Light">
<Application.Resources>
<Style TargetType="FlipView">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="FlipView">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid.Resources>
<!--Omitted-->
</Grid.Resources>
</Grid>
<StackPanel Grid.Row="1">
<control:FlipViewIndicator FlipView="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Margin="5"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
Please see my demo in here
Screenshot:

c# windows phone 8.1 change default controls color

in my wp app I would like to have all the controls' color black; for textblocks and textboxes I just declared a style in my dictionary like this:
<Style x:Key="TextColor" TargetType="TextBlock">
<Setter Property="Foreground" Value="Black"/>
</Style>
I also have some time picker controls and a checkbox in which I couldn't modify the color of the header and the box respectively. This is what I did:
CheckBox VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="0,110,0,0"
x:Name="dayOffBox"
Content="Day off?" Checked="DayOff_Checked"
Foreground="Black"/>
In this way,the text "Day off?" that is the content of checkbox is black, but the box is still white.
Same for the Header of time pickers. Do I have to change the default color of the app's text? How can I do that?

You can edit any control style by editing the default style of the control. In the case of the CheckBox it is the following:
<Style TargetType="CheckBox">
<Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundThemeBrush}" />
<Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderThemeBrush}" />
<Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}" />
<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="CheckBox">
<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="Grid" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
<VisualTransition From="PointerOver" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="Grid" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Grid" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25.5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" VerticalAlignment="Top">
<Border x:Name="CheckBackground"
IsHitTestVisible="False"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Height="25.5"
Width="25.5" />
<Rectangle x:Name="NormalRectangle"
IsHitTestVisible="False"
Width="13"
Height="13"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"
Visibility="Collapsed" />
<Path x:Name="CheckGlyph"
IsHitTestVisible="False"
Visibility="Collapsed"
Width="18.5"
Height="17"
Stretch="Fill"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
StrokeLineJoin="Round"
StrokeThickness="2.5"
FlowDirection="LeftToRight" />
</Grid>
<ContentPresenter x:Name="ContentPresenter"
Grid.Column="1" Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Foreground="{TemplateBinding Foreground}"
FontFamily="{ThemeResource PhoneFontFamilyNormal}"
FontSize="{ThemeResource TextStyleLargeFontSize}"
FontWeight="Normal"
AutomationProperties.AccessibilityView="Raw" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To change the color to black you need to change for example the Fill property on the CheckGlyph Path element from CheckBoxForegroundThemeBrush to another value. Or you can completely change the visual appearance of the CheckBox control. You can experiment for yourself.
Another way is to override any of the following resources by adding them to your App.xaml:
<SolidColorBrush x:Key="CheckBoxBorderThemeBrush" Color="Black" />
<SolidColorBrush x:Key="CheckBoxContentDisabledForegroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxContentForegroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxDisabledBorderThemeBrush" />
<SolidColorBrush x:Key="CheckBoxDisabledForegroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxForegroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxPointerOverBackgroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxPointerOverForegroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxPointerOverBorderThemeBrush" />
<SolidColorBrush x:Key="CheckBoxPressedBackgroundThemeBrush" />
<SolidColorBrush x:Key="CheckBoxPressedBorderThemeBrush" />
<SolidColorBrush x:Key="CheckBoxPressedForegroundThemeBrush" />
The meaning of what they will change is self descriptive and they need to have exactly the same name.
Your App.xaml may then look like this:
<Application
x:Class="MyApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedTheme="Light">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<!-- Overriden theme resources -->
<ResourceDictionary x:Key="Light">
<SolidColorBrush x:Key="CheckBoxBorderThemeBrush" Color="Black" />
</ResourceDictionary>
<ResourceDictionary x:Key="Dark">
<SolidColorBrush x:Key="CheckBoxBorderThemeBrush" Color="White" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
<ResourceDictionary.MergedDictionaries>
<!-- Other resources -->
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
As for the TimePicker the default style is the following:
<Style TargetType="TimePicker">
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
<Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
<Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TimePicker">
<StackPanel Margin="{TemplateBinding Padding}" x:Name="LayoutRoot">
<ContentPresenter x:Name="HeaderContentPresenter" Style="{StaticResource HeaderContentPresenterStyle}" Margin="0,0,0,-3"
Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
<Button x:Name="FlyoutButton"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding Foreground}"
BorderThickness="2.5"
Padding="6.5,0,0,3"
IsEnabled="{TemplateBinding IsEnabled}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So the solution for the TimePicker header color would be to create a new TimePicker style, and set the Foreground of the HeaderContentPresenter element, or you could just change the HeaderTemplate of the TimePicker without creating a new style:
<TimePicker Foreground="Black">
<TimePicker.Header>
<TextBlock Text="Header Text Example" Foreground="Black">
</TimePicker.Header>
</TimePicker>
or
<TimePicker Foreground="Black" Header="Header Text Example">
<TimePicker.HeaderTemplate>
<TextBlock Text="{Binding}" Foreground="Black">
</TimePicker.Header>
</TimePicker>

Did you tried overriding default brushes?
Like adding entry in App.xaml merged dictionaries:
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="ApplicationForegroundThemeBrush" Color="Magenta" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

editable Combobox text color not working corretly

I created a Combobox ControlTemplate for my application.
As a foundation I used the default template from the MS-Page.
I had only one problem with this template, it did not change the textcolor if the Combobox accepts inputs. To fix this, I added
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource Font_Color}" />
</ColorAnimationUsingKeyFrames>
where they set the style for the VisualState "Editable" of the Combobox it self. Now it works. But only as long as I don't disable the control and enable it again. If I do this, the color returns to its original default color, which is black and almost not visible on my inteface^^
So: What do I need to change so that the text returns to the color I gave it before the deactivation?
Here is my full xaml Code for the Combobox and sub-controls:
<ControlTemplate x:Key="DefaultComboboxTemplate" 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="{StaticResource Font_Color}" />
</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>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource Font_Color}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton x:Name="ToggleButton"
Template="{DynamicResource ComboBoxToggleButtonTemplate}"
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="Right">
</ContentPresenter>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{DynamicResource ComboBoxTextBoxTemplate}"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="3,3,23,3"
Focusable="True"
Background="{StaticResource BG_Brush}"
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"
BorderThickness="1" Margin="0,0,0,20" OpacityMask="{DynamicResource PopUp_Opacity}" Background="{DynamicResource PopUp_BG}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColor}" />
</Border.BorderBrush>
</Border>
<ScrollViewer Margin="4,6,4,20"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" HorizontalAlignment="Right"/>
</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="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
ToggleButton of Combobox
<ControlTemplate x:Key="ComboBoxToggleButtonTemplate"
TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledControlDarkColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).
(SolidColorBrush.Color)"
Storyboard.TargetName="Arrow">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledForegroundColor}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource DisabledBorderDarkColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Storyboard.TargetName="Border">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource ControlPressedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
<VisualState x:Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="{DynamicResource BG_Color}"
Offset="0" />
<GradientStop Color="{DynamicResource BG_Color_2}"
Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource BG_Color}" />
<GradientStop Color="{DynamicResource ControlMediumColor}"
Offset="1.0" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1" >
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColor}"/>
</Border.Background>
</Border>
<Path x:Name="Arrow"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" >
<Path.Fill>
<SolidColorBrush Color="{StaticResource Font_Color}"/>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
Textbox of Combobox:
<ControlTemplate x:Key="ComboBoxTextBoxTemplate"
TargetType="{x:Type TextBox}" >
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}"
/>
</ControlTemplate>
Default version of ComboboxItem
<ControlTemplate x:Key="DefaultComboboxItemTemplate" TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Border"
Padding="2"
SnapsToDevicePixels="true"
Background="{DynamicResource BG_Brush}" HorizontalAlignment="Right">
<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="{StaticResource SelectedBackgroundColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
Storyboard.TargetProperty="(Panel.Background).
(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0"
Value="{StaticResource SelectedUnfocusedColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>

Found it,
Adding
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Foreground" Value="{StaticResource Font_Brush}"/>
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="PART_EditableTextBox" Property="Foreground" Value="{StaticResource Font_Brush}"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
To the ControlTemplate for the DefaultCombobox under the Triggers Element fixed the Issue for me

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Create a mouse hover effect in buttons using XAML - c#

I am making a Windows 8 store app, and I want a HyperlinkButton that changes its color whenever it is clicked or mouse is hovered over it. Please provide me with its whole coding. I have looked everywhere, but none are working for my project. I am using Visual Studio Ultimate 2012.

Related

WPF: Styling radio buttons into a square

UWP VisualState - Modifying entire class (Button for example)

XamarinForm CarouselPage - UWP Slideshow

c# windows phone 8.1 change default controls color

editable Combobox text color not working corretly

Categories

Resources