6
votes

Élément de coin coupé WPF

J'essaie de créer quelque chose de similaire à l'image ci-dessous dans WPF. Ce contrôle est conçu pour être la vue de base de tout dans mon application et sera assis à l'intérieur d'un contrôle de la fenêtre avec un arrière-plan (probablement un gradient de type).

Les exigences sont les suivantes:

coins arrondis sur trois côtés (haut à gauche, en bas à gauche et en bas à droite)
Tableau coupé à l'air à la recherche d'un coin supérieur droit qui a l'arrière-plan derrière la "zone de coupe" transparente de sorte que le gradient de fond de la fenêtre montre (ce qui semble être vraiment coupé)
La zone de titre doit être un conteneur de contenu afin que je puisse mettre tout ce qui est à l'intérieur tel que des icônes et du texte
La zone de contenu doit avoir une hauteur minimale, puis la croissance si la teneur intérieure le dépasse (pas à la volée - il suffit de supporter la hauteur des éléments de ce type)
Je me suis battu avec cela pendant des heures, mais étant nouvelle pour WPF, je commence à me retrouver dans des cercles. Je pense qu'il y a des avantages majeurs pour la flexibilité du WPF, mais pour que les gens commencent simplement que c'est presque trop décourageant.
Toute aide serait très appréciée! Merci!

c# wpf xaml

0 commentaires

4 Réponses :

5
votes

Essayez ceci pour commencer:

<Grid Width="100" Height="100">  
    <Border Background="Green" CornerRadius="8,0,8,8">
      <Border.Clip>
        <PathGeometry>
          <PathGeometry.Figures>
            <PathFigure StartPoint="0,0">
              <PathFigure.Segments>
                <LineSegment Point="90,0"/>
                <LineSegment Point="100,10"/>
                <LineSegment Point="100,100"/>
                <LineSegment Point="0,100"/>
              </PathFigure.Segments>
            </PathFigure>
          </PathGeometry.Figures>
        </PathGeometry>
      </Border.Clip>
    </Border>
  </Grid>

3 commentaires

Je pense que ce sera parfait! Merci!!

Votre méthode a bien fonctionné, mais la réponse ci-dessous (le contrôle "Tabby") a fini de fonctionner mieux pour moi depuis que j'avais besoin de quelque chose facilement réutilisable. J'ai quitté mon poste de vote pour vous cependant. Merci encore!

J'ai commencé comme ça aussi mais je suis vite resté coincé quand je ne connaissais pas la taille du contrôle et je devais déduire la taille du clip.

0
votes

Voici quelques codes que je mets ensemble à l'aide d'un contrôle personnalisé.

Code de contrôle: p> xxx pré>

contrôle xaml (dans le dossier Themes / Generic.xaml) p> xxx pré>

Voici comment vous utilisez-le: P>

<test:ContentCard Grid.RowSpan="4" Grid.ColumnSpan="2" Margin="200" Background="Black">
    <test:ContentCard.Header>
        <TextBlock Text="Title" Foreground="White" />
    </test:ContentCard.Header>
    <test:ContentCard.Content>
        <TextBlock Text="This is some content" Foreground="Black" />
    </test:ContentCard.Content>
</test:ContentCard>

0 commentaires

5
votes

tabby

Je ne sais pas comment "remplir" le clip, donc j'ai fait le clip dans du code. Faites-moi savoir si vous avez besoin de plus d'aide Ajouter plus de propriétés pour contrôler les couleurs, etc. Voici:

code: xxx

générique.xaml xxx

Utilisation: xxx

2 commentaires

Parfait!! C'est mort ce dont j'avais besoin. Maintenant, la question que je semble toujours avoir du resurface de WPF ... Comment au monde avez-vous appris à faire de ce que vous avez fait? Ressources pour vraiment apprendre WPF dans des modes utiles telles que cela semble si incroyablement rare qu'il semble.

Il y a cinq ans, j'ai fait la partie difficile que vous êtes maintenant. J'ai lu les livres, codé plusieurs projets, fait des erreurs et demandé aux autres (il n'y avait pas beaucoup de choses autour de là, mais j'avais la chance d'avoir accès à une partie des personnes qui travaillaient sur WPF). Et même maintenant, j'apprends toujours. Accrochez-vous, vous y arriverez.

0
votes

Merci pour le poste, c'est vraiment génial! J'ai modifié pour faire ma propre classe de frontière coupée et ma même usage ci-dessous xxx

SORTIE SAMPLE

0 commentaires