在 Windows 商店应用程序中添加条纹背景答案

【问题标题】：Add striped background in windows store app在 Windows 商店应用程序中添加条纹背景
【发布时间】：2015-03-11 12:15:25
【问题描述】：

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

如何在 xaml 中将纯色背景更改为此类条纹背景。 ?

【问题讨论】：

老兄，这背景太糟糕了。请不要使用它。

标签： c# xaml windows-store-apps

【解决方案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 网站上寻求帮助之前，您至少需要付出一些努力。无论如何，希望这会有所帮助，干杯。

【讨论】：

LinearGradientBrush 的优点。这适用于条纹的特定情况。现在修复你的 sn-p，这样它就不会破坏高对比度模式，所以我可以投票：)
@RobCaplan-MSFT 嗯，不用担心，我什至没有从问题中考虑到这一点，所以 +1 你的方式只是因为如此积极并在这里帮助像他这样的人。还要感谢您在此基础上进行详细说明。给猫剥皮的方法总是不止一种，这对帮助人们学习新东西很有帮助。 ;)
然而，没有必要复制某人的答案并将其附加到您自己的答案中，而且形式很差。明白我的意思了吗？干杯罗伯。
只是为了完整性。我不希望有人遇到剪切和粘贴问题，因为我们有两个半答案，而且在我出门之前你还没有更新。
感谢大家的帮助。

【解决方案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>

在实际应用中，您可能只想在正常对比度模式下使用画笔，而在高对比度模式下回退到默认背景。为此，将背景设置为 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>

【讨论】：