Windows 8 Image UniformFill centered

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

Вот иллюстрация, чтобы объяснить мою проблему. (серая часть - это то, что обрезано)

My problem

И у меня этот XAML

<Image Source="/url/to/image.jpg" Stretch="UniformToFill"/>

Ответы

Ответ 1

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

<Grid HorizontalAlignment="Left" Width="250" Height="125">
    <Image Source="/url/to/image.jpg" Stretch="UniformToFill" Height="250" Margin="0" VerticalAlignment="Center"/>
</Grid>

Переполнение изображения было невидимым:)

Ответ 2

Я написал поведение для Silverlight/Windows Phone, которое относится к аналогичной ситуации. Изображение, которое я должен показать, может быть больше или выше, и я должен отображать его в квадрате.

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

Вот пример XAML для использования с моим поведением.

<Border Height="150" Width="150">
    <Image Source="{Binding BitmapImage}" Stretch="UniformToFill"
            HorizontalAlignment="Center" VerticalAlignment="Center">
        <i:Interaction.Behaviors>
            <b:FillParentBehavior />
        </i:Interaction.Behaviors>
    </Image>
</Border>

Вот выдержка из кода С#. Полный код можно найти здесь: FillParentBehavior.cs

double width = this.AssociatedObject.Width;
double height = this.AssociatedObject.Height;
var parentSize = new Size(this.parent.ActualWidth, this.parent.ActualHeight);
var parentRatio = parentSize.Width / parentSize.Height;

// determine optimal size
if (this.AssociatedObject is Image)
{
    var image = (Image)this.AssociatedObject;
    if (image.Source is BitmapImage)
    {
        var bitmap = (BitmapImage)image.Source;
        var imageSize = new Size(bitmap.PixelWidth, bitmap.PixelHeight);
        var imageRatio = imageSize.Width / imageSize.Height;
        if (parentRatio <= imageRatio)
        {
            // picture has a greater width than necessary
            // use its height
            width = double.NaN;
            height = parentSize.Height;
        }
        else
        {
            // picture has a greater height than necessary
            // use its width
            width = parentSize.Width;
            height = double.NaN;
        }
    }
}

this.AssociatedObject.Width = width;
this.AssociatedObject.Height = height;

Ответ 3

Если размер исходного изображения неизвестен заранее, мне пришлось использовать другой трюк:

<Border Width="250" Height="250">
    <Border.Background>
        <ImageBrush ImageSource="/url/to/image.jpg"
                    Stretch="UniformToFill"/>
    </Border.Background>
</Border>