Procedura: applicare un effetto di sfocatura a un oggetto Visual
Aggiornamento: novembre 2007
È possibile utilizzare BlurBitmapEffect per applicare un effetto di sfocatura a un oggetto visibile. Di seguito viene elencata una serie di esempi che illustrano quanto indicato:
Come utilizzare un markup semplice per applicare l'effetto a un oggetto
Come utilizzare Style per applicare l'effetto a uno o più oggetti
Come utilizzare il codice per applicare l'effetto a un oggetto
Come utilizzare un'animazione per animare le proprietà di un effetto applicato a un oggetto
Nota: in tutti gli esempi riportati di seguito viene applicato un singolo effetto a un oggetto. Per applicare più effetti, è possibile utilizzare BitmapEffectGroup. Per alcuni esempi, vedere Procedura: creare più effetti visivi.
Esempio
Nell'esempio riportato di seguito viene illustrato come utilizzare BlurBitmapEffect per creare un oggetto Button sfuocato.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Width="200">You Can't Read This!
<Button.BitmapEffect>
<!-- <BitmapEffectGroup> would go here if you wanted to apply more
then one effect to the Button. However, in this example only
one effect is being applied so BitmapEffectGroup does not need
to be included. -->
<!-- The larger the Radius, the more blurring. The default range is 20.
In addition, the KernelType is set to a box kernel. A box kernel
creates less disruption (less blur) then the default Gaussian kernel. -->
<BlurBitmapEffect Radius="10" KernelType="Box" />
</Button.BitmapEffect>
</Button>
</StackPanel>
</Page>
Nella figura riportata di seguito viene illustrato l'effetto creato nell'esempio precedente.
.png)
Nell'esempio riportato di seguito viene illustrato come utilizzare Style per applicare BlurBitmapEffect a qualsiasi oggetto Button nella pagina quando viene premuto.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
<!-- Resources define Styles for the entire page. -->
<Page.Resources>
<!-- This style applies to any Button on the page. -->
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<!-- When the Button is pressed, apply the blur. -->
<Trigger Property="IsPressed" Value="true">
<Setter Property = "BitmapEffect" >
<Setter.Value>
<BlurBitmapEffect Radius="10" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Page.Resources>
<StackPanel>
<!-- The Style defined above applies to this Button which makes
the Button appear blurred while it is pressed. -->
<Button Width="200" >Blurning down the House!</Button>
</StackPanel>
</Page>
Nell'esempio riportato di seguito viene illustrato come utilizzare il codice per applicare BlurBitmapEffect a un oggetto Button quando si fa clic su di esso.
Di seguito viene riportato il linguaggio Extensible Application Markup Language (XAML) dell'esempio.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SDKSample.BlurExample" >
<StackPanel>
<Button Click="OnClickBlurButton" Width="200">Click to Blur!</Button>
</StackPanel>
</Page>
Nell'esempio riportato di seguito viene fornito il codice mediante cui viene gestito l'evento per Extensible Application Markup Language (XAML).
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Input;
using System.Windows.Media.Effects;
namespace SDKSample
{
public partial class BlurExample : Page
{
// Add Blur effect.
void OnClickBlurButton(object sender, RoutedEventArgs args)
{
// Toggle effect
if (((Button)sender).BitmapEffect != null)
{
((Button)sender).BitmapEffect = null;
}
else
{
// Get a reference to the Button.
Button myButton = (Button)sender;
// Initialize a new BlurBitmapEffect that will be applied
// to the Button.
BlurBitmapEffect myBlurEffect = new BlurBitmapEffect();
// Set the Radius property of the blur. This determines how
// blurry the effect will be. The larger the radius, the more
// blurring.
myBlurEffect.Radius = 10;
// Set the KernelType property of the blur. A KernalType of "Box"
// creates less blur than the Gaussian kernal type.
myBlurEffect.KernelType = KernelType.Box;
// Apply the bitmap effect to the Button.
myButton.BitmapEffect = myBlurEffect;
}
}
}
}
Nell'esempio riportato di seguito viene illustrato come animare la proprietà Radius di BlurBitmapEffect per rendere sfuocato Button dopo che è stato scelto.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
<StackPanel>
<Button Width="200">
Click to Blur ME!
<Button.BitmapEffect>
<!-- This BitmapEffect is targeted by the animation. -->
<BlurBitmapEffect x:Name="myBlurBitmapEffect" Radius="0" />
</Button.BitmapEffect>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<!-- Blur the Button and then animate back to normal. -->
<DoubleAnimation
Storyboard.TargetName="myBlurBitmapEffect"
Storyboard.TargetProperty="Radius"
From="0" To="40" Duration="0:0:0.3"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</Page>
Vedere anche
Attività
Procedura: creare un effetto alone sul bordo esterno di un oggetto
Procedura: creare un effetto visivo di ombreggiatura
Procedura: creare più effetti visivi
Procedura: animare più effetti visivi