Question

I have an issue when attempting to set the background of a grid in a Silverlight 3 app to a gradient. When I set the background of a grid in my application to a gradient, that gradient simply does not render in the browser. I have set this gradient brush as a resouce (both in app.xaml as well as in the local XAML file) and I have also tried hard coding the gradient brush directly. I have made the changes manually in the XAML from VS and in Expression Blend.

When the chane is made and the file is viewed in Blend, the background color renders correctly. When the background is set to a solid color (both hard coded and as a resource) the background renders just fine both in Expression and in the browser. Both of these things suggest to me that this isn’t a z-index issue with one control rendering on top of the control in question.

The XAML for the brush is:

<LinearGradientBrush x:Key="TestBrush"
         EndPoint="0.5,1"
         StartPoint="0.5,0">
    <GradientStop Color="#8DFFFFFF"
            Offset="1" />
    <GradientStop Color="#E4FFFFFF" />
</LinearGradientBrush>

The XAML for the grid and it’s contents is:

<Grid Margin="1,0,0,0"
    Grid.Row="0"
    VerticalAlignment="Top"
    Height="49" Background="{StaticResource TestBrush}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal"
            Margin="0"
            Grid.Column="0"
            Grid.Row="0">
        <TextBlock Margin="0.125,1.5,1,1.5"
             VerticalAlignment="Center">Code:</TextBlock>
        <TextBox x:Name="SearchCodeTextBox"
             Padding="1,0,0,0"
             Margin="1,1.5,0,1.5"
             Width="44"
             Text="{Binding Mode=TwoWay, Path=CurrentTabularViewModel.SearchCode}"
             TextWrapping="Wrap"
             KeyUp="SearchCodeTextBox_KeyUp" />
        <StackPanel Margin="2,0"                                        
            Height="20" 
            Background="{StaticResource CP_Blue2}">
            <TextBlock MinWidth="200" />
        </StackPanel>
        <Button Margin="10,1,0,1"
            Content="Add Code"
            Height="20" />
    </StackPanel>
    <StackPanel Orientation="Horizontal"
            Margin="35,0,0,0"
            Grid.Row="1"
            Grid.Column="0">
        <Button Margin="0"
            Width="24"
            Content="<"
            Height="20"
            VerticalContentAlignment="Top" />
        <Button Margin="2,0"
            Content="Tabular"
            Height="20"
            Width="Auto"
            HorizontalAlignment="Stretch"
            commands:Click.Command="{Binding Path=CurrentTabularViewModel.SearchCommand}"
            commands:Click.CommandParameter="{Binding Path=SelectedSessionType}" />
        <Button Content=">"
            Width="24"
            Margin="2,0"
            Height="20" />
        <Button Content="Instructional Notes"
            Width="Auto"
            Margin="30,0,2,0"
            Height="20" />
    </StackPanel>
</Grid>

Any thoughts?

Answer 1

OK, so here’s the deal. It’s not a bug, at least not on Silverlight’s part! It’s a bug on the part of the developer!

If you look closer at the gradient used in the resource, only the first two hex values change (see below). This is, of course, the Alpha channel, along with all Fs following that, I’m really just going from one level of transparency to another.

<LinearGradientBrush x:Key="TestBrush"
         EndPoint="0.5,1"
         StartPoint="0.5,0">
    <GradientStop Color="#8DFFFFFF"
                Offset="1" />
    <GradientStop Color="#E4FFFFFF" />
</LinearGradientBrush>

Now, becuase this is a component that’s being injected into a larger page, the background is set by the larger page. So in Blend, the background is BLEND’s background, which is a gray color, which makes the whole thing look like it has a gray gradient in Blend, but it’s simply white with various levels of transparency. When the control is injected into the main page which has a white background, you can’t see it.

So, what’s moral of this story? Pay attention to the color you’re working with!