如何在WPF中将矩形叠加在图像上

Question

我想在一张图片的上方放置一个静态的矩形。

这个矩形应该是图片尺寸的百分比（例如80%），无论图片大小如何都应该保持相同。

我已经尝试将图片放在Canvas中作为背景，但是我无法让图片填满周围区域。

<Canvas Grid.Row="1" Grid.Column="0">
    <Canvas.Background>
        <ImageBrush ImageSource="{Binding Path=Image1}"/>
    </Canvas.Background>
 </Canvas>

- adrianm

---

您需要根据资源动态调整图像大小，还是设置固定大小或拉伸以填充另一个区域？ - Drew Marsh

图片的像素大小始终相同，但视图中可用空间是动态的。 - adrianm

Answer 1

将其放入网格中，然后将矩形放在同一行和列中。使用转换器将其大小缩小80%。

XAML：

<Window.Resources>
    <local:RectangleSizeConverter x:Key="RectangleSizeConverter" />
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Image x:Name="image" Grid.Row="0" Grid.Column="0" Source="C:\on.jpg" />
    <Rectangle Height="{Binding ElementName=image, Path=ActualHeight, Converter={StaticResource RectangleSizeConverter}}" 
               Width="{Binding ElementName=image, Path=ActualWidth, Converter={StaticResource RectangleSizeConverter}}" 
               Fill="Red" Opacity=".5" />
</Grid>

C#（转换器）：

public class RectangleSizeConverter : IValueConverter
{
    #region IValueConverter Members

    public object Convert(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return System.Convert.ToDouble(value) * .8;
    }

    public object ConvertBack(object value, System.Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new System.NotImplementedException();
    }

    #endregion
}

- Carlo

---

谢谢。我不知道一个网格单元中有多个项目会重叠。我会尝试一下。 - adrianm

有一种比这更简单的方法（无需编写代码），但您没有在原始帖子的评论中回答我的问题。 - Drew Marsh

已测试并且正常工作。将其标记为答案。对于特殊转换，如此类转换，更喜欢使用CodeBehind而不是IValueConverter。 DependencyPropertyDescriptor.FromProperty（Image.ActualHeightProperty，typeof（Image））。AddValueChanged（ Image1，（sender，args）=> { Image1Rect.Height =（sender as Image）.ActualHeight * 0.9; }）; - adrianm

Answer 2

以下是使用纯XAML的方法，使用DrawingBrush来部分填充覆盖的矩形：

<Grid>          
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Image Source="http://sstatic.net/so/img/logo.png" Stretch="None" />
    <Rectangle>
        <Rectangle.Fill>
            <DrawingBrush Viewbox="0,0,1,1" ViewboxUnits="Absolute">
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="#66FF0000">
                        <GeometryDrawing.Geometry>
                            <RectangleGeometry Rect="0,0,.9,.9" />
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
         </Rectangle.Fill>
     </Rectangle>
</Grid>

- Drew Marsh

---

那也是一个很好的解决方案，运行良好。我将画刷更改为笔，只是为了看到矩形轮廓。 - adrianm