1

UWP アプリで背景画像にぼかしを追加しようとしています。このコードを使用して、問題なく画像に青色を追加できます (実行時に Web から動的に読み込まれた画像に実際にこれを適用しています)。

<Image Source="Assets/Photos/BisonBadlandsChillin.png"
       Width="100"
       Height="100">
       <interactivity:Interaction.Behaviors>
           <behaviors:Blur x:Name="blurry"
                             Value="10"
                             Duration="100"
                             Delay="0"
                             AutomaticallyStart="True" />
       </interactivity:Interaction.Behaviors>

ただし、背景の画像、特に RelativePanel の背景にぼかしを追加したいと考えています。ただし、RelativePanel の背景はそのコンテンツで ImageBrush のみを取得し、コミュニティ ツールキットから ImageBrush に同じ動作を追加しようとすると、エラーが発生します。

タイプ 'Microsoft.Toolkit.Uwp.UI.Animations.Behaviors.Blur' のインスタンスをタイプ 'Microsoft.Xaml.Interactivity.BehaviorCollection' のコレクションに追加できません

ツールキットを使用してこれを回避する方法はありますか?

4

1 に答える 1

0

ぼかしアニメーション動作は、ピクセル サイズを増減することによって、 XAML 要素を選択的にぼかします。しかし、ImageBrushそうではありませんXAML element。だから、それでイメージブラシにぼかしを追加することはできないと思います。

uwp にぼかしを追加する場合は、 Win2DをImagebrush使用できます。GaussianBlurEffect を使用して、非常にクールなぼかし効果を作成し、アプリですりガラスのような外観にすることができます。

private async void AddBrushToPanel(ImageBrush brush, Panel panel)
{
var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/image.jpg"));
using (var stream = await file.OpenAsync(FileAccessMode.Read))
    {
        var device = new CanvasDevice();
        var bitmap = await CanvasBitmap.LoadAsync(device, stream);

        var renderer = new CanvasRenderTarget(device,
                                              bitmap.SizeInPixels.Width,
                                              bitmap.SizeInPixels.Height, bitmap.Dpi);
        using (var ds = renderer.CreateDrawingSession())
        {
            var blur = new GaussianBlurEffect();
            blur.BlurAmount = 5.0f;
            blur.Source = bitmap;
            ds.DrawImage(blur);
        }
        stream.Seek(0);
        await renderer.SaveAsync(stream, CanvasBitmapFileFormat.Jpeg);
        BitmapImage image = new BitmapImage();
        image.SetSource(stream);
        brush.ImageSource = image;
        panel.Background = brush;
    }
}
于 2017-01-05T01:03:55.003 に答える