CODEWITHSUNDEEP
c#.netxamlwindows-phone-8compact-framework
amarankes
amarankes

Reputation: 115

How to set semi transparency to background, but not foreground for wp8?

I'm creating a customize loading message and I would like to set the background to semi-transparent only. The issue I'm having is that the whole stackpanel is set to semi-transparent including background and foreground. How can I make only the background semi-transparent and leave foreground the way it is? Below is my xaml code. 

        <StackPanel Grid.Row="0" x:Name="spLoading" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent">
            <Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="Black" Background="Black" Opacity=".1" CornerRadius="10">
                <TextBlock x:Name="txtLoading" Foreground="White" Text="loading . . ." HorizontalAlignment="Center" TextAlignment="Center" FontSize="30" FontWeight="Bold" Padding="5" />
            </Border>                
        </StackPanel>

Upvotes: 1

Views: 867

Answers (3)

Akshay Jain
Akshay Jain

Reputation: 904

This would do the required.

<Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="Black" CornerRadius="10">
            <Border.Background>
                 <SolidColorBrush Color="Black" Opacity="0.1" />
            </Border.Background>
            <TextBlock />
</Border>

Upvotes: 5

TYY
TYY

Reputation: 2716

    <Grid Grid.Row="0">
        <Rectangle   Opacity="0.4" Fill="Black"></Rectangle>
        <StackPanel Background="White"   HorizontalAlignment="Center" VerticalAlignment="Center" >
            <TextBlock Margin="20,10,20,10">Loading...</TextBlock>
        </StackPanel>
    </Grid>

What this does, is that the Grid take the full space available, the rectangle gives you the grey scale (opacity), and the stackpanel just works as is.

(Note this is what I do in WPF)

Upvotes: 0

Juan Pablo Garcia Coello
Juan Pablo Garcia Coello

Reputation: 3232

If I understand well you want that the background of the border has somekind of opacity, the way to do that is play with the alpha channel of the background of the border like:

<Border Background="#3000"...>

Or

 <Border Background="#33000000"...>

You can use in the colors everywhere, in your case:

<StackPanel Grid.Row="0" x:Name="spLoading" HorizontalAlignment="Center" VerticalAlignment="Center" Background="Transparent">
        <Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="#33000000" Background="#33000000"  CornerRadius="10">
            <TextBlock x:Name="txtLoading" Foreground="White" Text="loading . . ." HorizontalAlignment="Center" TextAlignment="Center" FontSize="30" FontWeight="Bold" Padding="5" />
        </Border>
    </StackPanel>

With that you have the border background and stroke semitransparent

Upvotes: 0

Related Questions