Add striped background in windows store app

Question

I want to change the background of a grid to stripes as shown in the image below.

How can I change solid color background to these kind of striped ones in xaml . ?

Answer 1

You can set the Grid.Background property to any brush type, including an ImageBrush (if you want an image) or a LinearGradiantBrush (which can be set to generate simple stripes). Naively:

<Grid>
    <Grid.Background>
        <ImageBrush Stretch="Fill" ImageSource="Assets/bgimage.jpg"/>
    </Grid.Background>
</Grid>

Or for stripes:

<Grid.Background>
    <LinearGradientBrush EndPoint="3,3" StartPoint="0,0" MappingMode="Absolute" SpreadMethod="Repeat">
        <GradientStop Color="#FFDFDFDD" Offset=".5"/>
        <GradientStop Color="#FFE8E8E6" Offset=".5"/>
    </LinearGradientBrush>
</Grid.Background>

In a real app you'll want to use the brush only in normal contrast modes and fall back to default backgrounds in high contrast modes. For this set the Background as a ThemeResource then provide the stripe brush in the Default ThemeDictionary and use the default brushes in the HighContrast ThemeDictionary.

In the page's Xaml:

<Grid Background="{ThemeResource PageBackground}">
</Grid>

In app.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <ImageBrush x:Key="PageImageBackground" Stretch="Fill" ImageSource="Assets/bgimage.jpg"/>
                <LinearGradientBrush x:Key="PageBackground" EndPoint="3,3" StartPoint="0,0" MappingMode="Absolute" SpreadMethod="Repeat">
                    <GradientStop Color="#FFDFDFDD" Offset=".5"/>
                    <GradientStop Color="#FFE8E8E6" Offset=".5"/>
                </LinearGradientBrush>
            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="PageBackground" Color="{ThemeResource SystemColorWindowColor}" />
                <SolidColorBrush x:Key="PageImageBackground" Color="{ThemeResource SystemColorWindowColor}" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Answer 2

Personally I prefer not to add elements like images if I don't need to and leave these types of design additions more flexible in case I want to play off of them in the future with things like animations, or changing the pattern on the fly, or making them a resource, or having to worry about changing a file path or something, etc.

So for example instead of using an actual image let your xaml do that work for you by using stuff already available to you like a LinearGradientBrush as an alternative technique.

Something like;

<Grid Height="200" Width="200">
  <Grid.Background>
    <LinearGradientBrush MappingMode="Absolute" 
                         SpreadMethod="Repeat" 
                         StartPoint="0,0" 
                         EndPoint="3,3">
      <GradientStop Offset="0.125" Color="#77999999" />
      <GradientStop Offset="0.125" Color="#00000000" />
    </LinearGradientBrush>
  </Grid.Background>

  <TextBlock Text="Hey check it out,&#10;lines without an image!&#10;yay XAML! :)" 
             VerticalAlignment="Center" HorizontalAlignment="Center" 
             FontWeight="Bold"/>

</Grid>

result;

For future reference though, generally you want to at least show some effort before asking help on a QA site like SO. Anyhow, hopes this helps, cheers.