ansaurus

Question

WP7 Is it possible to have a two color background without using an image?

Answer 1

+1 A:

You could set your background to be a StackPanel with Rectangles:

<Grid>
    <Grid.Background>
        <StackPanel>
            <Rectangle Height="48" Background="Green" />
            <Rectangle Background="Yellow" />
        </StackPanel>
    </Grid.Background>
</Grid>

Jake Pearson 2010-10-11 18:15:12

I recommend avoiding gradient brushes. On a real device, you will most likely experience colour banding if the manufacturer sticks to the minimum requirements regarding colours.

keyboardP 2010-10-11 18:26:38

Could you set the middle offsets to the same number to avoid banding?

Jake Pearson 2010-10-11 18:29:41

If you're not looking for any sort of gradient (i.e. you just want two distinct colours), I would imagine it would be fine as colour banding becomes more visible when there are more variations in colours.

keyboardP 2010-10-11 18:32:04

I am definitely looking to avoid gradients due to the banding.

CACuzcatlan 2010-10-11 18:37:09

The gradient brush seems like the wrong tool, since I'm just looking to have two solid colors, but if that's the way to do it, I'll go with it. However, I'm not familiar enough with it to know how to do two solid colors without a gradient. Like I said earlier, I'd like the top 48 pixels to be one color, and everything below that to be another color.

CACuzcatlan 2010-10-11 18:46:31

As Jake mentioned, if you position the two offsets at the same point, you'll get two different colours without a gradient. like this: `<Grid.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Green" Offset="0.113"/> <GradientStop Color="Yellow" Offset="0.113"/> </LinearGradientBrush> </Grid.Background>`

keyboardP 2010-10-11 19:51:35

If you just want 48 pixels of green, then the rest yellow I would probably make a 1 pixel wide image and use an image brush.

Jake Pearson 2010-10-11 20:06:18

Thanks KeyboardP. My understanding is that the offset is essentially a percentage, meaning that it's based on the size of the page. I tried your suggestion and it works, except that some pages are longer than others, so the Green bar on the top changes height on different pages. I'm thinking that an image may be the way to go in this case, since there doesn't seem to be a way to specify Offset (or something equivalent) with pixels.

CACuzcatlan 2010-10-11 21:03:35

Hi CACuzcatlan - Try doing it with Absolute mapping mode and setting both offset as 0 (i.e. leave blank), like this:<Grid.Background> <LinearGradientBrush EndPoint="0,768" StartPoint="0,40" MappingMode="Absolute"> <GradientStop Color="Red" /> <GradientStop Color="White"/> </LinearGradientBrush> </Grid.Background> (768 is total height, and 0,40 means start at 0 pixels and extend to 40 pixels)

keyboardP 2010-10-12 18:29:38

Answer 2

+2 A:

Create a Rectangle in row 0, set its Fill property. :) Remember, you can layer things in XAML.

Curt Nichols 2010-10-12 18:21:08

That's a better suggestion than mine.

Jake Pearson 2010-10-12 19:27:24

It would work, but I don't like it, since I'd have to redo the layout of all my pages. I'd rather use a true background that I can create as a style and apply throughout the app.

CACuzcatlan 2010-10-13 00:33:31

Sounds like it's time for a refactor--if you have common UI throughout the app then you should be styling a commonly re-used piece that you've built. You might also consider that globally applying a style to Grid is pretty heavy-handed. Grid is a handy container and can be used for many things. You'll probably eventually find that you don't want every Grid in your app styled that way.

Curt Nichols 2010-10-13 19:35:44

ansaurus

tags:

views:

answers:

WP7 Is it possible to have a two color background without using an image?

related questions