J'apprends des modèles de contrôle dans WPF et de vérifier comment remplacer le bouton de la vue avec des styles de modèle personnalisés. Je vois que pour faire un bouton cercle, une ellipse doit être définie avec la même hauteur et la même largeur. Bien sûr, qui ne force que tous les boutons utilisant ce style pour avoir un cercle avec un cercle avec un cercle Diamètre de 80 pixels, quel que soit la manière dont le bouton est redimensionné. Je voudrais que le cercle prenne sur la plus courte des valeurs de hauteur / largeur, de sorte qu'elle puisse échelle dynamiquement en fonction du dimensionnement du bouton. Cependant, je n'ai pas lu Tout matériau qui enseigne comment cela peut être fait dans un modèle PURE XAML? Il semble que certains code-derrière soient nécessaires pour atteindre cet effet?
3 Réponses :
Ceci est l'endroit où le modèle est entré (Templatedbinding est utilisé à l'intérieur des modèles de commande et est utilisé pour récupérer des valeurs à partir de la commande modélisée, dans ce cas le bouton).
<Button Content="YO!" Style="{StaticResource Button2}" Width="120" Height="53" VerticalAlignment="Top"></Button>
ok j'ai essayé cette méthode et il semble appliquer horizontalalIgnment = "centre" VerticalalIgnment = "Centre" à l'ellipse fait disparaître la forme du cercle après avoir redimensionnement à une grande taille. Je me demande ce qui se passe.
Mise à jour de ma réponse pour utiliser réelWidth et réalitéHeight. Binding à W / H est pourquoi il fait ce que vous voyez.
Après avoir changé à réelWidth et actuelheight, il semble rendu au centre maintenant. Bien que je ne puisse toujours pas bien comprendre pourquoi alors, merci.
Ensemble Stretch = Uniforme sur Ellipse fonctionne automatiquement comme min (hauteur, largeur) Vous n'avez pas besoin d'une propriété attachée comme celle d'Adam suggère.
<Style x:Key="Button2" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Fill="LightGreen" Stretch="Uniform"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Ce format fonctionne, mais quand j'ajoute horizontalalIgnment = "Centre" Verticalalignment = "Centre" à l'élément ellipse pour centraliser avec le contenuPresenter, il disparaît. Des idées?
Il suffit de courir dans cela moi-même.
J'ai eu un objet ellipse avec placer l'ellipse dans une zone de vue résolue le problème pour moi: P> étirement = uniforme code> pour remplir une grille, mais ne pas sortir des limites. Cela fonctionne bien, cependant, le cercle ne serait pas centré au cas où la grille n'était pas parfaitement carrée. P> <Style x:Key="BaseCoilEllipse" TargetType="Ellipse">
<Setter Property="MinHeight" Value="10" />
<Setter Property="MinWidth" Value="10" />
<!-- Because the ellipse is inside a viewbox, the stroke will be dependant on MinHight/MinWidth.
Basically the stroke will now be 4/10th of the ellipse (strokethickness*2 / MinHeight/MinWidth) -->
<Setter Property="StrokeThickness" Value="2"/>
<Setter Property="Stroke" Value="Green" />
<Setter Property="Stretch" Value="Uniform" />
<Setter Property="Fill" Value="Black"/>
</Style>