Отрегулируйте размер сетки XAML.фоновое изображение

У меня есть простой фрагмент XAML, который раскладывает группу плиток, каждая из которых имеет значок фонового изображения. 

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

Это работает нормально, за исключением того, что фоновое изображение идеально заполняет квадрат. Я уверен, что XAML думает, что это нормально, но на самом деле он должен быть примерно вдвое меньше, чтобы соответствовать спецификации.

Я попробовал несколько вещей, включая добавление границы к сетке (которая усекает фоновое изображение, сохраняя размеры, но отрезая его по бокам и сверху) и добавление полей и прокладки в разных местах.

Я также играл с тем, чтобы сделать это нормальным, но все плавает поверх этого фонового изображения, так что это не вариант.

Наконец, я должен упомянуть, что это приложение Windows 8 для магазина Windows, использующее среду выполнения Windows, поэтому некоторые функции в WPF мне здесь недоступны (например, ViewPort).

Вопрос: Как настроить размер / размеры фонового изображения сетки XAML?

Sidenote: я думаю, что решение может заключаться в преобразовании... ?

Обновление: по запросу плаката вот каким должен быть ожидаемый результат. Несмотря на то, что кажется, что здесь нет никакого плавающего над фоновым изображением, в других местах текст плавает над фоном. Вот почему он должен быть а, а не элементом.

Как это выглядит сейчас:

Текущее фоновое изображение

Как это должно выглядеть:

Как я хочу, чтобы это выглядело

2 6
wpf xaml windows-8.1 windows-runtime

2 ответа:

Масштабный рендер transfrom должен делать то, что вы хотите: (возможно, Вам потребуется установить 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>
8

Вы можете втиснуть ImageBrush в свой пользовательский видовой экран, чтобы он принял нужный размер.

Есть кое-какая информация: 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>
1