Bild verdeckt Rahmen

AndreasK · Hält's aus hier Beiträge: 7

Hallo zusammen

Mein Problem ist, daß das Bild immer den Rahmen verdeckt.
Hat jemand eine Idee wie ich das lösen kann.
Habe nichts gefunden wie ich es in diesem Template bewerkstelligen soll.
Ich denke das es eventuell mit einem StackPanel nicht funktioniert.
Danke für die Hilfe

user defined image

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

       <ControlTemplate x:Key="mein Button" TargetType="Button">
            <Border Name="myBorder" CornerRadius="20" BorderThickness="5" BorderBrush="Black">
                <StackPanel Orientation="Horizontal" Background="Yellow">


                    <Image Source="Micky.jpg" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
      
                    </Image>

                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </StackPanel>
            </Border>
        </ControlTemplate>


 <Button Content="klick mich" Template="{StaticResource  mein Button}" Width="200" Height="100" Margin="0 0 0 0" Grid.Row="1" Grid.Column="1"/>

Th69 · Verfasst: Mi 31.05.17 12:27

Hallo,

versuche mal bei dem StackPanel oder Image die Eigenschaft Margin zu setzen (also den linken Rand setzen).

AndreasK · Hält's aus hier Beiträge: 7

Funktioniert leider auch nicht.

Th69 · Verfasst: Mi 31.05.17 13:31

Zeige mal den XAML-Code.
Oder aber probiere mal ein weiteres StackPanel (oder jedes anderes unsichtbare Element) links einzufügen:

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:

<StackPanel Orientation="Horizontal" Background="Yellow">

    <StackPanel Width = "20"/>

    <Image Source="Micky.jpg" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
    
    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"/>
</StackPanel>

PS: Statt Margin könntest du auch Padding bei der Border verwenden: Übersicht über Alignment, Margin und Padding

AndreasK · Hält's aus hier Beiträge: 7

Hallo

Ich weiß nicht genau ob ich das alles richtig verstehe, aber es geht mir nicht darum das Bild so zurecht zu rücken bis es irgenwie passt sondern
das der Rahmen im Vordergund ist und nicht das das Bild, also der Rahmen sollte das Bild an den Ecken verdecken.

Th69 · Verfasst: Mi 31.05.17 17:33

Achso, jetzt verstehe ich - das hättest du gleich schreiben sollen ;-)

Dann solltest du evtl. ein Canvas (oder anderes Panel) nehmen und Border und Inhalt als zwei getrennte Unterelemente an der gleichen Position zeichnen und mittels des Panel.ZIndex kannst du dann bestimmen, welches Element dann im Vordergrund sein soll.

jfheins · Beiträge: 918 Erhaltene Danke: 158 Win 10 VS 2013, VS2015

Moin, ich hab das gerade mal ausprobiert, um kam nicht auf eine schnelle & einfache Lösung. Aber bei SO: How to make the contents of a round-cornered border be also round-cornered?
wird einfach ein CustomControl abgeleitet, das genau deine Anforderungen erfüllen sollte ...?

Moderiert von Th69: URL-Titel hinzugefügt.

AndreasK · Hält's aus hier Beiträge: 7

Hallo
Danke für eure Hilfe, habs geschafft.

OpacityMask ist das Stichwort.

markieren

XML-Daten

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

<ControlTemplate x:Key="MickyButton" TargetType="Button">
            <Border BorderBrush="Black" BorderThickness="2" Background="Yellow"  CornerRadius="20"  Grid.Column="1">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Border Name="CornersMask" Background="White" CornerRadius="20,0,0,20"/>
                    <Image Source="Micky.jpg" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" >
                        <Image.OpacityMask>
                            <VisualBrush Visual="{Binding ElementName=CornersMask}"/>
                        </Image.OpacityMask>
                    </Image>
                    <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1"/>
                </Grid>
            </Border>
        </ControlTemplate>

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme