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

Question

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

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

Answer 1

您可以将 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，然后在默认 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>

Answer 2

就我个人而言，如果我不需要的话，我不喜欢添加图像等元素，并且让这些类型的设计添加更加灵活，以防我将来想用动画等东西来播放它们，或者改变动态模式，或者使它们成为资源，或者不得不担心更改文件路径或其他东西，等等。

因此，例如，不要使用实际图像，让您的 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 这样的质量检查网站上寻求帮助之前至少表现出一些努力。无论如何，希望这对您有所帮助，干杯。

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

Add striped background in windows store app

c#

xaml

windows-store-apps