使用ImageBrush设置网格背景图片

Question

我希望在XAML中使用ImageBrush将背景应用到一个Grid。我已经给brush设置了一个x:Key，并希望在我的grid中引用它。不幸的是，它根本没有以图像作为背景出现。

<Window.Resources>
    <ImageBrush ImageSource="/MAQButtonTest;component/images/bird_text_bg.jpg" x:Key="BackgroundSponge" />
    <Style TargetType="TextBlock">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
    </Style>
    <ControlTemplate TargetType="Button" x:Key="ButtonTemplate">
        <Grid Width="444" ShowGridLines="False" SnapsToDevicePixels="True" Background="{DynamicResource BackgroundSponge}">
            <Grid.RowDefinitions>
                <RowDefinition Height="51" />
                <RowDefinition Height="36" />
            </Grid.RowDefinitions>
            <Grid Grid.Row="0" Background="#286c97">

            </Grid>
            <Grid Grid.Row="1" Background="#5898c0">
                <ContentPresenter Grid.Row="0" />
            </Grid>
        </Grid>
    </ControlTemplate>
</Window.Resources>

我认为我可能以错误的方式提到它了，我尝试使用DynamicResource和StaticResource。

- Luke

---

你在项目中如何包含背景图像？如果它被包含为“Content”，那么我期望你的ImageSource看起来更像这样：ImageSource="pack://application:,,,/component/images/bird_text_bg.jpg"。 - paul

如果您直接指定它（而不是使用资源），它会显示出来吗？ - Tim

这是个奇怪的事情。我已经将其设置为内容并在Visual Studio中添加了图像。我只是在属性窗格中使用Visual Studio中的椭圆按钮来设置“ImageSource”，然后它自动为我生成了该路径。 - Luke

不，如果我直接引用图像 c:/myfolder/bird_text_bg.jpg，它也不会显示出来。 - Luke

Answer 1

我经常使用这种方法。如果将图像添加到项目中作为资源，可以通过相对路径引用它们，就像这样。

<ImageBrush x:Key="play" ImageSource="../Images/Buttons/Play.png" />

然后引用图像刷：

<Border Background="{StaticResource play}"/>

- erodewald

---

我想补充说，对我来说最重要的部分是“如果图像被添加到项目作为资源”，因为在我的情况下它们是作为内容添加的，这就是我遇到问题的原因。谢谢！ - Nikola

Answer 2

我一直以来都是这样做的：

<Grid>
   <Grid.Background>
      <ImageBrush ImageSource="/Resources/Images/BG_BlankOptimized.png"/>
   </Grid.Background>
</Grid>

或者，如果使用ImageBrush资源调用它，可以更像Paul建议的使用StaticResource来调用该样式。

- Chris W.

Answer 3

在您的主网格中，您有内部子元素覆盖了外部网格的所有可用空间，这就是为什么您无法看到背景的原因。

 <Grid Width="444"
          Height="500" 
          Background="{DynamicResource BackgroundSponge}"
          ShowGridLines="False"
          SnapsToDevicePixels="True">
        <Grid.RowDefinitions>
            <RowDefinition Height="51" />
            <RowDefinition Height="36" />
        </Grid.RowDefinitions>
        <Grid Grid.Row="0" Background="#286c97"  Opacity="0.2" Margin="5"/>
        <Grid Grid.Row="1" Background="#5898c0" Opacity="0.2" Margin="5">
            <ContentPresenter Grid.Row="0" />
        </Grid>
    </Grid>

仅拥有宽度是可以的，但高度呢？如果你只是将高度调大，超出子项的部分会被显示。

或者更好的做法是在子项内部添加内边距。

margin="5"

或者让子项变得透明，使用

opacity="0.2"

- JSJ

---

谢谢！我都快疯了 :) - Luke

当我使用硬盘上的绝对路径导入一张图片时，它们会自动导出吗？ - BlueWizard

任何外部资源都不会被导出，因为它们不存在于内部对象树中。 - JSJ