We Keep Coding

Why is my story board actions skipped when my trigger triggers

I have a Tabcontrol that I'm trying to add actions based on triggers.
Using Routed Events I can get my storyboard to trigger and the my actions respond as intended. Now I'm trying to prevent my storyboard actions from triggering for a specific tab header if that header is selected.
This has forced me to move away from routed events since I can't use a property condition and a routed event to determine if my storyboard will execute.
Fast forward and now I have finally been able to get IsMouseOver to respond as I wish to the mouse. (My background properties changes and changes back as the mouse enters and leaves the tabitem header. I'm almost there I think but as soon as I add the exact same storyboard as before my code decides to be lazy and skip it for some reason. The background setter is still being triggered but the storyboard remains silent.
I tried removing the setter but the storyboard still does not trigger.
End of the Day: I looking to set styles that transition nicely between each other for all possible combinations of Is Mouse Over and Is Selected.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Tenant_Tool_Analytics_Module.Resources.Components"
xmlns:controls="clr-namespace:Tenant_Tool_Analytics_Module.Resources.Components">
<Style TargetType="{x:Type controls:NavigationElement}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:NavigationElement}">
<Border BorderBrush="Black" BorderThickness=".7" x:Name="Bd">
<Grid Width="150" Height="50" Opacity="0.75" x:Name="NavigationElementGrid">
<Grid.Background >
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="2.0">
<GradientStop Color="#006A4D" Offset="1.0"/>
<GradientStop Color="#56be88" Offset=".2"/>
</RadialGradientBrush >
</Grid.Background>
<ContentControl Grid.Column="0" Content="{TemplateBinding Icon}"/>
<TextBlock x:Name="NavigationElementText" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left" Text="{TemplateBinding LabelText}" FontFamily="Futura XBlkIt BT" FontSize="12"/>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
</Grid.RowDefinitions>
</Grid>
</Border>
<!--
Trigger related to when the mouse is over the header
I would like it to Execute the doubleanimations
-->
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<!-- Missing condition: If selected = false -->
</MultiTrigger.Conditions>
<!-- Start BUG the bellow code does not execute -->
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="NavigationElementGrid" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="NavigationElementText" Storyboard.TargetProperty="FontSize" To="14" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<!-- End BUG -->
<!-- The triggers are fireing becuase this is being set. -->
<Setter Property="Background" TargetName="Bd" Value="Blue"/>
</MultiTrigger>
<!--
When the mouse leaves I want it to return to it's original
state.
-->
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="False"/>
<!-- Missing condition: If selected = false -->
</MultiTrigger.Conditions>
<!-- Start BUG the bellow code does not execute -->
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="NavigationElementGrid" Storyboard.TargetProperty="Opacity" To=".75" Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="NavigationElementText" Storyboard.TargetProperty="FontSize" To="12" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<!-- End BUG -->
<!-- The triggers are fireing becuase this is being set. -->
<Setter Property="Background" TargetName="Bd" Value="Red"/>
</MultiTrigger>
<!-- Missing two more MultiTriggers (very similar to above) for the cases of if the tab is selected.-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Code behind
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace Tenant_Tool_Analytics_Module.Resources.Components
{
public class NavigationElement : Control
{
public string LabelText
{
get
{
return (string)GetValue(LabelTextProperty);
}
set
{
SetValue(LabelTextProperty, value);
}
}
public static readonly DependencyProperty LabelTextProperty =
DependencyProperty.Register("LabelText", typeof(string), typeof(NavigationElement), new PropertyMetadata(string.Empty));
public object Icon
{
get
{
return (object)GetValue(IconProperty);
}
set
{
SetValue(IconProperty, value);
}
}
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(object), typeof(NavigationElement), new PropertyMetadata(string.Empty));
public System.Windows.Media.Brush BackgroundColour
{
get
{
return (System.Windows.Media.Brush)GetValue(BackgroundColourProperty);
}
set
{
SetValue(BackgroundColourProperty, value);
}
}
public static readonly DependencyProperty BackgroundColourProperty =
DependencyProperty.Register("BackgroundColour", typeof(System.Windows.Media.Brush), typeof(NavigationElement), new PropertyMetadata(Brushes.Black));
}
}
Implementation code
<Window x:Class="Tenant_Tool_Analytics_Module.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Tenant_Tool_Analytics_Module"
xmlns:views="clr-namespace:Tenant_Tool_Analytics_Module.Views"
xmlns:controls="clr-namespace:Tenant_Tool_Analytics_Module.Resources.Components"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<DockPanel LastChildFill="True">
<views:HeaderView x:Name="HeaderView" DockPanel.Dock="Top"/>
<TabControl DockPanel.Dock="Left" TabStripPlacement="Left" Margin="0, 0, 0, 10">
<TabItem Padding="0">
<TabItem.Header>
<controls:NavigationElement LabelText="Stacking Plan" Icon="{StaticResource StackPlanIcon}"/>
</TabItem.Header>
<Button Content="HI"/>
</TabItem>
<TabItem Padding="0">
<TabItem.Header>
<controls:NavigationElement LabelText="Tenant Profile" Icon="{StaticResource TenantProfileIcon}"/>
</TabItem.Header>
<Button Content="HI"/>
</TabItem>
<TabItem Padding="0">
<TabItem.Header>
<controls:NavigationElement LabelText="Submarket" Icon="{StaticResource SubmarketIcon}"/>
</TabItem.Header>
<Button Content="HI"/>
</TabItem>
<TabItem Padding="0">
<TabItem.Header>
<controls:NavigationElement LabelText="Industry" Icon="{StaticResource IndustryIcon}"/>
</TabItem.Header>
<Button Content="HI"/>
</TabItem>
</TabControl>
</DockPanel>
</Window>

I think you weren't aware of the fact that MultiDataTrigger objects have both EnterActions and ExitActions. Instead of having one MultiDataTrigger triggering on true with only EnterActions and another MultiDataTrigger triggering on false with only EnterActions, you can use only one MultiDataTrigger triggering on true with both EnterActions (to change the object to an abnormal state) and ExitActions to transition it back to its normal state.
The Triggers collection now works as expected and becomes, as a bonus, easier to read:
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<!-- Missing condition: If selected = false -->
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="NavigationElementGrid"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="NavigationElementText"
Storyboard.TargetProperty="FontSize"
To="14" Duration="0:0:0.3"/>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BorderBackgroundBrush"
Storyboard.TargetProperty="Color">
<DiscreteColorKeyFrame KeyTime="0" Value="Blue"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="NavigationElementGrid"
Storyboard.TargetProperty="Opacity"
To=".75"
Duration="0:0:0.3"/>
<DoubleAnimation Storyboard.TargetName="NavigationElementText"
Storyboard.TargetProperty="FontSize"
To="12"
Duration="0:0:0.3"/>
<ColorAnimationUsingKeyFrames Storyboard.TargetName="BorderBackgroundBrush"
Storyboard.TargetProperty="Color">
<DiscreteColorKeyFrame KeyTime="0" Value="Red"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
<!-- Missing two more MultiTriggers (very similar to above) for the cases of if the tab is selected.-->
</ControlTemplate.Triggers>
Also notice how I've used a ColorAnimationUsingKeyFrames to change the Border.Background property without needing a Setter in another Trigger. This way, all changes are performed in the same Storyboard. For this to work, you just need to assign a named SolidColorBrush to your "Bd" Border:
<Border.Background>
<SolidColorBrush x:Name="BorderBackgroundBrush" Color="Red"></SolidColorBrush>
</Border.Background>
To prevent the Storyboard to play if the ancestor TabItem is selected, I suggest you add a boolean IsSelected DependencyProperty to your NavigationElement, so that you can bind this property to its TabItem ancestor by adding a Setter in your Style like this:
<Setter Property="IsSelected" Value="{Binding IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=TabItem}}"/>
And you just have to add the condition in your MultiDataTrigger (but you already figured that out):
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsSelected" Value="False"/>
Sidenote: I recommend you wrap and indent your XAML attributes to avoid long XAML lines that force you to scroll. Besides the increased readability, having each XAML attribute on a new line is more version control-friendly because one attribute change only impacts one line.

Proper way to add an AutoSuggestBox to Hamburger Navigation?

I'm just starting to learn UWP and xaml. What is the proper way to add a AutoSuggestBox to the Side Navigation panel? (Sorry for the bad code formatting in advance, copy and paste wasn't great)
My Main.xaml has an AutoSuggestArea that I have set to Visible
</VisualStateGroup>
<VisualStateGroup x:Name="AutoSuggestGroup">
<VisualState x:Name="AutoSuggestBoxVisible"/>
<VisualState x:Name="AutoSuggestBoxCollapsed">
<VisualState.Setters>
<Setter Target="AutoSuggestArea.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
and in the Grid for the AutoSuggestArea I have defined an AutoSuggestBox
<Grid x:Name="AutoSuggestArea" Height="44" Grid.Row="3" VerticalAlignment="Center">
<ContentControl x:Name="PaneAutoSuggestBoxPresenter" Content="{TemplateBinding AutoSuggestBox}" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="16,0,16,0" VerticalContentAlignment="Center"/>
<Button x:Name="PaneAutoSuggestButton" Content="" MinHeight="44" Style="{TemplateBinding PaneToggleButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>
<AutoSuggestBox Width="234" VerticalAlignment="Center"
HorizontalAlignment="Center"
PlaceholderText="Search" Name ="boxS"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
TextChanged="AutoSuggestBox_TextChanged">
<AutoSuggestBox.TextBoxStyle>
<Style TargetType="TextBox">
<Setter Property="IsHandwritingViewEnabled" Value="False"/>
<Setter Property="BorderThickness" Value="0"/>
</Style>
</AutoSuggestBox.TextBoxStyle>
<AutoSuggestBox.QueryIcon>
<SymbolIcon Symbol="Find" Foreground="Black">
<SymbolIcon.RenderTransform>
<CompositeTransform ScaleX="1" ScaleY="1"/>
</SymbolIcon.RenderTransform>
</SymbolIcon>
</AutoSuggestBox.QueryIcon>
</AutoSuggestBox>
</Grid>
What I want is basically Identical Behaviour as the Groove Music app on Windows, where the Search bar disappears as the Nav View is closed or Minimized.
Instead I get this

I am assuming you meant NavigationView by NavigationPanel.
This is not how you put an AutoSuggestBox in NavigationView. NavigationView has an NavigationView.AutoSuggestBox property. You just set an AutoSuggestBox on this property, and every thing will work as expected. Like this:
<NavigationView>
<NavigationView.AutoSuggestBox>
<AutoSuggestBox x:Name="NavViewSearchBox" QueryIcon="Find"/>
</NavigationView.AutoSuggestBox>
</NavigationVew>
You don't have to hide/show this AutoSuggestBox yourself. NavigationView will automatically do this for you. Also, you don't have to put thie AutoSuggestBox inside any grid or anything.

how to make background color animate to new color and back without losing track of original color?

So I am trying to create a simple animation that takes the background from the initial color to the new color and back.
The original issue I had is that I created a trigger on the MouseDownEvent that triggered the animation, but the user could trigger another animation before the first one finished. This new animation would animate from the current shade it was at to the new color and back. By progressively restarting the animation while the animation is going, the original color is lost.
The easiest way to solve this is probably if i use the completed event for the animation. However, I don't like this solution because I want my animations to be in a custom style in resource dictionary and not part of the control itself. If the animation is in a custom style in a resource dictionary, then it won't have access to the code behind of the control itself. Is there a good way to get an animation working while maintaining separation between the style and the control?
I then had a different idea. The error is caused because I was animating from the border.background.color to a new color and back, thus if i started a new animation while the old one was going, the new animation started from whatever color value the prior animation was in. But if I set the animation to go back to some saved property value of the original background color then I won't have the issue even if the user restarts the animation.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Components="clr-namespace:DaedalusGraphViewer.Components"
xmlns:Converters="clr-namespace:DaedalusGraphViewer.Components.Converters"
>
<Converters:ThicknessToLeftThicknessConverter x:Key="ThicknessToLeftThicknessConverter" />
<Style x:Key="SearchBoxListViewItemStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type Components:SearchBox}" TargetType="{x:Type Components:SearchBox}">
<Style.Resources>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Components:SearchBox}">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="LayoutGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ScrollViewer
x:Name="PART_ContentHost"
Grid.Column="0"
VerticalAlignment="Center"
/>
<Label
x:Name="DefaultTextLabel"
Grid.Column="0"
Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextColor}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=LabelText}"
VerticalAlignment="Center"
FontStyle="Italic"
/>
<Popup x:Name="RecentSearchesPopup"
IsOpen="False"
>
<ListView
x:Name="PreviousSearchesListView"
ListView.ItemContainerStyle="{StaticResource SearchBoxListViewItemStyle}"
>
</ListView>
</Popup>
<Border
x:Name="PreviousSearchesBorder"
Grid.Column="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="LightGray"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness,
Converter={StaticResource ThicknessToLeftThicknessConverter}}"
>
<Image
x:Name="PreviousSearchesIcon"
ToolTip="Previous Searches"
Width="15"
Height="15"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="pack://application:,,,/DaedalusGraphViewer;component/Images/Previous.png"
/>
</Border>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="HasText" Value="True">
<Setter Property="Visibility" TargetName="DefaultTextLabel" Value="Hidden" />
</Trigger>
<Trigger
SourceName="DefaultTextLabel"
Property="IsMouseOver"
Value="True"
>
<Setter Property="Cursor" Value="IBeam" />
</Trigger>
<!--<EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="PreviousSearchesBorder">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
AutoReverse="True"
Duration="0:0:0.2"
Storyboard.TargetName="PreviousSearchesBorder"
Storyboard.TargetProperty="(Border.Background).Color"
To="Black"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>-->
<Trigger Property="IsPopupOpening" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="PreviousSearchesBorder"
Storyboard.TargetProperty="(Border.Background).Color"
>
<LinearColorKeyFrame KeyTime="0:0:0.0" Value="{x:Static Components:SearchBox.DefaultRecentSearchesButtonColor}" />
<LinearColorKeyFrame KeyTime="0:0:0.2" Value="Black" />
<LinearColorKeyFrame KeyTime="0:0:0.4" Value="{x:Static Components:SearchBox.DefaultRecentSearchesButtonColor}" />
</ColorAnimationUsingKeyFrames>
<!--<ColorAnimation
AutoReverse="True"
Duration="0:0:0.2"
Storyboard.TargetName="PreviousSearchesBorder"
Storyboard.TargetProperty="(Border.Background).Color"
To="Black"
/>-->
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
However, in order to do this I need to store the original background property and I have yet to get that working. I cannot using binding because properties in Animations must be freezeable, so I tried creating a static property on the control that gets set to the original value on the control's loaded event.
I set the color to the background color in the code behind, but the style does not reflect that property.
Is my static reference in the xaml correct? if so, then isn't onapplytemplate when the style should load the color from the static reference?

Well, you can't use a DynamicResource without getting a Freeze error.
What if you loaded the Xaml file at runtime and added the StaticResource to the Xaml file?
Here is an example. (I use some quick and dirty parsing of the Xaml file, but it works for the proof of concept.)
Change the properties of the StoryBoardResourceDictionary.xaml to Content and Copy if newer and remove the MSBuild:Compile setting.
StoryBoardResourceDictionary.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="WindowWithTrigger" TargetType="Window">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseDown">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" >
<EasingColorKeyFrame KeyTime="0:0:2" Value="White"/>
<!-- OriginalBackground is added at runtime -->
<EasingColorKeyFrame KeyTime="0:0:4" Value="{StaticResource OriginalBackground}"/> <!-- Load at runtime -->
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
MainWindow.xaml
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="BackgroundAnimationBlend.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480"
Style="{DynamicResource WindowWithTrigger}"
Background="DarkBlue"> <!--Change background to whatever color you want -->
</Window>
MainWindow.xaml.cs
using System.IO;
using System.Text;
using System.Windows;
using System.Windows.Markup;
namespace BackgroundAnimationBlend
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var rd2 = LoadFromFile();
this.Resources.MergedDictionaries.Add(rd2);
}
public ResourceDictionary LoadFromFile()
{
const string file = "Styles/StoryBoardResourceDictionary.xaml";
if (!File.Exists(file))
return null;
using (var fs = new StreamReader(file))
{
string xaml = string.Empty;
string line;
bool replaced = false;
while ((line = fs.ReadLine()) != null)
{
if (!replaced)
{
if (line.Contains("OriginalBackground"))
{
xaml += string.Format("<Color x:Key=\"OriginalBackground\">{0}</Color>", Background);
replaced = true;
continue;
}
}
xaml += line;
}
// Read in an EnhancedResourceDictionary File or preferably an GlobalizationResourceDictionary file
return XamlReader.Load(new MemoryStream(Encoding.UTF8.GetBytes(xaml))) as ResourceDictionary;
}
}
}
}
I have no idea how to scale this right now. So maybe it is a crazy idea. But loading the style at runtime and injecting the current background as a xaml string into the style before loading it is the only idea I had that worked.

I have made a small example to illustrate how you can solve your problem (by what i have understood).
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Color x:Key="background">yellow</Color>
<SolidColorBrush x:Key="backgroundBrush" Color="{StaticResource background}"/>
<Storyboard x:Key="Storyboard1">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
<SplineColorKeyFrame KeyTime="0:0:0.3" Value="Black"/>
<SplineColorKeyFrame KeyTime="0:0:0.6" Value="{StaticResource background}"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="grid" Background="{StaticResource backgroundBrush}">
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.5,0.5">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard Storyboard="{StaticResource Storyboard1}" Name="Storyboard1"/>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
I have defined a Color background as StaticResource to use it as Background-Color for the Grid and as Value for the Animation.
In the example above the Grid has a yellow background, that gets animated to black and then back to yellow when the button is clicked.

So all I ended up doing was using FillBehavior = Stop. I was new to animations so I didn't know how to prevent the reactivation of the animation easily without access to the completed event (which would have to be attached in the control, thus defeating the purpose of having a style with animations in a separate resource file). Regardless, I'm giving the bounty to rhyous because his answer actually does solve my problem as well, though in a more difficult manner. I knew that what i wanted to do had to be simple because there was no way that no one had wanted to animate a color and back from a style, yet I couldn't find any Stack Overflow questions on the issue

Simple way to change appearance of a TextBlock on hover?

I'm making a zoom control (Slider) with a TextBlock indicator that tells you want the current scale factor is (kinda like in the bottom-right corner of Word).
I'm a couple days into learning WPF, and I've been able to figure out how to do most of it, but I get the sense there's a much simpler way (one which, perhaps, only involves XAML-side code rather than a bunch of mouse events being captures.
I'd like for a the text to be underlined when hovered over (to imply clickability) and for a click to reset the slider element to 1.0.
Here's what I have:
<StatusBarItem Grid.Column="1" HorizontalAlignment="Right">
<Slider x:Name="mapCanvasScaleSlider" Width="150" Value="1" Orientation="Horizontal" HorizontalAlignment="Left"
IsSnapToTickEnabled="True" Minimum="0.25" Maximum="4" TickPlacement="BottomRight"
Ticks="0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4"/>
</StatusBarItem>
<StatusBarItem Grid.Column="2">
<TextBlock Name="zoomIndicator" Text="{Binding ElementName=mapCanvasScaleSlider,Path=Value,StringFormat=0%}"
MouseDown="ResetZoomWindow" MouseEnter="zoomIndicator_MouseEnter" MouseLeave="zoomIndicator_MouseLeave"
ToolTip="Zoom level; click to reset"/>
</StatusBarItem>
private void ResetZoomWindow(object sender, MouseButtonEventArgs args)
{
mapCanvasScaleSlider.Value = 1.0;
}
private void zoomIndicator_MouseLeave(object sender, MouseEventArgs e)
{
zoomIndicator.TextDecorations = TextDecorations.Underline;
}
private void zoomIndicator_MouseLeave(object sender, MouseEventArgs e)
{
zoomIndicator.TextDecorations = null;
}
I feel as though there's a better way to do this through XAML rather than to have three separate .cs-side functions.

You could use a style trigger for the text block, like described in this other post How to set MouseOver event/trigger for border in XAML?
Working solution:
<StatusBarItem Grid.Column="2">
<TextBlock Name="zoomIndicator" Text="{Binding ElementName=mapCanvasScaleSlider,Path=Value,StringFormat=0%}"
MouseDown="ResetZoomWindow" ToolTip="Zoom level; click to reset">
<TextBlock.Style>
<Style>
<Setter Property="TextBlock.TextDecorations" Value="" />
<Style.Triggers>
<Trigger Property="TextBlock.IsMouseOver" Value="True">
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StatusBarItem>
Still have to reset the zoom level manually (I think), though.

You can use VisualState (if you're using Blend its easy to edit).
Personally I prefer style triggers, unless I have to add StoryBoard animation - then I offen use VisualState
about VisualState

Typically, you wouldn't want to use a TextBlock as a button (although of course you can). You may want to consider using a more appropriate control like Button or HyperlinkButton, which have the basic mouse event handling already wired up. You can then apply whatever styles you like. A Button control, for example, can be easily styled re-templated as a TextBlock with underline on mouse-over:
<Style TargetType="Button" x:Key="LinkButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard Duration="0:0:0.1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="content" Storyboard.TargetProperty="TextDecorations">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TextDecorationCollection>Underline</TextDecorationCollection>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="content" Text="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Use it by referencing the style key:
<Button Content="click" Style="{StaticResource LinkButtonStyle}" />
Using this approach (rather than the alternative of adding triggers to a TextBlock) brings some advantages, which are built in to the Button control.
You can apply styles to compound states like Pressed
You can use the Click event, and its related Command property

Creating tabs in WinRT

I'm working on a C#/XAML Metro style app for Windows 8. The XAML in WinRT does not have a "tab" control. However, I'm trying to emulate the way a result in the Windows 8 store looks. For instance, this image shows "Overview", "Details", and "Reviews" tabs:
How do I create these?
A RadioButton seems to make sense. I figured I could use the GroupName to ensure only one item is selected. But if I use a RadioButton, I don't know how to make the selected item look dark gray while makig the other options light gray. Can someone show me the XAML of a RadioButton that does not show the little checked thingy? And also is dark gray when selected and light gray when not selected.
Thank you so much!

Here is the style to use for radio buttons to make them look/work like tabs:
<!-- Style for radio buttons used as tab control -->
<Style x:Key="TabRadioButtonStyle" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked">
<Storyboard>
<ColorAnimation Duration="0" To="Gray" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
</Storyboard>
</VisualState>
<VisualState x:Name="Indeterminate">
<Storyboard>
<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation Duration="0" To="Black" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="TabButtonText" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="TabButtonText" Text="{TemplateBinding Content}" Style="{StaticResource GroupHeaderTextStyle}" HorizontalAlignment="Left"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You can then define a grid to hold the tab stack panel and a frame to hold the content associated with each tab. Use Click event on the radio buttons to navigate the frame to the appropriate pages for each "tab".
<Grid Grid.Row="1"
Margin="120,0,56,56">
<!-- Row 1 to hold the "Tabs", Row 2 to hold the content -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Orientation="Horizontal">
<RadioButton x:Name="Tab1" Content="Tab1" Style="{StaticResource TabRadioButtonStyle}" IsChecked="True" Click="Tab1_Clicked" />
<RadioButton x:Name="Tab2" Content="Tab2" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab2_Clicked" Margin="30,0,0,0" />
<RadioButton x:Name="Tab3" Content="Tab3" Style="{StaticResource TabRadioButtonStyle}" IsChecked="False" Click="Tab3_Clicked" Margin="30,0,0,0"/>
</StackPanel>
<Frame x:Name="ContentFrame" Margin="0,20,0,0" Grid.Row="1" Background="{StaticResource SandstormBackgroundBrush}" Loaded="ContentFrame_Loaded" />
</Grid>

Styling a ListBox is preferable to styling a radio button group.
The following code uses a ListBox with a horizontal stack panel to create the tab item header. A ContentControl displays the tab content as a user control.
I've only tested this with WPF, but hopefully it will work on WinRT.
<Page.Resources>
<Style TargetType="ListBoxItem">
<!-- disable default selection highlight -->
<!-- Style.Resources is not supported in WinRT -->
<!--<Style.Resources>
--><!-- SelectedItem with focus --><!--
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
--><!-- SelectedItem without focus --><!--
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
</Style.Resources>-->
<!--Setter Property="FocusVisualStyle" is not supported in WinRT -->
<!--<Setter Property="FocusVisualStyle" Value="{x:Null}" />-->
</Style>
<Style x:Key="TitleStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="LightGray"/>
<!--Style.Triggers is not supported in WinRT-->
<!--<Style.Triggers>
<DataTrigger Value="True" Binding="{Binding Path=IsSelected,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}}}">
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="FontWeight" Value="Bold"/>
</DataTrigger>
</Style.Triggers>-->
</Style>
</Page.Resources>
<Grid>
<Grid.DataContext>
<ViewModel:TestPage/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListBox x:Name="tabListBox" Grid.Row="0" ItemsSource="{Binding Items}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
BorderBrush="{x:Null}" BorderThickness="0">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Margin="5"
Style="{StaticResource TitleStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<ContentControl Grid.Row="1" Content="{Binding SelectedItem.Content}"/>
</Grid>
View model
public class MyTabViewModel : INotifyPropertyChanged
{
public MyTabViewModel()
{
Items =
new List<MyTabItem>
{
new MyTabItem
{
Title = "Overview",
Content = new UserControl1()
},
new MyTabItem
{
Title = "Detail",
Content = new UserControl2()
},
new MyTabItem
{
Title = "Reviews",
Content = new UserControl3()
},
};
}
public IEnumerable<MyTabItem> Items { get; private set; }
private MyTabItem _selectedItem;
public MyTabItem SelectedItem
{
get { return _selectedItem; }
set
{
_selectedItem = value;
PropertyChanged(this, new PropertyChangedEventArgs("SelectedItem"));
}
}
#region Implementation of INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
public class MyTabItem
{
public string Title { get; set; }
public UserControl Content { get; set; }
}

The FlipView control might meet your needs. Sample.

I used FlipView control as well, but I created a separate templated control which is inherited from FlipView.
The main idea is to override default FlipView ControlTemplate: I added a ListBox which represents tab headers and removed "Next" and "Previous" FlipView buttons.
I can share source code if you need more details about my implementation.