WPF - Linken und rechten Rand eines Borders farbig füllen

Guten Abend,

sorry mir ist kein anderer Titel eingefallen für das Thema. Ich versuche gerade folgendes "Design-Problem" zu lösen.

Wie unten in dem Bild zu sehen habe ich ein Border mit einem Corner-Radius von 10. Zudem habe ich die Ecken farbig füllen wollen.. das habe ich auch wiederum mit einem CornerRadius gemacht, damit ich die linken Ecken abrunden kann und die rechten Ecken nicht.

Mein Problem ist, dass zwischen dem schwarzen Rahmen des und dem farbigen Bordner eine kleine Lücke bleibt die weiß ist.. und das sieht leider etwas blöd aus.

Wie bekomme ich also hin, dass die Ränder des Borders "sauber" und "farbig" gefüllt werden? Habt ihr noch eine andere Idee?

Vielen Dank

Hallo,

also wenn die Maße der beiden Borders genau passen, vermute ich mal, dass SnapToDevicePixels nicht auf true gesetzt wurde... das könnte so einen Effekt auslösen.

Andererseits, könntest Du ja auch Dein Border mit der gewünschten "Eckenfarbe" füllen und den rechteckigen Bereich dann als Rectangle oder Border (diesmal ohne CornerRadius) realisieren.

Gruß, MarsStein

Guten Morgen,

also deinen ersten Vorschlag habe ich ausprobiert, hat aber leider nicht funktioniert. Habe das SnapToDevicePixels auch an verschiedenen Stellen ausprobiert.. keine Änderung.

Die zweite Lösung leuchtet mir noch nicht ganz ein.. weiß leider nicht wie du das genau meinst 😦

Vielleicht ist es einfacher wenn ich euch mein DataTemplate für eine dieser Boxen zur Verfügung stelle:

                    <Border Height="50" Style="{StaticResource Border.Training.Item}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="20" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="20" />
                            </Grid.ColumnDefinitions>

                            <Border SnapsToDevicePixels="True" Grid.Column="0" Background="Red" Width="20" Height="46" CornerRadius="9,0,0,9" />
                            <TextBlock SnapsToDevicePixels="True"  Grid.Column="1" Margin="5"
                                       VerticalAlignment="Center" Text="TestText1" />
                            <Border SnapsToDevicePixels="True"  Grid.Column="2" Background="Red" Width="20" Height="46" CornerRadius="0,9,9,0" />
                        </Grid>
                    </Border>

Hier noch die Definition von Border.Training.Item

    <Style x:Key="Border.Training.Item" TargetType="{x:Type Border}">
        <Setter Property="Background" Value="{StaticResource SCB.Training.Item}" />
        <Setter Property="Margin" Value="2" />
        <Setter Property="BorderThickness" Value="2"/>
        <Setter Property="BorderBrush" Value="Black"/>
        <Setter Property="CornerRadius" Value="10" />
    </Style>

Falls noch irgendwas interessant ist.. bitte einfach fragen..

Danke!!!

Hallo,

mein zweiter Vorschlag wäre in dem Beispiel, der äußeren Border den Background Red zu geben und dem Textblock (oder einem rechteckigen Element, das Du noch unter den Textblock packst) den Backgound SCB.Training.Item. Die beiden inneren Borders brauchst Du dann nicht mehr.
Das müsste dann in etwa so aussehen, wie Du es haben willst - das funktionert halt nur nicht, wenn der Bereich hinter dem Text transparent sein soll.

Gruß, MarsStein