Question

我正在使用Silverlight 3.0 Image控件，设置它的Stretch属性=“Uniform”。除非我弄错了，否则Stretch =“Uniform”的预期行为是它应该根据需要缩放图像，保持纵横比，信箱。这适用于具有横向方向的图像，因为它们可以向上扩展以填充空间，保持纵横比而不会切断任何图像。对于具有更垂直或“纵向”方向的图像，这是完全失败的。它们不是按比例放大以适应图像控制，而是实际缩放超过高度约束，这样您只能看到图像的中间部分，顶部和底部被切掉。它好像控件只在缩放时使用宽度，并忘记检查高度？

这是Image控件中的错误，还是我遗失或错误设置了属性？要重现，请查找/创建具有“纵向”宽高比（高于宽度）的图像，并使用“拉伸”=“均匀”创建图像。

****更新请求的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属性在没有明确大小设置的图像上工作的方式是：“在保持纵横比的同时，在大小限制范围内尽可能大”。

现在，当你将这两者组合在一起时，你的Image只受到水平轴的约束;它需要水平和垂直尺寸的所有可用空间以保持纵横比。

这种解释是否有助于您理解为什么会看到您所看到的行为？

想象一下，你有一个宽高比为2：1的图像（高两倍的宽度）。它具有Stretch = Uniform并且没有明确的Width / Height设置。你把它放在一个大小为100x100的StackPanel中。 Image将获得100xInfinity的大小约束。它将首先在水平轴上放大并占据所有可用空间; 100像素。然后它会看到它具有2：1的宽高比，因此将垂直放大到200像素。因此，您最终会在100x100的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>

更新：所有嵌套边框都将其抛弃，因为它们没有定义的高度。我在顶层边框上使用了ImageBrush：

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

Silverlight图像拉伸=肖像尺寸图像的“均匀”失败

3 个答案: