We Keep Coding

change windows height based on TabItem Selected wpf

hi i want when user selected tabitem windows height change this is my code:
<Windows.Style>
<Style TargetType="Windows">
<Setter Property="Height" Value="220" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=tabc,Path=SelectedIndex, UpdateSourceTrigger=PropertyChanged, Mode=Twoway}" Value="1">
<Setter Property="Height" Value="400" />
</DataTrigger>
</Style.Triggers>
</Style>
</Windows.Style>
in visual studio when i change tab code work perfectly but when i compile my code not work

You could use a DoubleAnimation to set the Height of the window. This works as expected:
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Style>
<Style TargetType="Window">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=tabc, Path=SelectedIndex}" Value="1">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="400" Duration="0:0:0" Storyboard.TargetProperty="Height" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="220" Duration="0:0:0" Storyboard.TargetProperty="Height" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Style>
<Grid>
<TabControl x:Name="tabc">
<TabItem Header="1">
<TextBlock>first tab</TextBlock>
</TabItem>
<TabItem Header="2">
<TextBlock>second tab</TextBlock>
</TabItem>
</TabControl>
</Grid>
</Window>

Can't animate Y property of TranslateTransform in Storyboard

I'm trying to make a Canvas move up and down, which should be a simple task, but I somehow can't do it:
<Window.Resources>
<TranslateTransform x:Key="transform1" x:Name="testTransform" X="-24" Y="0" />
<Storyboard x:Key="storyboard1">
<DoubleAnimation Duration="0:0:0.4" Storyboard.TargetName="testTransform" Storyboard.TargetProperty="Y" By="6"
AutoReverse="True" RepeatBehavior="Forever" EasingFunction="{StaticResource ease1}" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource storyboard1}" />
</EventTrigger>
</Window.Triggers>
[...]
<Canvas x:Name="canvas1" RenderTransform="{StaticResource transform1}">
<Path Data="{StaticResource amazingPath}" />
</Canvas>
Instead of smoothly animating that Canvas, I get this:
An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll
Additional information: 'testTransform' name cannot be found in the name scope of 'TestProject.MainWindow'.
What's going on here?

It works if you set Storyboard.Target="{StaticResource transform1}" and if your put the EventTrigger in a Window Style:
<Window.Resources>
<TranslateTransform x:Key="transform1" X="-24" Y="0" />
<Storyboard x:Key="storyboard1">
<DoubleAnimation
Duration="0:0:0.4"
Storyboard.Target="{StaticResource transform1}"
Storyboard.TargetProperty="Y" By="6"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</Window.Resources>
<Window.Style>
<Style TargetType="Window">
<Style.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource storyboard1}" />
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Style>
<Canvas RenderTransform="{StaticResource transform1}">
...
</Canvas>

Set the Storyboard.TargetName property to the name of the element (Canvas) to which the TranslateTransform is applied.
This works:
<Window x:Class="WpfApplication1.Window1"
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:WpfApplication1"
mc:Ignorable="d"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<TranslateTransform x:Key="transform1" x:Name="testTransform" X="-24" Y="0" />
<Storyboard x:Key="storyboard1">
<DoubleAnimation Duration="0:0:0.4" Storyboard.TargetName="canvas1"
Storyboard.TargetProperty="RenderTransform.Y" By="6" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource storyboard1}" />
</EventTrigger>
</Window.Triggers>
<Canvas x:Name="canvas1" RenderTransform="{StaticResource transform1}">
<TextBlock>...</TextBlock>
</Canvas>
</Window>

How do I define a Storyboard and Animation on a template in XAML?

I have a button template on which I wish to define a Storyboard animation ( correctly; right now it's done in the code behind on the object but I want to scrap that and do it straight in XAML )
Given the following stub :
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:FooBar="clr-namespace:Foo.Bar">
<Style TargetType="{x:Type FooBar.MyButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Where would I put this storyboard?
<Storyboard x:Key="SBOpac">
<DoubleAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.3"/>
</Storyboard>
I have tried both the ControlTemplate.Resources and Border.Resources but in both cases I get this exception :
Here I try and start the storyboard in the code behind:
((MyButton.Template.FindName( "Border", GB) as Border)
.Resources["SBOpac"] as Storyboard)
.Begin( MyButton, true );

You should put your storyboar inside your ControlTemplate as long with what triggers the animation :
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.3"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
<Border x:Name="Border" Background="Black"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Apply animation on WPF control visibility change

My xaml is
<Grid DockPanel.Dock="Top" >
<DockPanel Background="#bdbec0" MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >
<Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Name="TopMenuArea" Height="55">
some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area
</DockPanel>
And code for button mouse over is
private void showTopMenu_MouseEnter(object sender, MouseEventArgs e)
{
TopMenuArea.Visibility = Visibility.Visible;
}
How can i apply a animation effect while changing the visibility of TopMenuArea ? Is any way to do it from xaml directly?

Eventtrigger
<DockPanel Background="#bdbec0" MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >
<DockPanel.Triggers>
<EventTrigger RoutedEvent="DockPanel.MouseEnter">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
From="0.0" To="1.0" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="DockPanel.MouseLeave">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DockPanel.Triggers>
<Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Opacity="0" Name="TopMenuArea" Height="55">
</DockPanel>
Or use a style for fade in and out (with mouse enter / exit eventhandler like you did it)
<Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
<Setter Property="Visibility" Value="Collapsed"/>
<Setter Property="Opacity" Value="0"/>
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
<DockPanel Background="#151515" LastChildFill="True" Style="{StaticResource VisibleAnimation}" Name="TopMenuArea" Height="55">
Just define the style in your App Resources, or in the local Window or UserControl. You reuse the Animation style for any control.
use this in your Stackpanel
<StackPanel Background="Red" HorizontalAlignment="Stretch" >
<StackPanel.Triggers>
<EventTrigger RoutedEvent="StackPanel.MouseLeftButtonDown" >
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenuArea"
Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Collapsed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</StackPanel.Triggers>
<Label HorizontalAlignment="Center">Area outside top panel . Clicking here will hide top panel again</Label>
</StackPanel>

It's an old question, but I've put together an open source library to allow fading and/or translation on Visibility changed, Loaded or binding.
You can find it at SciChart.Wpf.UI.Transitionz on Github and on NuGet.
Usage:
<Window x:Class="WpfApplication15.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:tz="http://schemas.abtsoftware.co.uk/transitionz"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
</Window.Resources>
<Grid>
<CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
<TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
Visibility="Collapsed"
tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
</Grid>
</Window>
Which results in:

This would be a good start.
You can just add one c# file and set property like below.
common:VisibilityAnimation.AnimationType="Fade"

here is a sample example
<Grid DockPanel.Dock="Top">
<DockPanel Background="#bdbec0"
x:Name="topPanel"
HorizontalAlignment="Stretch"
Height="55">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515"
LastChildFill="True"
Name="TopMenuArea"
IsHitTestVisible="False"
Height="55">
<TextBlock Foreground="White"> some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area</TextBlock>
<DockPanel.Style>
<Style TargetType="DockPanel">
<Setter Property="Opacity"
Value="0" />
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver,ElementName=topPanel}"
Value="true">
<Setter Property="Opacity"
Value="1" />
</DataTrigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</Grid>
in the sample above I have set IsHitTestVisible="False" on the TopMenuArea dockPanel, as i can see that it is on top of previous (source for trigger panel)
other option is to use the TopMenuArea as the source if it is on the top
sample
<Grid DockPanel.Dock="Top">
<DockPanel Background="#bdbec0"
HorizontalAlignment="Stretch"
Height="55">
<Button HorizontalAlignment="Center"
VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515"
LastChildFill="True"
Name="TopMenuArea"
Height="55">
<TextBlock Foreground="White"> some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area</TextBlock>
<DockPanel.Style>
<Style TargetType="DockPanel">
<Setter Property="Opacity"
Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Opacity"
Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</DockPanel.Style>
</DockPanel>
</Grid>
give it a try and see if it is close to what you are looking for.
both of above just switch the opacity between 0 & 1, you may also use animation to make a fade effect if needed.

I come up with a way to gradually show Grid and hide Grid using ScaleTransform.
The ScaleTransform is set to X=0 Y=0 to hide, X=1 Y=1 to show,
and Trigger using Tag property, as the code below:
At ViewModel:
private string _helpVisiblilityTag = "hide";
public string HelpVisiblilityTag
{
get { return _helpVisiblilityTag; }
set
{
_helpVisiblilityTag = value;
NotifyOfPropertyChange(() => HelpVisiblilityTag);
}
}
public void Hide()
{
HelpVisiblilityTag = "hide";
}
public void Show()
{
HelpVisiblilityTag = "show";
}
At View:
<Button Click="Show"/>
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Tag="{Binding HelpVisiblilityTag}"
RenderTransformOrigin="0.5, 0.5" >
<Grid.Background>
<SolidColorBrush Color="#D4F1FA" Opacity="0.8"/>
</Grid.Background>
<Grid.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform"
ScaleX="0" ScaleY="0" />
</Grid.RenderTransform>
<Grid.Style>
<Style TargetType="{x:Type Grid}">
<Style.Triggers>
<Trigger Property="Tag" Value="show">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
From="0.0" To="1.0" Duration="0:0:1" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
>
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="1"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
>
<DoubleAnimation.EasingFunction>
<ElasticEase EasingMode="EaseOut" Oscillations="1"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Duration="0:0:0.5" AutoReverse="False" />
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
/>
<DoubleAnimation
Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Grid.Style>
<Button Click="Hide"/>
</Grid>
Sample Screenshot:

You can use ToggleButton Checked and UnChecked Routed Event with Event Trigger:
<ToggleButton Content="Toggle" Height="20" Width="60" Panel.ZIndex="2" VerticalAlignment="Top" HorizontalAlignment="Left">
<ToggleButton.Triggers>
<EventTrigger RoutedEvent="ToggleButton.Checked">
<BeginStoryboard>
<Storyboard >
<DoubleAnimation Storyboard.TargetName="MyDockPanel"
Storyboard.TargetProperty="Opacity"
From="0" To="1"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="ToggleButton.Unchecked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyDockPanel"
Storyboard.TargetProperty="Opacity"
From="1" To="0"
Duration="0:0:0.2"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToggleButton.Triggers>
</ToggleButton>
<DockPanel x:Name="MyDockPanel" Background="Yellow" Opacity="0">
<TextBlock DockPanel.Dock="Bottom" Text="DockPanel"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</DockPanel>
Result:

If I need to have 60 Image controls in my application, am I going to necessarily have 60 of these huge code blocks?

Someone suggested this for me to use as an animation:
<Window x:Class="WpfApplication.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="600" Width="600">
<Window.Resources>
<Storyboard x:Key="ScaleImageStoryboard">
<DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleX"/>
<DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetName="ScaleImage" Storyboard.TargetProperty="ScaleY"/>
</Storyboard>
</Window.Resources>
<Grid>
<Image Name="Image" Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"
Stretch="Fill" Width="300" Height="300"
RenderTransformOrigin="0.5, 0.5">
<Image.RenderTransform>
<ScaleTransform x:Name="ScaleImage"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard Storyboard="{StaticResource ScaleImageStoryboard}"/>
</EventTrigger>
</Image.Triggers>
</Image>
</Grid>
Note that a single Image declaration in XAML is more than 6 lines! :D Is there a way for me to create much much cleaner XAML without breaking this functionality?

I think the easiest solution here is to create a style for the image, where you define the triggers and storyboard
<Window.Resources>
<Style x:Key="imageStyle" TargetType="{x:Type Image}">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform />
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
<Style.Triggers>
<EventTrigger RoutedEvent="Image.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetProperty="RenderTransform.ScaleX"/>
<DoubleAnimation Duration="0:0:0.2" From="1" To="1.2" AutoReverse="True"
Storyboard.TargetProperty="RenderTransform.ScaleY"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
You can then use this style for all your images :
<Image Name="Image"
Source="C:\Users\Public\Pictures\Sample Pictures\Desert.jpg"
Stretch="Fill" Width="300" Height="300"
Style="{StaticResource imageStyle}" />
Note : I didn't test it, it might require a few modifications...

I believe that Thomas' answer is quite good. If that's still to much code for you, you can make some collection of strings (or more sophisticated objects representing your 60 images), make it available for your Window through some property and display it using ItemsControl and appropriate data template (and panel [ItemsControl.ItemsPanel property] if you want to do some fancy positioning). There's really no need for 'old shool way' in WPF ;).
<Window>
<ItemsControl ItemsSource={Binding ListOfPaths}>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Name="Image"
Source="{Binding}"
Stretch="Fill" Width="300" Height="300"
Style="{StaticResource imageStyle}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Window>

For situations like this is probably better to creating objects in source code ("old school way"), but if You prefer XML you can try use XSLT to generate it (but I don't recommend it).