Windows 8 Image UniformFill centered

Question

私はちょっとした問題がありますが、それは正確な寸法を維持しながら縮尺を変えなければならない背景画像を与えたいというグループ項目がありますが、デフォルトでは左上から画像が表示されます。センタリングされる画像。

ここに私の問題をさらに説明するための図があります。私は私の問題を解決するために管理

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

Answer 1

、私はそれが中に置かれたコンテナよりも画像を大きくして

（灰色の部分が切り取られているものである）そして、私は、このXAMLを持っていますそれを中心に垂直に整列させた。

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

画像のオーバーフローが見えなかった:)

Answer 2

私は似たような状況を扱うのSilverlight/Windowsの携帯電話のための行動を書きました。私が見せなければならない画像は、より大きくても高くてもよく、私はそれを正方形に表示しなければならない。

この動作では、コンテナと画像の幅と高さの比率が計算されます。最大値と最大値のどちらに応じて、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; 

Answer 3

場合、元画像のサイズは、私は別のトリックを使用していた事前に不明である：

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