Windows 8 Image UniformFill centrato

Question

Ho un piccolo problema, ho una voce di gruppo che voglio dare un'immagine di sfondo che dovrebbe scalare mantenendo le sue dimensioni corrette ma per impostazione predefinita mostra l'immagine in alto a sinistra, voglio che immagine da centrare.

Ecco un'illustrazione per spiegare ulteriormente il mio problema. (La parte grigia è ciò che è ritagliato)

E ho questo XAML

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

Answer 1

sono riuscito a risolvere il mio problema, ho fatto l'immagine più grande di quanto il contenitore è stato messo in e allineato verticalmente al centro.

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

L'overflow dell'immagine era invisibile :)

Answer 2

ho scritto un comportamento per Silverlight/Windows Phone che tratta una situazione simile. L'immagine che devo mostrare può essere più grande o più alta e devo mostrarla in un quadrato.

Il comportamento calcola il rapporto larghezza/altezza sia del contenitore che dell'immagine. A seconda di quale è il più grande/più alto, ridimensiono il controllo Immagine per avere questo effetto di ritaglio con il controllo genitore.

Ecco un esempio di XAML da utilizzare con il mio comportamento.

<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> 

Ecco un estratto dal codice C#. Il codice completo può essere trovato qui: 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

Nel caso la dimensione dell'immagine sorgente è sconosciuta in anticipo ho dovuto usare diversi trucco:

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