wpf - 如何在 WPF 中的图像上覆盖矩形

Question

我想在图像顶部放置一个静态矩形。

无论图像大小如何，矩形都应该是图像大小的百分比(例如 80%)。

我尝试将图像放入 Canvas 并作为 Canvas 背景，但无法让图像填充周围区域。

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

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
}