This question already has an answer here:
Change ListBoxItem Background Color when mouse is over on the listBoxItem
(1 answer)
Closed 8 years ago.
I have a ListBox, and there are a few items. How can I change the Background of the ListBoxItem, when mouse hovers it? I tried with this code, but it returns error:
<Window.Resources>
<Style TargetType="ListBoxItem">
<Setter Property="Opacity" Value="0.6" />
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Trigger.Setters>
<Setter Property="Opacity" Value="1.0" />
</Trigger.Setters>
</Trigger>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background" To="Orange" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetProperty="Background" To="White" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
Use a ColorAnimation instead of DoubleAnimation:
<ColorAnimation Duration="0:0:0.3"
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
To="Orange" />
Related
I want to change the PivotHeaderItem Style of Pivot. So, I googled and found some code from some blog. But I didn't understand, how the modified PivotHeaderItem style is assigned to the Pivot.
They just put the PivotHeaderItem style in Page.Resources.
<Page.Resources>
<Style TargetType="PivotHeaderItem">
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Height" Value="48" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PivotHeaderItem">
<Grid x:Name="Grid" Margin="10,0" Background="{TemplateBinding Background}">
<Grid.Resources>
<Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="XamlAutoFontFamily" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontSize" Value="15" />
<Setter Property="TextWrapping" Value="Wrap" />
<Setter Property="LineStackingStrategy" Value="MaxHeight" />
<Setter Property="TextLineBounds" Value="Full" />
<Setter Property="OpticalMarginAlignment" Value="TrimSideBearings" />
</Style>
<Style x:Key="BodyContentPresenterStyle" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="FontWeight" Value="{ThemeResource PivotHeaderItemThemeFontWeight}" />
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
</Style>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Unselected" GeneratedDuration="0:0:0.33" To="UnselectedLocked" />
<VisualTransition From="UnselectedLocked" GeneratedDuration="0:0:0.33" To="Unselected" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenterTranslateTransform"
Storyboard.TargetProperty="X"
To="{ThemeResource PivotHeaderItemLockedTranslation}" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(UIElement.Opacity)"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="White" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedPressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
BorderBrush="Gray"
BorderThickness="2"
CornerRadius="20">
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontWeight="{TemplateBinding FontWeight}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Pivot x:Name="rootPivot" Title="PIVOT TITLE">
<PivotItem Header="Pivot Item 1">
<!-- Pivot content goes here -->
<TextBlock Text="Content of pivot item 1." />
</PivotItem>
<PivotItem Header="Pivot Item 2">
<!-- Pivot content goes here -->
<TextBlock Text="Content of pivot item 2." />
</PivotItem>
<PivotItem Header="Pivot Item 3">
<!-- Pivot content goes here -->
<TextBlock Text="Content of pivot item 3." />
</PivotItem>
</Pivot>
</Grid>
Any one explain, How the styles inside the <Page.Resources> is assigned to Pivot Element inside the grid automatically.
There are two ways to apply a style that is placed in the resource to
a control.
Implicitly. You just need to specify only a TargetType for the Style.
Explicitly. You need to specifying a TargetType and an x:Key attribute for the Style. After that, you also need to set the target control's Style property with a {StaticResource} markup extension. In the {StaticResource} markup extension, you could refer to the Style with the x:Key attribute you defined.
If a style contains the x:Key attribute, you can only apply it to a control by setting the Style property of the control to the keyed style. In contrast, when the xaml is compiled, a style without an x:Key attribute is automatically applied to every control of its target type unless that control has an explicit style setting.
Update:
To make the style only work for one Pivot control, you could put the style in the Pivot.Resources. Like the following code:
<Pivot x:Name="rootPivot" Title="PIVOT TITLE" >
<Pivot.Resources>
<Style TargetType="PivotHeaderItem">
......
......
</Pivot.Resources>
<PivotItem Header="Pivot Item 1" >
<!-- Pivot content goes here -->
<TextBlock Text="Content of pivot item 1." />
</PivotItem>
<PivotItem Header="Pivot Item 2">
<!-- Pivot content goes here -->
<TextBlock Text="Content of pivot item 2." />
</PivotItem>
<PivotItem Header="Pivot Item 3">
<!-- Pivot content goes here -->
<TextBlock Text="Content of pivot item 3." />
</PivotItem>
</Pivot>
I'm trying to create a button in XAML with a mouse over trigger that turns its 0 margin to 0,0,0,5 but recently found a problem when I left the cursor on the edge-most of the button. The start and end actions constantly gets triggered and I end up with a button going up and down infinitely.
Some additional info:
I'm using Visual Studio 2017
The project is WPF
I think I could fix this this in c# if I applied a boolean requirement for the exit action to run only if the enter action finishes or goes a digit above the default value. I'll do this in the meantime but if you guys have any xaml-specific solution I would very much appreciate it as I wanted to leave the animations to xaml as much as possible.
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="0"
To="0.4"
Duration="0:0:0.2"
Storyboard.TargetProperty="Effect.Opacity"/>
<ThicknessAnimation
From="0"
To="0,0,0,5"
Duration="0:0:0.2"
Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
From="0.4"
To="0"
Duration="0:0:0.2"
Storyboard.TargetProperty="Effect.Opacity"/>
<ThicknessAnimation
From="0,0,0,5"
To="0"
Duration="0:0:0.2"
Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
You need additional container and reserved space for shift.
wrap your animation Border with Transparent Grid
assign name to border
move animation triggers to ControlTemplate level
add extra margin for border, which will be used as free space to shift up
adjust From/To ThicknessAnimation properties to use reserved margin property
add Storyboard.TargetName="{Border}" for story board elements (where {Border} is actual border name)
Complete button example
<Button Width="100" Height="50">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="Transparent">
<Border x:Name="Border" BorderThickness="5" BorderBrush="Black" Margin="0,5,0,0" Background="Red">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="8" Color="#FFB0E9EF"/>
</Setter.Value>
</Setter>
</Style>
</Border.Style>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard >
<Storyboard>
<DoubleAnimation From="0" To="0.4" Duration="0:0:0.2" Storyboard.TargetName="Border"
Storyboard.TargetProperty="Effect.Opacity"/>
<ThicknessAnimation From="0,5,0,0" To="0,0,0,5" Duration="0:0:0.2" Storyboard.TargetName="Border"
Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation From="0.4" To="0" Duration="0:0:0.2" Storyboard.TargetName="Border"
Storyboard.TargetProperty="Effect.Opacity"/>
<ThicknessAnimation From="0,0,0,5" To="0,5,0,0" Duration="0:0:0.2" Storyboard.TargetName="Border"
Storyboard.TargetProperty="Margin"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
PivotItem Header font will not change. Property is set to Content. This font works in other areas of my app, but not the PivotItem Header.
<controls:Pivot Margin="0">
<controls:PivotItem Header="Welcome" FontFamily=".Fonts/sketch123.ttf#sketch123">
</controls:PivotItem>
Tried this before but it didnt work. I must've typed it wrong initially. This works:
<controls:PivotItem >
<controls:PivotItem.Header>
<TextBlock Text="welCome" FontFamily="Heart Breaking Bad" FontSize="80" Margin="24,20,20,0"/>
</controls:PivotItem.Header>
Add to ResourceDictionary (without primitives:) and edit as you like (for windows phone 8.1 store)
<x:Double x:Key="PivotHeaderItemFontSize">57</x:Double>
<x:Int32 x:Key="PivotHeaderItemCharacterSpacing">-25</x:Int32>
<FontFamily x:Key="PivotHeaderItemFontFamily">Segoe WP SemiLight</FontFamily>
<Thickness x:Key="PivotHeaderItemPadding">0,0,0,6.5</Thickness>
<Thickness x:Key="PivotHeaderItemMargin">16,-6.5,0,0</Thickness>
<Style TargetType="primitives:PivotHeaderItem">
<Setter Property="FontSize" Value="{ThemeResource PivotHeaderItemFontSize}" />
<Setter Property="FontFamily" Value="{ThemeResource PivotHeaderItemFontFamily}" />
<Setter Property="CharacterSpacing" Value="{ThemeResource PivotHeaderItemCharacterSpacing}" />
<Setter Property="Background" Value="{ThemeResource PivotHeaderBackgroundUnselectedBrush}" />
<Setter Property="Foreground" Value="{ThemeResource PivotHeaderForegroundUnselectedBrush}" />
<Setter Property="Margin" Value="{ThemeResource PivotHeaderItemMargin}" />
<Setter Property="Padding" Value="{ThemeResource PivotHeaderItemPadding}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:PivotHeaderItem">
<Grid x:Name="Grid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Unselected"
GeneratedDuration="0:0:0.33"
To="UnselectedLocked" />
<VisualTransition From="UnselectedLocked"
GeneratedDuration="0:0:0.33"
To="Unselected" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="UnselectedLocked">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenterTranslateTransform"
Storyboard.TargetProperty="X"
To="{ThemeResource PhonePivotLockedTranslation}" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="(UIElement.Opacity)"
To="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderForegroundSelectedBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Grid" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotHeaderBackgroundSelectedBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}">
<ContentPresenter.RenderTransform>
<TranslateTransform x:Name="ContentPresenterTranslateTransform" />
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
for Sirverlite
I am trying to create a GridSplitter which is mostly opaque, and then on mouseover, animates to become fully visible. Here's what I've tried:
Style:
<Style x:Key="SplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="Opacity" Value="0.2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridSplitter}">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
GridSplitter:
<GridSplitter
ResizeDirection="Columns"
Grid.Column="0"
Background="Red"
VerticalAlignment="Stretch"
Width="4"
Style="{StaticResource SplitterStyle}" />
I checked MSDN, and GridSplitter has all of the properties that I'm using, so it seems like it should be fine, but maybe I'm overlooking something obvious?
EDIT:
Is it possible to put a GridSplitter into another element? I changed my style to:
<Style x:Key="SplitterStyle" TargetType="{x:Type Border}">
<Setter Property="Opacity" Value="0.2" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
Then, I put the GridSplitter into a Border and applied the style to the border, instead:
<Border
Style="{StaticResource SplitterStyle}"
Background="{StaticResource WindowBorderBrush}"
VerticalAlignment="Stretch"
Width="4"
Grid.Column="0"
HorizontalAlignment="Right">
<GridSplitter ResizeDirection="Columns" Background="Red" ResizeBehavior="CurrentAndNext"/>
</Border>
The border works great! But now, the GridSplitter is nowhere to be found (the red background is no shown, the cursor doesn't change when I hover over the border, and there's nothing to drag to resize anything). Why is this?
EDIT:
OK, I found out that I have to specify a width for the GridSplitter. Also, I changed the background for the GridSplitter to transparent, because I was never planning on using red. Now, it displays and looks great, but it still doesn't actually resize anything :P How do I get it to actually be useful?
This is what I ended up with, which worked:
<Style x:Key="SplitterStyle" TargetType="{x:Type GridSplitter}">
<Setter Property="Opacity" Value="0.2" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
and
<GridSplitter
Background="{StaticResource WindowBorderBrush}"
VerticalAlignment="Stretch"
Width="4"
Grid.Column="0"
ResizeDirection="Columns"
Style="{StaticResource SplitterStyle}" />
I thought I tried exactly that at least once before even posting the first time, but I guess not. Anyway, it works great now.
I'm creating a Windows store app which requests the Dark theme by default. This is great apart from one of the pages needs to be white. I placed everything inside a grid and changed the background to white.. everything is working fine, apart from my navigation button is styled as:
<Button Foreground="Black" x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />
{StaticResource BackButtonStyle} returns a white button (due to my Apps Dark theme), so the back button is invisible against the white background.
How can I change the colour of this back button to black? i.e so it will show a black arrow inside a black circle.
I've tried creating my own style in StandardStyles.xaml without any joy:
<Style x:Key="PortraitBackButtonStyle" TargetType="Button" BasedOn="{StaticResource BackButtonStyle}">
<Setter Property="Margin" Value="26,0,26,36"/>
</Style>
Thanks!
Put this style in StandardStyles.xaml file and use it in your back button
<Color x:Key="Color1">#ffffff</Color>
<Color x:Key="Color2">#000000</Color>
<Color x:Key="Color3">#666666</Color>
<SolidColorBrush x:Key="MyBackButtonNormalBrush" Color="{StaticResource Color2}"/>
<SolidColorBrush x:Key="MyBackButtonBackgroundBrush" Color="{StaticResource Color1}"/>
<SolidColorBrush x:Key="MyBackButtonHoverBrush" Color="{StaticResource Color3}"/>
<Style x:Key="MyBackButtonStyle" TargetType="Button">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="Width" Value="48"/>
<Setter Property="Height" Value="48"/>
<Setter Property="Margin" Value="36,0,36,36"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="FontFamily" Value="Segoe UI Symbol"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="FontSize" Value="56"/>
<Setter Property="AutomationProperties.AutomationId" Value="BackButton"/>
<Setter Property="AutomationProperties.Name" Value="Back"/>
<Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="RootGrid">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyBackButtonHoverBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyBackButtonNormalBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyBackButtonNormalBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation
Storyboard.TargetName="ArrowGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0"/>
<DoubleAnimation
Storyboard.TargetName="NormalGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</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>
<Grid Margin="-1,-16,0,0">
<TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{StaticResource MyBackButtonBackgroundBrush}"/>
<TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{StaticResource MyBackButtonNormalBrush}"/>
<TextBlock x:Name="ArrowGlyph" Text="" Foreground="{StaticResource MyBackButtonBackgroundBrush}" Opacity="0"/>
</Grid>
<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>
if Your Background is white
You Can write at Back Button Property the Following Code :
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
RequestedTheme="Light"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
There is an obvious solution – to re-style controls. But you don't want to type style name every time you need to add control to UI. Also you usually use input controls on a dark background so you don’t even need two different styles. In this case a different approach can be used.
The solution:
First, open:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml
and search for "Dark" ResourceDictionary declaration. Copy all SolidColorBrush object definitions associated with buttonsa and finally paste all the brushes into your resource dictionary, and you can use it.
Source:: Mixing themes in XAML Metro apps
To apply Light theme/Dark theme(as per your requirement), just copy the following code into StandardStyles.xaml and do change the respective resoluce
1)For Light Theme
<SolidColorBrush x:Key="AppBarBackgroundThemeBrushLight" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="AppBarBorderThemeBrushLight" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="AppBarItemBackgroundThemeBrushLight" Color="Transparent" />
<SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrushLight" Color="#66000000" />
<SolidColorBrush x:Key="AppBarItemForegroundThemeBrushLight" Color="#FF000000" />
<SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrushLight" Color="#3D000000" />
<SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrushLight" Color="#FF000000" />
<SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrushLight" Color="#FFFFFFFF" />
For Dark Theme
<SolidColorBrush x:Key="AppBarBackgroundThemeBrushDark" Color="{StaticResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="AppBarBorderThemeBrushDark" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="AppBarItemBackgroundThemeBrushDark" Color="{StaticResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrushDark" Color="{StaticResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="AppBarItemForegroundThemeBrushDark" Color="{StaticResource SystemColorButtonTextColor}" />
<SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrushDark" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrushDark" Color="{StaticResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrushDark" Color="{StaticResource SystemColorButtonFaceColor}" />
and accordingly change
AppBarItemForegroundThemeBrush to AppBarItemForegroundThemeBrushLight/AppBarItemForegroundThemeBrushDark
refer these links for customising the App Bar
Here and Here
It'll help you.
Within the code you could change the style via code after the controls have been initialized.
Cheers
Mark