Una caratteristica di un controllo visuale che spesso e volentieri risulta gradevole è la possibilità di mostrare/nascondere il contenuto del controllo stesso tramite un effetto FadeIn/FadeOut. In genere, questo effetto è realizzato tramite una semplice animazione che lavora sull’Opacity del controllo (portandola da 1 a 0 e viceversa) e che magari imposta a Visible/Collapsed la proprietà Visibility subito dopo l’animazione in modo da riempire/liberare istantaneamente un’area specifica dello schermo. In molti casi risulta dunque utile legare l’ effetto FadeIn/FadeOut proprio alla proprietà Visibility del controllo, in modo da ottenere automaticamente le animazioni desiderate al momento della valorizzazione della proprietà (che altrimenti non effettuerebbe ovviamente alcun effetto visuale di transizione). Un modo che ritengo molto interessante per ottenere questo tipo di scenario sfrutta il VisualStateManager : nel seguente esempio vediamo come sia possibile effettuare l’override della proprietà Visibility di un UserControl per agganciare gli effetti di FadeIn/FadeOut agli stati Visible/Collapsed definiti tramite VisualStateManager.
MyControl.xaml
<UserControl xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" ...>
<Grid x:Name="LayoutRoot">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Visible">
<Storyboard>
<DoubleAnimation Duration="0:0:.5" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity"
From="0" To="1" AutoReverse="False" Completed="VisibleCompleted" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0:0:.5" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Opacity"
From="1" To="0" AutoReverse="False" Completed="CollapsedCompleted" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
...
</Grid>
</UserControl>
MyControl.xaml.cs
public partial class MyControl : UserControl
{
private Visibility _visibility;
public event EventHandler VisibilityChanged;
public MyControl() { InitializeComponent(); }
public new Visibility Visibility
{
get { return _visibility; }
set
{
if (_visibility != value)
{
_visibility = value;
OnVisibilityChanged();
}
}
}
protected virtual void OnVisibilityChanged()
{
if (this.Visibility == Visibility.Visible)
{
base.Visibility = this.Visibility;
VisualStateManager.GoToState(this, "Visible", true);
}
else VisualStateManager.GoToState(this, "Collapsed", true);
}
private void CollapsedCompleted(object sender, EventArgs e)
{
base.Visibility = this.Visibility;
FireVisibilityChanged();
}
private void VisibleCompleted(object sender, EventArgs e) { FireVisibilityChanged(); }
private void FireVisibilityChanged()
{
if (VisibilityChanged != null) VisibilityChanged(this, new EventArgs());
}
}
Come si può notare, nell’esempio si è voluto implementare anche un evento VisibilityChanged che viene scatenato ogni volta che l’animazione FadeIn/FadeOut ha terminato la propria esecuzione. Infatti, la transizione visuale da uno stato Visible ad uno stato Collapsed può essere relativamente lunga e di conseguenza potrebbe essere utile sapere esattamente quando il nostro controllo è completamente visibile/nascosto.