Fade panel edges to trasparent so content dissapears

Question

Hi,

I wish to make a panel where the content inside is visible until it nears the right of left edges on the panel, and then it will fade to trasparent.
An example of the effect: http://codefreezer.com/images/article/rumormill4-1.jpg

Sure I could place two rectangles either side which fade from an opaque color to transparent, but thats just not generic enough.

I've tried using the below hoping it would make the canvas children fade when they near its edge, but it doesnt work as expected:

<Canvas.OpacityMask>
            <LinearGradientBrush >

                <GradientStop Color="Transparent" Offset="1"/>

                <GradientStop Color="Black" Offset="0"/>

                <GradientStop Color="Transparent" Offset="1"/>

            </LinearGradientBrush>
        </Canvas.OpacityMask>

Answer 1

Hi AshLewis87,
Here is an example of what you want to do.
Basically you put a rectangle on the left side (or right if you want) and with the LinearGradient you give the fade effect. Remember that the elements you place first are left down in drwaing stack, so basically last items are drawn on top, so the order is important.

I didnt try with the OpacityMask but it may work as well.

<Grid x:Name="canvas" Background="Black" Height="100">  
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Canvas Height="100">
            <TextBlock Canvas.Left="30" Text="Hellooooooooooooo" Foreground="White"></TextBlock>
            <Rectangle Canvas.Top="0" Canvas.Left="0" Width="200" Height="100">
                <Rectangle.Fill>
                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                        <GradientStop Color="Black" Offset="0.3"></GradientStop>
                        <GradientStop Color="Transparent"  Offset="1"></GradientStop>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Canvas>
</Grid>

Hope it helps.

Regards,

---

Federico Benitez
My blog

Answer 2

Hello, this code works fine for me:

<Grid >
   <Grid.OpacityMask>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
     <GradientStop Offset="0"/>
     <GradientStop Color="White" Offset="0.271"/>
     <GradientStop Color="White" Offset="0.768"/>
     <GradientStop Offset="1"/>
    </LinearGradientBrush>
   </Grid.OpacityMask>
   <Button Margin="8,56,8,91" Content="Button"/>
  </Grid>