0

I'm looking to create a background with the top 48 pixels one color, and everything below it another color. I've created a style, but it crashes the phone with a "XamlParseException" when I try to use it.

        <Style x:Key="BackgroundStyle" TargetType="Grid">
            <Setter Property="Background">
                <Setter.Value>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="48" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid Grid.Row="0" Background="Green" />
                        <Grid Grid.Row="1" Background="Yellow" />
                    </Grid>
                </Setter.Value>
            </Setter>
        </Style>

Is it possible to do something like this in xaml, or do I need to use an image as the background to create this effect?

CACuzcatlan
  • 5,407
  • 8
  • 41
  • 59
  • 1
    Jake Pearson already gave a possible solution to your problem. But if you are curious as to why your attempted solution did not work: The property Grid.Background is of type Brush. In your Xaml style definition you are assigning this property a value of type Grid. Grid is a UIElement, not a Brush, so the assignment fails. – KeithMahoney Oct 11 '10 at 22:10

2 Answers2

2

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

Curt Nichols
  • 2,757
  • 1
  • 17
  • 24
  • That's a better suggestion than mine. – Jake Pearson Oct 12 '10 at 19:27
  • 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 Oct 13 '10 at 00:33
  • 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 Oct 13 '10 at 19:35
1

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
  • 27,069
  • 12
  • 75
  • 95
  • 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 Oct 11 '10 at 18:26
  • Could you set the middle offsets to the same number to avoid banding? – Jake Pearson Oct 11 '10 at 18:29
  • 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 Oct 11 '10 at 18:32
  • I am definitely looking to avoid gradients due to the banding. – CACuzcatlan Oct 11 '10 at 18:37
  • 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 Oct 11 '10 at 18:46
  • 2
    As Jake mentioned, if you position the two offsets at the same point, you'll get two different colours without a gradient. like this: ` ` – keyboardP Oct 11 '10 at 19:51
  • 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 Oct 11 '10 at 20:06
  • 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 Oct 11 '10 at 21:03
  • Hi CACuzcatlan - Try doing it with Absolute mapping mode and setting both offset as 0 (i.e. leave blank), like this: (768 is total height, and 0,40 means start at 0 pixels and extend to 40 pixels) – keyboardP Oct 12 '10 at 18:29