2

我正在使用 Silverlight 3.0 Image 控件，将其设置为 Stretch property="Uniform"。除非我弄错了，否则 Stretch="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>
4

3 回答 3

6

因此，垂直 StackPanel 的工作方式是在垂直轴上以无限大小测量其子级，有效地对孩子说：“你可以随心所欲”。它不会垂直限制孩子的大小（尽管它确实将其限制在水平方向）。

Stretch=Uniform 属性在没有明确设置大小的图像上工作的方式是：“在保持纵横比的同时，在大小限制范围内尽可能大”。

现在，当您将这两者结合起来时，您将得到一个仅在水平轴上受到约束的图像；它占用所有水平可用空间并垂直调整大小以保持纵横比。

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

想象一下，您有一个宽高比为 2:1 的图像（高是宽的两倍）。它有 Stretch=Uniform 并且没有明确的 Width/Height 设置。你把它放在一个大小为 100x100 的 StackPanel 中。图像将获得 100xInfinity 的大小约束。它将首先在水平轴上调整大小并占用所有可用空间；100 像素。然后它会看到它具有 2:1 的纵横比，因此垂直大小为 200 像素。因此，您最终会在 100x100 的 StackPanel 中获得大小为 100x200 的图像。因此 StackPanel 被迫将其子项剪辑到可用空间。

于 2009-09-16T05:08:43.003 回答
0

我只是用一个高大的图像尝试了这个，它工作得很好。我怀疑问题出在 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 以便我们查看上下文？

于 2009-09-11T18:31:28.130 回答
0

这很可能是由于图像的宽度被设置（由其父容器）而不是其高度引起的。它正在均匀拉伸，但它的高度不受限制，并且正在被剪裁。

如果这没有帮助，请为其容器提供 XAML。

于 2009-09-11T18:38:45.120 回答