The View and ViewModel listed below show two buttons:
- when you click Show ToolBar, the toolbar fades in
- when you click Hide ToolBar, the toolbar fades out
However, the following things don't work:
- when the application is loaded and OnPropertyChanged("PageToolBarVisible") is fired, if the value is false then the Toolbar shows in spite of that fact (why is that?)
- when the application is loaded and OnPropertyChanged("PageToolBarVisible") is fired, if the value is true then the toolbar does indeed fade in, however, this is not supposed to happen on loading but only when explicitly changed by pressing the buttons, so I change the constructor to do this: _pageToolBarVisible = "true", but then the toolbar still still fades in even though the OnPropertyChanged was never called (why is that?)
View:
<Window x:Class="TestAnim334.Views.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:c="clr-namespace:TestAnim334.Commands"
Title="Main Window" Height="400" Width="800">
<Window.Resources>
<Style x:Key="PageToolBarStyle" TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding PageToolBarVisible}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="0.0"
To="1.0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetProperty="Opacity"
From="1.0"
To="0.0"
Duration="0:0:1"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
<Trigger Property="Opacity" Value="0">
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<DockPanel LastChildFill="False">
<StackPanel DockPanel.Dock="Top"
Margin="10">
<TextBlock Text="This is the content of the page."/>
<TextBlock Text="The ViewModel property is:"/>
<TextBlock Text="{Binding PageToolBarVisible}"/>
<Button Content="Hide ToolBar"
Width="150"
Command="{Binding HideToolBarCommand}"
HorizontalAlignment="Left"/>
<Button Content="Show ToolBar"
Width="150"
Command="{Binding ShowToolBarCommand}"
HorizontalAlignment="Left"/>
</StackPanel>
<Border Style="{StaticResource PageToolBarStyle}"
Height="40"
DockPanel.Dock="Bottom" Background="#ddd" CornerRadius="5">
<TextBlock FontSize="24" Text="This is the ToolBar text"/>
</Border>
</DockPanel>
</Window>
ViewModel:
using System.Windows.Input;
using TestAnim334.Commands;
namespace TestAnim334.ViewModels
{
public class MainViewModel : ViewModelBase
{
#region ViewModelProperty: PageToolBarVisible
private string _pageToolBarVisible;
public string PageToolBarVisible
{
get
{
return _pageToolBarVisible;
}
set
{
_pageToolBarVisible = value;
OnPropertyChanged("PageToolBarVisible");
}
}
#endregion
#region DelegateCommand: HideToolBar
private DelegateCommand hideToolBarCommand;
public ICommand HideToolBarCommand
{
get
{
if (hideToolBarCommand == null)
{
hideToolBarCommand = new DelegateCommand(HideToolBar, CanHideToolBar);
}
return hideToolBarCommand;
}
}
private void HideToolBar()
{
PageToolBarVisible = "false";
}
private bool CanHideToolBar()
{
return PageToolBarVisible == "true";
}
#endregion
#region DelegateCommand: ShowToolBar
private DelegateCommand showToolBarCommand;
public ICommand ShowToolBarCommand
{
get
{
if (showToolBarCommand == null)
{
showToolBarCommand = new DelegateCommand(ShowToolBar, CanShowToolBar);
}
return showToolBarCommand;
}
}
private void ShowToolBar()
{
PageToolBarVisible = "true";
}
private bool CanShowToolBar()
{
return PageToolBarVisible == "false";
}
#endregion
public MainViewModel()
{
PageToolBarVisible = "false";
}
}
}