Setting an image AND a solid color as a background in VisualBrush

问题

This is my code:

<Style x:Key="BackgroundStyle" TargetType="{x:Type Window}">
        <Setter Property="Background">
            <Setter.Value>
                <VisualBrush Viewbox="0, 0,1280,1024" ViewboxUnits="Absolute" >
                    <VisualBrush.Visual>
                        <Image Source="Images\myImage.png">
                                <Image.Effect>
                                    <BlurEffect Radius="20"/>
                                </Image.Effect>
                            </Image>
                    </VisualBrush.Visual>
                </VisualBrush>
            </Setter.Value>
        </Setter>
    </Style>

I want the window that has this style to have the myImage.png image as a background, which would be blurred and over that image there should be a layer of solid white color which would have an opacity of 0.8 With the code I have above, the image is set as background and it's blurred, but I don't know how to set a white color on top of the image.

It should look something like this:

回答1:

Just add a white Rectangle with an appropriate Opacity to the VisualBrush's Visual:

<VisualBrush Viewbox="0,0,1280,1024" ViewboxUnits="Absolute" >
    <VisualBrush.Visual>
        <Grid Width="1280" Height="1024">
            <Image Source="Images\myImage.png">
                <Image.Effect>
                    <BlurEffect Radius="20"/>
                </Image.Effect>
            </Image>
            <Rectangle Fill="White" Opacity="0.8"/>
        </Grid>
    </VisualBrush.Visual>
</VisualBrush>

By setting the Grid's ClipToBounds property, you may also get rid of the Viewbox settings:

<VisualBrush>
    <VisualBrush.Visual>
        <Grid Width="1280" Height="1024" ClipToBounds="True">
            <Image Source="Images\myImage.png">
                <Image.Effect>
                    <BlurEffect Radius="20"/>
                </Image.Effect>
            </Image>
            <Rectangle Fill="White" Opacity="0.8"/>
        </Grid>
    </VisualBrush.Visual>
</VisualBrush>

来源：https://stackoverflow.com/questions/24912759/setting-an-image-and-a-solid-color-as-a-background-in-visualbrush

标签

image

xaml

background

opacity