Как наложить прямоугольник на изображение в WPF - PullRequest
Новая
       23

Как наложить прямоугольник на изображение в WPF

2 голосов
/ 13 октября 2009

Я хочу разместить статический прямоугольник поверх изображения.

Прямоугольник должен быть в процентах от размера изображения (например, 80%) независимо от размера изображения.

Я пытался поместить изображение на холст и в качестве фона холста, но тогда я не могу получить изображение, чтобы заполнить окружающую область. 

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

Ответы [ 2 ]

4 голосов
/ 13 октября 2009

Поместите его в сетку, а затем поместите прямоугольник в ту же строку и столбец. И использовать конвертер, чтобы получить 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
}
3 голосов
/ 14 октября 2009

Вот способ, которым вы можете сделать это с помощью чистого 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>
...