none
Opacity question

    Question

  • My phone application has a background canvas that I've placed an image on where I've adjusted the opacity so that the image is a faintly showing as a background image.

    The problem is that if I place a text control on top of this image it appears to inherit the opacity of the background image, making the text of the control barely visible. How can I prevent this from happening? I've tried putting the text control on another grid and canvas, but I always get the same result.

    Sunday, May 09, 2010 6:46 PM

All replies

  • Could you share a sketch of the Xaml you are using? Try something like this?

    <Grid>
    <Canvas Opacity=".5">
    <Image />
    </Canvas>
    <Grid>
    <TextBlock>
    </Grid>
    </Grid>
      

    Anything contained on the canvas will have half opacity, so you should place elements above the canvas if you want them to display at full opacity. -Graham

    Sunday, May 09, 2010 8:20 PM
  • Beware though, as most windows phones will probably have OLED displays, if you display a backround image in your app you will be using more battery power as the power consumed is proportional to the amount of light emitted. This is why most of the standard apps have minimal interfaces with black backgrounds.

    Sunday, May 09, 2010 8:25 PM
  • Could you share a sketch of the Xaml you are using? Try something like this?Anything contained on the canvas will have half opacity, so you should place elements above the canvas if you want them to display at full opacity. -Graham

     

    Here's some XAML of interest. The text controls and their container are in bold italics. 

     

            <Grid x:Name="ContentGrid" Grid.Row="1" OpacityMask="Black">
                <Canvas x:Name="canvas2">
                    <Canvas.Background>
                        <ImageBrush ImageSource="/PerfectPitch;component/Images/tele1web.jpg" />
                    </Canvas.Background>
                    <Canvas.OpacityMask>
                        <RadialGradientBrush>
                            <GradientStop Color="#5FFFFFFF" Offset="0" />
                            <GradientStop Color="#00000000" Offset="0.981" />
                            <GradientStop Color="#465E5E5E" Offset="0.476" />
                            <GradientStop Color="#465E5E5E" Offset="0.49" />
                            <GradientStop Color="#52AEAEAE" Offset="0.231" />
                        </RadialGradientBrush>
                    </Canvas.OpacityMask>
                    <Grid Height="115" Canvas.Left="75" Canvas.Top="475" Width="319">
                        <TextBlock x:Name="txtFrequency" HorizontalAlignment="Left" Height="37" Margin="8,8,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="109" Text="Frequency" />
                        <TextBlock x:Name="theNote" HorizontalAlignment="Right" Height="37" Margin="0,8,134,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="62" Text="Note"/>
                        <TextBlock Height="34" HorizontalAlignment="Left" Margin="213,9,0,0" Name="txtOrigFrequency" Text="TextBlock" VerticalAlignment="Top" Width="93" />
                    </Grid>

                </Canvas>
                <Canvas Height="80" HorizontalAlignment="Left" Margin="198,613,0,0" x:Name="canvas1" VerticalAlignment="Top" Width="83">
                    <Ellipse x:Name="controlBtn" Stroke="Black" Width="70" StrokeThickness="2" MouseLeftButtonDown="controlBtn_MouseLeftButtonDown" Canvas.Left="6" Canvas.Top="6" Height="70">
                        <Ellipse.Fill>
                            <RadialGradientBrush>
                                <GradientStop Color="Black" Offset="1" />
                                <GradientStop Color="#FF4DA13A" />
                            </RadialGradientBrush>
                        </Ellipse.Fill>
                        <Ellipse.Effect>
                            <DropShadowEffect ShadowDepth="2" />
                        </Ellipse.Effect>
                    </Ellipse>
                </Canvas>
                <Canvas Height="137" HorizontalAlignment="Center" Margin="0,45,0,0" x:Name="graph" VerticalAlignment="Top" Width="442">
                    <Rectangle x:Name="graphRect" Height="137" StrokeThickness="0" Width="442" Visibility="Collapsed" Stroke="Black"></Rectangle>
                    <Polyline Canvas.Left="0" Points="0,120 440,120" StrokeThickness="1" Stroke="Red" x:Name="graphLine" Canvas.Top="65" Visibility="Collapsed" />
                </Canvas>
            </Grid>

    Sunday, May 09, 2010 9:00 PM