background gradient

How-to Discussions
1

Hi,

I am searching for a way, implementing background gradients with different opacities. Is the only way to use a shape for this? And with placing all my elements inside the shape? I am asking the question, because I need two states. One with opacity:0.7, and after an swipe action with opacity:1. When I place all my content inside a shape, the whole content will have an opacity to. It is easy with ImageFill, but I want to implement it without assets. for learning purposes …

Please help!

Thanks very much!

2

Hi! Can you provide some more details of what you’re trying to do?

At its most basic you can simply change the opacity for a pre-made LinearGradient like this:

    <ClientPanel>
        <LinearGradient ux:Name="lg" Opacity="1" >
            <GradientStop Offset="0" Color="#000"/>
            <GradientStop Offset="0.5" Color="#0f0"/>
            <GradientStop Offset="1" Color="#f00"/>
        </LinearGradient>

        <Button Alignment="Center">
            <Clicked>
                <Set lg.Opacity="0.5"/>
            </Clicked>
        </Button>
    </ClientPanel>

But I suspect you might be aiming for something a bit more complex?

3

Hm, it is weird. Opacity didn´t work on my gradient. But maybe it was just a typing error. Will check that later. Thank you!