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



BeitragVerfasst: Mi 31.05.17 10:31 
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


ausblenden 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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Moderator
Beiträge: 4076
Erhaltene Danke: 845

Win7
C++, C# (VS 2015/17)
BeitragVerfasst: Mi 31.05.17 11:27 
Hallo,

versuche mal bei dem StackPanel oder Image die Eigenschaft Margin zu setzen (also den linken Rand setzen).
AndreasK Threadstarter
Hält's aus hier
Beiträge: 7



BeitragVerfasst: Mi 31.05.17 12:26 
Funktioniert leider auch nicht.
Th69
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Moderator
Beiträge: 4076
Erhaltene Danke: 845

Win7
C++, C# (VS 2015/17)
BeitragVerfasst: Mi 31.05.17 12:31 
Zeige mal den XAML-Code.
Oder aber probiere mal ein weiteres StackPanel (oder jedes anderes unsichtbare Element) links einzufügen:
ausblenden 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 Threadstarter
Hält's aus hier
Beiträge: 7



BeitragVerfasst: Mi 31.05.17 15: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
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Moderator
Beiträge: 4076
Erhaltene Danke: 845

Win7
C++, C# (VS 2015/17)
BeitragVerfasst: Mi 31.05.17 16: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
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 868
Erhaltene Danke: 145

Win7
VS 2013, VS2015
BeitragVerfasst: Mi 31.05.17 21: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?
wird einfach ein CustomControl abgeleitet, das genau deine Anforderungen erfüllen sollte ...?

Moderiert von user profile iconTh69: URL-Titel hinzugefügt.
AndreasK Threadstarter
Hält's aus hier
Beiträge: 7



BeitragVerfasst: Do 01.06.17 17:28 
Hallo
Danke für eure Hilfe, habs geschafft.

OpacityMask ist das Stichwort.

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