Windows 8 XAML Solution for Switching the Control's Visibility When You Hover over Another Control

Question

I am working on a project and need help finding a solution for Windows 8 XAML to switch the control's visibility when you hover over another control. The control can be a button or any Windows8 control, and the code must be in XAML, because all my logic is in XAML. I have tried many XAML solutions, but I probably have something missing. In my first attempt, I wrote an event trigger, but the string cannot be converted to visibility, so the following code will work when executed.

Can anyone or any expert from Microsoft please help me with this. I really appreciate your help. I am looking for a solution that does not require code in the code, it should be the full XAML code.

<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Margin="5" x:Name="btn1">Button 1</Button> <Button Margin="5" x:Name="btn2"> <Button.Triggers> <EventTrigger RoutedEvent="Button.GotFocus"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="btn1" Storyboard.TargetProperty="Button.Visibility" To="Collapsed" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="Button.LostFocus"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="btn1" Storyboard.TargetProperty="Button.Visibility" To="Visible" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> Button 2 </Button> <Button Margin="5" x:Name="btn3">Button 3</Button> </StackPanel> </Page> 

Answer 1

You do not control visibility with DoubleAnimation, since visibility is not double. You should use ObjectAnimationUsingKeyFrames:

 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="btn1"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> 

I also suggest using behavior and visual states to make your XAML more designer-friendly.

Answer 2

If you just want to flip Visibility , you can just use the binding to the IsPointerOver property:

 <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <StackPanel.Resources> <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/> </StackPanel.Resources> <Button Margin="5" x:Name="btn1">Button 1</Button> <Button Margin="5" x:Name="btn2" Visibility="{Binding ElementName=btn1, Path=IsPointerOver, Converter={StaticResource BooleanToVisibilityConverter}}"> Button 2 </Button> </StackPanel> 

You need to add the code for the BooleanToVisibilityConverter , since it is not built-in, as in WPF.

Answer 3

I'm not sure if you can use EventTrigger with RoutedEvent.May would be helpful

  <Page.Resources> <Style x:Key="TagAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border x:Name="AppButton" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"> <Storyboard> <Storyboard> <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="tbName" /> </Storyboard> </Storyboard> </VisualState> <VisualState x:Name="PointerOver"> <Storyboard> <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="tbName" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid Width="100"> <Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="Transparent"/> <TextBlock Text="Button 2" x:Name="tbName" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </Page.Resources> <Grid> <StackPanel Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Margin="5" x:Name="btn1" Content="Button 1" /> <Button Margin="5" x:Name="btn2" Style="{StaticResource TagAppBarButtonStyle}" /> <Button Margin="5" x:Name="btn3" Content="Button 3" /> </StackPanel> </Grid> 

Answer 4

WinRT XAML Tool

It has many built-in converters within the framework, including the BooleanToVisibilityConverter.