XAML(WPF)：Imageの一部にBlurEffectを適用したい

Question

XAML(WPF)の質問です。

下記の GridB が重なっている領域だけ、ImageA をぼかし（BlurEffect）たいのですが、どのような方法が考えられますでしょうか？

---------------------------------------------------------------------------

<Grid Name="GridA">
    <Image Name="ImageA" Source="images/sample.bmp" Stretch="Fill"/>
    <Grid Name="GridB" Margin="20" Background="#40000000">
       
    </Grid>
</Grid>

---------------------------------------------------------------------------

Visual Studio Express 2015 for Windows Desktop

Windows 10 14393 x64 / .NET Framework 4.5

という環境で開発をしています。

どうぞ、よろしくお願い申し上げます。

Answer 1

ぼかしていな画像の上に、Gridの大きさで切り抜いてぼかした画像を重ねるのではダメ？

<Grid Name="GridA">
    <Image Name="ImageA" Source="images/sample.bmp" Stretch="Fill" />
    <Canvas Margin="{Binding Path=Margin,ElementName=GridB}" ClipToBounds="true">
        <Image Canvas.Left="-20" Canvas.Top="-20" Name="ImageA2" Source="{Binding Path=Source,ElementName=ImageA}" Stretch="Fill" 
            Width="{Binding Path=ActualWidth,ElementName=ImageA}" Height="{Binding Path=ActualHeight,ElementName=ImageA}">
            <Image.Effect>
                <BlurEffect Radius="20"/>
            </Image.Effect>
        </Image>
    </Canvas>

    <Grid Name="GridB" Margin="20" Background="#40000000">
    </Grid>
</Grid>

---

個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

Answer 2

gekkaさま

ありがとうございます！目的の表現を行うことができました！

実は・・・

欲が出来てきてしまったのですが、GridB を 「領域の裏側に見える要素すべてをぼかすユーザーコントロール」とする事は可能でしょうか？

Image 以外の要素をぼかしたいとき、また複合的な要素が GridB の裏側にあるときなど、どう BlurEffect を適用してよいか思いつきません。

-----------------------------------------------------

追記

Acrylic material

の「In-app acrylic」と同じような事を WPF で表現したいのです。

Answer 3

VisualBrushで

<Grid Name="GridA">
    <Grid x:Name="panel">
        <Image Name="ImageA" Source="images\sample.bmp" Stretch="Fill" />
        <TextBlock Text="ABCDEFG" Foreground="Red" FontSize="300" FontWeight="ExtraBold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

    <Canvas Margin="{Binding Path=Margin,ElementName=GridB}" ClipToBounds="true">
        <Grid Canvas.Left="-20" Canvas.Top="-20" 
                Width="{Binding Path=ActualWidth,ElementName=ImageA}" Height="{Binding Path=ActualHeight,ElementName=ImageA}">
            <Grid.Background>
                <VisualBrush Visual="{Binding ElementName=panel}" TileMode="None" AlignmentX="Left" AlignmentY="Top"   Stretch="None"  ViewboxUnits="Absolute">
                </VisualBrush>
            </Grid.Background>
                
            <Grid.Effect>
                <BlurEffect Radius="20"/>
            </Grid.Effect>
                
        </Grid>
    </Canvas>

    <Grid Name="GridB" Margin="20" Background="#40000000" />
</Grid>

MainWindowを透明にして背面の他のウィンドウやデスクトップに対してぼかしたいならWindows10のFluentDesingを待ちましょう。

---

個別に明示されていない限りgekkaがフォーラムに投稿したコードにはフォーラム使用条件に基づき「MICROSOFT LIMITED PUBLIC LICENSE」が適用されます。(かなり自由に使ってOK!)

Answer 4

gekkaさま

ありがとうございます。目的の表現ができる目処がつきました。

感謝しております。

ちなみに、

<VisualBrush Visual="{Binding ElementName=panel}" ～

の部分で背景とする要素（panel）を指定していますが、何も指定せずにぼかし効果を適用することは不可能でしょうか？

<UserControl1/>

と置いただけで、背景がぼやけてみえるのが理想です。

しかしながら、現状でも背景としたい Visual さえ指定できれば実用的に問題はありません。

この度は誠にありがとうございました。