locked
Anybody knows what is wrong with this example? RRS feed

  • General discussion

  • <Window
     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" mc:Ignorable="d"
     x:Class="WpfApplication4.MainWindow"
     x:Name="Window"
     Title="MainWindow"
     Width="640" Height="480"> 
       <Window.Resources>
      <Storyboard x:Key="HomeClick">
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderHome">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
       </ObjectAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderHome">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderAbout">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderAbout">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Key="AboutClick">
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderAbout">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
       </ObjectAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderAbout">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
       </DoubleAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderHome">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderHome">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>
      </Storyboard>
      <Storyboard x:Key="GeezClick">
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderGeez">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Visible}"/>
       </ObjectAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderGeez">
        <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
       </DoubleAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BorderGeez">
        <EasingColorKeyFrame KeyTime="0" Value="#FFAB0000"/>
        <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF0D1218"/>
       </ColorAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BorderGeez">
        <EasingColorKeyFrame KeyTime="0" Value="#FF560000"/>
        <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF230303"/>
       </ColorAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderAbout">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BorderGeez">
        <EasingColorKeyFrame KeyTime="0" Value="#FF0D1218"/>
       </ColorAnimationUsingKeyFrames>
       <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BorderGeez">
        <EasingColorKeyFrame KeyTime="0" Value="#FF230303"/>
       </ColorAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="label">
        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
       </ObjectAnimationUsingKeyFrames>
       <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="label">
        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
       </DoubleAnimationUsingKeyFrames>
      </Storyboard>
     </Window.Resources>
     <Window.Triggers>
      <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnHome">
       <BeginStoryboard Storyboard="{StaticResource HomeClick}"/>
      </EventTrigger>
      <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnAbout">
       <BeginStoryboard x:Name="AboutClick_BeginStoryboard" Storyboard="{StaticResource AboutClick}"/>
      </EventTrigger>
      <EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnGeez">
       <BeginStoryboard Storyboard="{StaticResource GeezClick}"/>
      </EventTrigger>
     </Window.Triggers>
     <Grid>
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="0.532*"/>
       <ColumnDefinition Width="0.468*"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <StackPanel x:Name="stackPanel" HorizontalAlignment="Left" Orientation="Horizontal" >
       <Button x:Name="BtnHome" Content="Home"/>
       <Button x:Name="BtnAbout" Content="About"/>
       <Button x:Name="BtnGeez" Content="Geez" Margin="0,0,0,0.96" Width="38.334" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
         <TransformGroup>
          <ScaleTransform/>
          <SkewTransform/>
          <RotateTransform/>
          <TranslateTransform/>
         </TransformGroup>
        </Button.RenderTransform>
       </Button>
      </StackPanel>
      <Border x:Name="BorderHome" Grid.Row="1" CornerRadius="10" Margin="10" Visibility="Collapsed" Opacity="0" Grid.ColumnSpan="2" >
       <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="#FFAB0000" Offset="0"/>
         <GradientStop Color="#FF560000" Offset="1"/>
        </LinearGradientBrush>
       </Border.Background>
       <Label x:Name="label" Content="Home Panel" Foreground="White"/>
      </Border>
      <Border x:Name="BorderAbout" Grid.Row="1" CornerRadius="10" Margin="10" Opacity="0" Grid.ColumnSpan="2" >
       <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="#FF0051AB" Offset="0"/>
         <GradientStop Color="#FF000556" Offset="1"/>
        </LinearGradientBrush>
       </Border.Background>
       <Label Content="About Panel" Foreground="White"/>
      </Border>
      <Border x:Name="BorderGeez" Grid.Row="1" CornerRadius="10" Margin="10" Visibility="Collapsed" Opacity="0" Grid.ColumnSpan="2" >
       <Border.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
         <GradientStop Color="#FFAB0000" Offset="0"/>
         <GradientStop Color="#FF560000" Offset="1"/>
        </LinearGradientBrush>
       </Border.Background>
       <Label x:Name="___Label___Geez_Panel_" Content="Geez Panel" Foreground="White"/>
      </Border>
     </Grid>
    </Window>

    If I press the 'Geez' Button, and then press the 'Home' Button it doesn't displays the information, I think that solving this solves the issue regarding my previous posts, still I don't know, how does one navigate without problems using triggers? How does one actully navigates in Blend triggering animated user controls?

    Thank you.

    Monday, February 21, 2011 7:17 PM

All replies

  • Help please.
    Monday, February 21, 2011 7:33 PM
  • The HomeClick storyboard doesn't have any animations to set the home information to visible.  What is happening, is GeezClick is setting it to invisible, but nothing ever sets it back to visible.  While recording is on for HomeClick, you can set visibility to collapsed and back to visible.  You should see it make a keyframe in the timeline.  Do the same thing for opacity to make a keyframe there too: 0%, then 100%.
    Monday, February 21, 2011 7:37 PM
  • I still don't know how to do it, Blend is giving me a headache

    I have set the properties as the should, what i just did is to change the layers order and then it kind of works, depending which combination of buttons I press, i don't know

    If someone can give me an example of navigation using a minimun of three buttons that work so i can see where it's supposed to be collapsed and where visible i will appreciate it.

    I know it's probably my fault and not Blend's no need to tell is just that this is so frustating, i alreadt read a book on Blend I know what behaviours are, but i can't seem to make something as simple as triggering storyboards to work whenever i press certain button. Again all i want to do is simple navigation that triggers an animation with certain content when a button is pressed. How in the name of GOD do i do this on Microsoft Expression Blend? It doesn't seem to work the way it should...(triggering the storyboards exactly as they are) instead it mixes pieces of storyboards or just triggers right if given certain sequency...otherwise t gets messed up, again, i am using the behaviour 'control storyboard action'.

    Monday, February 21, 2011 10:30 PM
  • This is the original example given to me by Leon.
    
    
    <Window
    	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" mc:Ignorable="d"
    	x:Class="WpfApplication3.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<Storyboard x:Key="HomeClick">
    			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderHome">
    				<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
    			</ObjectAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderHome">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderAbout">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderAbout">
    				<DiscreteObjectKeyFrame KeyTime="0:0:0.3" Value="{x:Static Visibility.Collapsed}"/>
    			</ObjectAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="AboutClick">
    			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderAbout">
    				<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}"/>
    			</ObjectAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderAbout">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="BorderHome">
    				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="BorderHome">
    				<DiscreteObjectKeyFrame KeyTime="0:0:0.5" Value="{x:Static Visibility.Collapsed}"/>
    			</ObjectAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnHome">
    			<BeginStoryboard Storyboard="{StaticResource HomeClick}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="BtnAbout">
    			<BeginStoryboard x:Name="AboutClick_BeginStoryboard" Storyboard="{StaticResource AboutClick}"/>
    		</EventTrigger>
    	</Window.Triggers>
    	<Grid>
    		<Grid.RowDefinitions>
    			<RowDefinition Height="Auto"/>
    			<RowDefinition Height="*"/>
    		</Grid.RowDefinitions>
    		<StackPanel HorizontalAlignment="Left" Orientation="Horizontal" >
    			<Button x:Name="BtnHome" Content="Home"/>
    			<Button x:Name="BtnAbout" Content="About"/>
    		</StackPanel>
    		<Border x:Name="BorderHome" Grid.Row="1" CornerRadius="10" Margin="10" Visibility="Collapsed" Opacity="0" >
    			<Border.Background>
    				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    					<GradientStop Color="#FFAB0000" Offset="0"/>
    					<GradientStop Color="#FF560000" Offset="1"/>
    				</LinearGradientBrush>
    			</Border.Background>
    			<Label Content="Home Panel" Foreground="White"/>
    		</Border>
    		<Border x:Name="BorderAbout" Grid.Row="1" CornerRadius="10" Margin="10" Visibility="Collapsed" Opacity="0" >
    			<Border.Background>
    				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    					<GradientStop Color="#FF0051AB" Offset="0"/>
    					<GradientStop Color="#FF000556" Offset="1"/>
    				</LinearGradientBrush>
    			</Border.Background>
    			<Label Content="About Panel" Foreground="White"/>
    		</Border>
    	</Grid>
    </Window>
    
    Monday, February 21, 2011 10:36 PM
  • <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="WpfApplication4.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    	<Window.Resources>
    		<Storyboard x:Key="GoToRed">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="redtxt">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="greentxt">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bluetxt">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="GoToBlue">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="redtxt">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="greentxt">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bluetxt">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    		<Storyboard x:Key="GoToGreen">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="redtxt">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="greentxt">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="bluetxt">
    				<EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    	<Window.Triggers>
    		<EventTrigger RoutedEvent="FrameworkElement.Loaded"/>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button">
    			<BeginStoryboard x:Name="GoToRed_BeginStoryboard" Storyboard="{StaticResource GoToRed}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button1">
    			<BeginStoryboard x:Name="GoToGreen_BeginStoryboard1" Storyboard="{StaticResource GoToGreen}"/>
    		</EventTrigger>
    		<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="button2">
    			<BeginStoryboard x:Name="GoToBlue_BeginStoryboard1" Storyboard="{StaticResource GoToBlue}"/>
    		</EventTrigger>
    	</Window.Triggers>
    
    	<Grid x:Name="LayoutRoot">
    		<StackPanel HorizontalAlignment="Left" Height="29.6" Margin="2,0.2,0,0" Orientation="Horizontal" VerticalAlignment="Top">
    			<Button x:Name="button" Content="red" Margin="0,0.8,0,0" Width="40.8"/>
    			<Button x:Name="button1" Content="green" Margin="0,0.8,0,0" Width="40.8"/>
    			<Button x:Name="button2" Content="blue" Margin="0,0,0,0.8" Width="40.8"/>
    		</StackPanel>
    		<TextBlock x:Name="redtxt" HorizontalAlignment="Left" Margin="42.179,106.6,0,0" TextWrapping="Wrap" Text="RED" Width="268.621" FontSize="64" Height="92" VerticalAlignment="Top" Foreground="Red" Opacity="0"/>
    		<TextBlock x:Name="greentxt" HorizontalAlignment="Left" Margin="42.179,106.6,0,0" TextWrapping="Wrap" Text="GREEN" Width="268.621" FontSize="64" Height="92" VerticalAlignment="Top" Foreground="#FF009019" Opacity="0"/>
    		<TextBlock x:Name="bluetxt" HorizontalAlignment="Left" Margin="38.8,107.4,0,0" TextWrapping="Wrap" Text="BLUE" Width="268.621" FontSize="64" Height="92" VerticalAlignment="Top" Foreground="#FF0325BF" Opacity="0"/>
    	</Grid>
    </Window>
    

    One trick here is the animations that only have keyframes at 1 second, and no start keyframe.  These are the ones that make all the other textblocks animate from whatever they currently are, to invisible.

     

    Monday, February 21, 2011 11:04 PM
  • Thank you Leo. I am gonna try putting the keyframes only when needed and see if it works. Hopefully this method will also works on my project. I appreciate your prompt reply, have a nice afternoon.
    Tuesday, February 22, 2011 12:17 AM