none
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>
    Friday, September 04, 2009 11:13 AM

Answers

  • 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
    • Marked as answer by Linda Liu Monday, September 07, 2009 8:14 AM
    Friday, September 04, 2009 2:37 PM

All replies

  • 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
    • Marked as answer by Linda Liu Monday, September 07, 2009 8:14 AM
    Friday, September 04, 2009 2:37 PM
  • 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>
    Friday, September 04, 2009 2:44 PM