在带信箱的缩略图中隐藏黑条答案

【问题标题】：Hiding black bars in letterboxed thumbnail在带信箱的缩略图中隐藏黑条
【发布时间】：2014-08-04 01:20:47
【问题描述】：

我有一个用户控件，它显示缩略图和下方的一些文本。我正在使用的 API 返回一个 480x360 带信箱的缩略图。我试图隐藏它，这样用户只能看到没有顶部和底部两个 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>

【问题讨论】：

标签： c# xaml windows-phone windows-phone-8.1

【解决方案1】：

像这样使用图像的 Clip 属性

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

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

【讨论】：

太棒了！解决方案是剪辑未拉伸的图像并放入ViewBox。非常感谢！