在letterboxed缩略图中隐藏黑条

Question

我有一个用户控件，显示缩略图和下面的一些文字。我使用的API会返回一个480x360的letterboxed缩略图。我试图隐藏它，这样用户只能看到图像，而顶部和底部没有两个45px高的条形图。以下是缩略图的尺寸：

用户控制xaml：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition x:Name="ThumbnailRow"/>
        <RowDefinition Height="1*"/>
    </Grid.RowDefinitions>
    <Image Source="..." Stretch="UniformToFill" VerticalAlignment="Center"/>
    <Grid Grid.Row="1" Background="Gray">
            <TextBlock Padding="24" Text="..." HorizontalAlignment="Left"/>
    </Grid>
</Grid>

在我的代码隐藏中，我尝试修改ThumbnailViewRow的高度以隐藏黑条：

private double GetScreenWidth()
{
    double scaleFactor = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;  
    double width = scaleFactor * Window.Current.Bounds.Width;

    return width;
}

private double GetAdjustedThumbnailRowHeight()
{
    // 38 represents 19px left & right margins in ListView
    double adjustedWidth = GetScreenWidth() - 38; 
    double projectedHeight = (360 * adjustedWidth) / 480;

    // in a full 480x360 image, I would need to shave 45 px from the top
    // and bottom. In some resolutions, the image is scaled so I have
    // to find the proportionate amount to trim
    double toTrim = (projectedHeight * 90) / 360;

    return projectedHeight - toTrim;
}

private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    ThumbnailViewRow.Height = new GridLength(GetAdjustedThumbnailRowHeight());
}

以上代码仅略有作用;两端的大部分钢筋仍然可见。在480x800设备上，我能够调整一些数字以使缩略图正确显示。在这种情况下的修复是将toTrim乘以1.55，但我不知道这对于具有其他分辨率的设备有多好。我没有其他设备可以测试，也没有WP模拟器。

这个问题的原因可能是一个令人尴尬的数学错误，还是XAML工作方式的微妙之处？如何让我的方法在不同的分辨率下正常工作？

这是我在WPF中制作的一个快速工作示例。 （注意明确设置的高度和宽度）。

<Grid Margin="0, 30, 0, 0">
    <Grid.RowDefinitions>
        <!-- 360 - 45 - 45 = 270 -->
        <RowDefinition Height="270"/>
        <RowDefinition Height="30"/>
    </Grid.RowDefinitions>
    <Image Source="..." VerticalAlignment="Center" Width="480" Stretch="UniformToFill"/>
</Grid>

Answer 1

像这样使用图像的剪辑属性

<Image x:Name="myimage" Stretch="None" Source="/Assets/my_image.jpg">
    <Image.Clip>
        <RectangleGeometry Rect="0, 45, 480, 435"></RectangleGeometry>
    </Image.Clip>
</Image>

RECT是您想要显示的图像的矩形部分。