Wie überlagern Sie ein Rechteck auf ein Bild in WPF

Möchte ich platziere ein statisches Rechteck auf einem Bild.

Rechteck sollte ein Prozentsatz der Größe des Bildes (80%), unabhängig von der Größe des Bildes.

Habe ich versucht, das Bild in ein Canvas-Bereich und als Leinwand hintergrund, aber dann kann ich nicht das Bild zu füllen, der Umgebung.

<Canvas Grid.Row="1" Grid.Column="0">
    <Canvas.Background>
        <ImageBrush ImageSource="{Binding Path=Image1}"/>
    </Canvas.Background>
 </Canvas>
Brauchen Sie das Bild, um die Größe dynamisch nach der Ressource oder sind Sie einer festen Größe oder dehnen zu füllen, die einem anderen Bereich?
Die Bilder sind immer die gleiche Größe in Pixel, aber der verfügbare Platz in der Ansicht ist dynamisch.

InformationsquelleAutor adrianm | 2009-10-13

  1. 4

    Steckte es in ein raster und dann legen Sie das Rechteck in der gleichen Zeile und Spalte. Und einen Konverter verwenden zu 80% die Größe.

    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# (Konverter):

    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
}
    Danke. Wusste nicht, dass mehrere Elemente in einem grid-Zelle überlappen. Ich werde es versuchen
    Es gibt eine einfachere Möglichkeit als diese (kein code notwendig), aber Sie haben keine Antwort auf meine Frage in den Kommentaren auf Ihre original-Beitrag.
    Getestet und es funktioniert einwandfrei. Markiert es als Antwort. Lieber codebehind verwenden anstelle von IValueConverter für spezielle Umbauten wie diesen. DependencyPropertyDescriptor.FromProperty(Bild.ActualHeightProperty, typeof(Bild)).AddValueChanged( Image1, (sender, args) => { Image1Rect.Höhe = (sender as Image).ActualHeight*0.9; });

    InformationsquelleAutor Carlo

  2. 3

    Hier ist ein Weg, können Sie es mit reinem XAML mit einem DrawingBrush zu füllen, die darüber liegenden Rechteck nur teilweise:

    <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>
    Das ist auch eine gute Lösung, welche gut funktioniert. Ich habe die Bürste, um einen Stift zu sehen nur die Rechteck-Kontur.

    InformationsquelleAutor Drew Marsh

Schreibe einen Kommentar