WPF-Design: Wie man User-control mit abgerundeten Ecken und Schatten-Effekt

Wir wollen das UI-Steuerelement genau wie oben im Bild. Es ist mit abgerundeten Ecken, wie Schatten-Effekt und Dünn, während die Farbe, die Linie, die rund um die box. Die Größe des Steuerelements wird die Größe des übergeordneten Elements. Haben wir versucht, mit Beispiel, nichts passt das design gegeben, vom design-team.

WPF-Design: Wie man User-control mit abgerundeten Ecken und Schatten-Effekt

InformationsquelleAutor | 2011-06-23
  1. 3

    Könnten Sie die DropShadowEffect.

    <Grid>
    <Grid Background="LightGray">
        <Border Margin="4"
                BorderBrush="White"
                Background="LightGray"
                BorderThickness="1,1,1,1"
                CornerRadius="8,8,8,8">
            <TextBlock Margin="10"
                        Text="Hello, world!"
                        FontSize="24"
                        FontWeight="Bold" />
            <Border.Effect>
                <DropShadowEffect Color="Gray" Opacity="0.5" />
            </Border.Effect>
        </Border>
    </Grid>
</Grid>
    InformationsquelleAutor Erno de Weerd
  2. 5

    Hier ist eine Möglichkeit, erreichen die Wirkung:

    <Grid>
    <Grid Background="LightGray">
        <Rectangle Margin="10,10,0,0" Fill="DarkGray" RadiusX="8" RadiusY="8"/>
        <Border Margin="4" BorderBrush="White" Background="LightGray" BorderThickness="1,1,1,1" CornerRadius="8,8,8,8">
            <TextBlock Margin="10" Text="Hello, world!" FontSize="24" FontWeight="Bold"/>
        </Border>
    </Grid>
</Grid>

    Den ich gemacht habe, die Farben dunkler und die Rundung größer, so dass es einfacher zu sehen, für die demo:

    WPF-Design: Wie man User-control mit abgerundeten Ecken und Schatten-Effekt

    Diese Skalen an den verfügbaren Platz und der Inhalt geht in den Rand.

    • das ist ein erstaunliches Beispiel. Die ausgewählte Antwort war zu vereinfacht und nicht Arbeit für. Das einstellen der richtigen Seitenränder sind immer noch wichtig, oder das Benutzersteuerelement nicht haben Runde Ecken. Dein Beispiel hier ist genau wenn.
    InformationsquelleAutor Rick Sladkey
Schreibe einen Kommentar