Entwickler-Ecke

WPF / Silverlight - Bild verdeckt Rahmen


AndreasK - Mi 31.05.17 11:31
Titel: Bild verdeckt Rahmen
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



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 - 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 - Mi 31.05.17 13:26

Funktioniert leider auch nicht.


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

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 [https://msdn.microsoft.com/de-de/library/ms751709(v=vs.110).aspx]


AndreasK - Mi 31.05.17 16:49

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 - 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 [https://msdn.microsoft.com/de-de/library/system.windows.controls.panel.zindex.aspx] kannst du dann bestimmen, welches Element dann im Vordergrund sein soll.


jfheins - Mi 31.05.17 22:04

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? [https://stackoverflow.com/a/325003]
wird einfach ein CustomControl abgeleitet, das genau deine Anforderungen erfüllen sollte ...?

Moderiert von user profile iconTh69: URL-Titel hinzugefügt.


AndreasK - Do 01.06.17 18:28

Hallo
Danke für eure Hilfe, habs geschafft.

OpacityMask ist das Stichwort.


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>