xaml - Windows 8 画像 UniformFill 中央揃え

Question

少し問題があります。正しい寸法を維持しながら拡大縮小する必要がある背景画像を指定したいグループ項目がありますが、デフォルトでは左上から画像が表示されます。画像を中央に配置します。

これは、私の問題をさらに説明するための図です。(灰色の部分が切り取られたものです)

そして、私はこのXAMLを持っています

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

Answer 1

私は問題を解決することができました。画像を配置されたコンテナよりも大きくし、中央に垂直に配置しました。

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

画像のオーバーフローは見えませんでした:)

Answer 2

ソース画像のサイズが事前に不明な場合は、別のトリックを使用する必要がありました。

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

Answer 3

同様の状況を扱う 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>

以下は、C# コードからの抜粋です。完全なコードは次の場所にあります: 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;