如何覆蓋WPF中圖像上的矩形

無論圖像大小如何，矩形都應該是圖像大小的百分比（如80％）。

我試圖把圖像放在畫布上並作爲畫布背景，但後來我無法獲取圖像以填充周圍區域。

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

來源

2009-10-13 adrianm

您是否需要根據資源動態調整圖像大小，或者您是否設置了固定大小或拉伸以填充另一個領域？ – 2009-10-13 14:17:34

圖像的像素大小始終相同，但視圖中的可用空間是動態的。 – adrianm 2009-10-13 19:48:07

將它放在網格中，然後將矩形放在同一行和列中。並使用轉換器獲得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 
}

來源

2009-10-13 15:06:38 Carlo

謝謝。不知道網格單元格中的多個項目會重疊。我會試試 – adrianm 2009-10-13 15:31:27

有一個比這更簡單的方法（沒有必要的代碼），但是你沒有在你原來的帖子的評論中回答我的問題。 – 2009-10-13 17:29:10

經過測試，工作正常。標記爲答案。更喜歡使用代碼隱藏而不是IValueConverter來進行像這樣的特殊轉換。 DependencyPropertyDescriptor.FromProperty（Image.ActualHeightProperty的typeof（圖像））AddValueChanged（ IMAGE1，（發件人，參數）=> { Image1Rect.Height =（發送者爲圖像）.ActualHeight * 0.9; }）。 – adrianm 2009-10-14 09:32:45

這裏有一個方法，你可以使用一個DrawingBrush填補上覆矩形只是部分純XAML做到這一點：

<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>

來源

2009-10-14 13:55:37

這也是一個很好的解決方案。我將筆刷更改爲筆以查看矩形輪廓。 – adrianm 2009-10-14 19:01:07

如何覆蓋WPF中圖像上的矩形

回答

相關問題