Silverlight Image Stretch =「Uniform」Portrait for Size Images

Question

我正在使用Silverlight 3.0圖像控件，將其設置爲Stretch property =「Uniform」。除非我錯了，Stretch =「Uniform」的預期行爲是它應該縮放圖像，保持縱橫比，按需要放置信箱。這適用於具有橫向取向的圖像，因爲它們可以放大以填充空間，保持縱橫比而不切斷任何圖像。對於更垂直或「縱向」方向的圖像來說，這是完全失敗的。除了放大以適應圖像控制之外，它們實際上會縮放高度限制，以至於只能看到圖像的中間部分，並且頂部和底部被截斷。它就好像控件只在縮放時使用寬度，並忘記檢查高度？

這是圖像控制中的錯誤，還是我缺少或錯誤設置屬性？要重現，找到/創建一個'肖像'縱橫比（高於它的寬度）的圖像，並創建一個與拉伸=「統一」的圖像。

****更新請求的XAML ****** 請注意，大小不明確的原因是爲了允許全屏和縮放。

<Grid x:Name="LayoutRoot"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="9"/> 
     <ColumnDefinition Width="30"/> 
     <ColumnDefinition Width="30"/> 
     <ColumnDefinition Width="*"/> 
     <ColumnDefinition Width="30"/> 
     <ColumnDefinition Width="50"/> 
     <ColumnDefinition Width="30"/> 
     <ColumnDefinition Width="9"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="30" /> 
    </Grid.RowDefinitions> 

<Border BorderBrush="Black" Grid.Row="0" Grid.ColumnSpan="8" BorderThickness="1, 1, 1, 0"> 
    <Border BorderBrush="{StaticResource blackStatusMapLGB}" BorderThickness="9,9,9, 0"> 
     <Border BorderBrush="Gray" BorderThickness="1, 1, 1, 0"> 
     <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> 
       <MediaElement Height="Auto" Width="Auto" Visibility="Collapsed" AutoPlay="true" Stretch="Fill" MediaFailed="SilverlightMediaPlayer_MediaFailed" Name="previewMediaElement"/> 
         <Image Name="imagePreview" Stretch="Uniform"/> 
      </StackPanel> 
     </Border> 
    </Border> 
</Border> 

Answer 1

所以，一個垂直的StackPanel的工作方式是用垂直軸上的無限大小來度量它的孩子，有效地對孩子說：「你可以像你喜歡的那麼高。它不會垂直限制兒童的大小（儘管它會限制水平方向）。

Stretch = Uniform屬性在未設置顯式大小的圖像上工作的方式是：「儘可能在保持縱橫比的同時在尺寸約束內儘可能大」。

現在，當您將這兩者結合使用時，您只能在水平軸上約束圖像;它將水平和垂直尺寸的所有可用空間用於保持高寬比。

此解釋是否有助於您理解爲何看到您所看到的行爲？

想象一下，您的圖像具有2：1的寬高比（是寬度的兩倍）。它有Stretch = Uniform並且沒有明確的寬度/高度設置。你把它放在一個大小爲100x100的StackPanel中。該圖像將獲得100xInfinity的大小限制。它將首先在橫軸上進行尺寸調整，並佔用所有可用空間; 100像素。然後它將會看到它具有2：1的縱橫比，因此將垂直尺寸設置爲200像素。所以你最終在一個100×100的StackPanel中得到一個大小爲100x200的圖像。所以StackPanel被迫將它的孩子剪輯到可用空間。

Answer 2

我剛剛試過這個高圖像，它工作正常。我懷疑問題出在Image元素的容器上 - 它實際上顯示了整個圖像，但是頂部和底部正在被剪掉。

這是我用來測試：

<UserControl 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     x:Class="Temp_Delete.MainPage" 
     Width="640" Height="480"> 

     <Grid x:Name="LayoutRoot" Background="White"> 
      <Image Source="Tall.png" Stretch="Uniform"></Image> 
     </Grid> 
    </UserControl> 

UPDATE：你所有的嵌套的邊框都扔它關閉，因爲它們不具備規定的高度上。我會使用在頂級邊框的圖像刷：

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    x:Class="Temp_Delete.MainPage" 
    Width="640" Height="480"> 

    <Grid x:Name="LayoutRoot"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="9"/> 
      <ColumnDefinition Width="30"/> 
      <ColumnDefinition Width="30"/> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="30"/> 
      <ColumnDefinition Width="50"/> 
      <ColumnDefinition Width="30"/> 
      <ColumnDefinition Width="9"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="30" /> 
     </Grid.RowDefinitions> 
     <Border BorderBrush="Black" Grid.Row="0" Grid.ColumnSpan="8" BorderThickness="1, 1, 1, 0"> 
      <Border.Background> 
       <ImageBrush Stretch="Uniform"/> 
      </Border.Background> 
      <Border BorderBrush="Black" BorderThickness="9,9,9, 0"> 
       <Border BorderBrush="Gray" BorderThickness="1, 1, 1, 0"> 
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center"> 
         <MediaElement Height="Auto" Width="Auto" Visibility="Collapsed" AutoPlay="true" Stretch="Fill" MediaFailed="SilverlightMediaPlayer_MediaFailed" Name="previewMediaElement"/> 
        </StackPanel> 
       </Border> 
      </Border> 
     </Border> 
    </Grid> 
</UserControl> 

可能需要一些調整，以讓所有的邊界，以正確顯示，但您可以設置在容器中的元素填充/保證金，如果這對你很重要。

你可以驗證你的圖像是否在XAML中工作？你可以發佈更多的XAML，以便我們可以看到上下文嗎？

Answer 3

這很可能是由於您的圖像的寬度（由其父容器）設置的，而不是其高度。它正在伸展均勻，但其高度沒有限制，並且正在裁剪。

如果這沒有幫助，請爲其容器提供XAML。