在Windows应用商店应用中添加条纹背景

Question

我想将网格的背景更改为条纹，如下图所示。

如何在xaml中将纯色背景更改为这些条纹的背景。 ？

Answer 1

就个人而言，如果我不需要，我宁愿不添加像图像这样的元素，并且这些类型的设计添加更加灵活，以防我希望将来使用动画或更改动态模式，或使它们成为资源，或者不必担心更改文件路径或其他内容等。

因此，例如，不要使用实际图像，让xaml通过使用已经可用的内容（例如LinearGradientBrush作为替代技术）为您完成此工作。

喜欢的东西;

<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>

结果;

为了便于将来参考，通常您希望在向SO等QA网站上寻求帮助之前至少先付出一些努力。无论如何，希望这会有所帮助，欢呼。

Answer 2

您可以将Grid.Background属性设置为任何画笔类型，包括ImageBrush（如果需要图像）或LinearGradiantBrush（可以设置为生成简单条纹）。天真地：

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

或者条纹：

<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>

在真实的应用程序中，您只想在正常对比度模式下使用画笔，并在高对比度模式下回退到默认背景。为此，将Background作为ThemeResource，然后在Default ThemeDictionary中提供条带画笔，并使用HighContrast ThemeDictionary中的默认画笔。

在页面的Xaml中：

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

在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>