调整 XAML Grid.Background 图像的大小

Question

我有一段简单的 XAML，它布置了一组图块，每个图块都有一个背景图像图标。

                <Grid.Background>
                    <ImageBrush Stretch="None" 
                                ImageSource="{Binding ImageSource}" 
                                AlignmentY="Center" 
                                AlignmentX="Center"/>
                </Grid.Background>

这很好用，除了背景图像完美地填充了正方形。我确信 XAML 认为这很好，但实际上它需要大约一半大小才能匹配规范。

我尝试了几件事，包括向网格添加边框（截断背景图像，保持尺寸但在侧面和顶部将其截断）以及在各个位置添加边距和填充。

我也尝试将其设为正常，但所有内容都漂浮在此背景图像之上，因此这不是一个选项。

最后我要提一下这是一个使用 Windows 运行时的 Windows 8 Windows 应用商店应用程序，因此我在这里无法使用 WPF 中的某些功能（例如 ViewPort）。

问题：如何调整 XAML 网格背景图像的大小/尺寸？

旁注：我认为解决方案可能在于转换......？

更新：这里是每个海报请求的预期结果。尽管这里看起来没有浮动在背景图像上，但在其他地方，文本浮动在背景上。这就是为什么它需要是一个而不是一个元素。

现在的样子：

它应该是什么样子：

Answer 1

一个比例渲染转换应该做你想要的：（你可能需要设置 CenterX 和 CenterY 让它看起来完全符合你想要的样子）

    <Grid.Background>
        <ImageBrush Stretch="None" 
                        ImageSource="{Binding ImageSource}" 
                        AlignmentY="Center" 
                        AlignmentX="Center">
            <ImageBrush.Transform>
                <ScaleTransform ScaleX=".5" ScaleY=".5"/>
            </ImageBrush.Transform>
        </ImageBrush>
    </Grid.Background>

Answer 2

您可以将 ImageBrush 压缩到您的自定义 ViewPort 中，使其具有您想要的大小。

有一些信息：http://keyvan.io/viewbox-and-viewport-in-windows-presentation-foundation

如果你想把它减半，那么你的开始 x 和 y 应该是 0.25，结束 x,y 应该是 0.75。 这样的事情应该可以解决问题：

            <Grid.Background>
                <ImageBrush Stretch="None" 
                            ImageSource="{Binding ImageSource}" 
                            AlignmentY="Center" 
                            AlignmentX="Center"
                            Viewport="0.25, 0.25, 0.75, 0.75"/>
            </Grid.Background>

//可能为 Win8 编辑：

<Grid>
<Grid>
    <Grid.RenderTransform>
        <ScaleTransform RenderTransformOrigin="0.5, 0.5" ScaleX="0.5" ScaleY="0.5" />
    </Grid.RenderTransform>

    <Grid.Background>
    <ImageBrush Stretch="None" 
        ImageSource="{Binding ImageSource}" 
        AlignmentY="Center" 
        AlignmentX="Center"/>
    </Grid.Background>
</Grid>
</Grid>