Button-Steuerelement Vorlage mit der Größe veränderbar Kreis
Lerne ich über die Steuerelement-templates in WPF-und Auschecken, gewusst wie: ersetzen Sie die Schaltfläche suchen mit benutzerdefinierten template-Stile. Ich sehe, dass ein Kreis-Taste, eine Ellipse definiert werden mit der gleichen Höhe und Breite.
<Style x:Key="Button2" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Ellipse Fill="LightGreen" Width="80" Height="80"/>
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Control.Margin" Value="10"/>
</Style>
Natürlich, dass nur Kräfte, die alle Tasten mit diesem Format zu haben, ein Kreis mit einem Durchmesser von 80 Pixel, unabhängig davon, wie der button in der Größe geändert wird. Ich möchte für den Kreis auf sich zu nehmen, je kürzer die Werte für Höhe/Breite, so dass es dynamisch skalieren nach der Schaltfläche Größenanpassung.
Aber ich habe nicht Lesen Sie alle Materialien, die Sie lehrt, wie dies getan werden kann in reinen XAML-Vorlage? Es scheint, dass einige code-behind ist erforderlich, um diese Wirkung zu erzielen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist, wo TemplateBinding kommt in (TemplateBinding ist im control-templates und wird verwendet, um Werte abzurufen, die von der vorlagenbasierten Steuerelement, in diesem Fall dem Button).
Beachten Sie, dass dies eine kürzere form Verwendung:
Den TemplateBinding markup-Erweiterung ist nur optimiert für nur TemplatedParent Bindungen.
Sagte, dass, wenn Sie wollte, dass es einen Kreis nur, wenn die ellipse war der kleinere W/H, dann wird Ihr Inhalt wird leicht fließen aus ihm heraus, was ich bezweifle, ist, was Sie eigentlich wollen..? Ich hatte gedacht, der unter Verwendung eines mehrfach-Wert-Konverter zu tun, aber Sie können Sie nicht binden, um die Konverter-parameter, so dass die aus ist.
In diesem Fall eine angeschlossene Verhalten würde funktionieren, aber es ist nicht schön.
...und die beigefügten Verhalten:
Okay, jetzt der Grund, warum mit Hilfe eines angebrachten Verhaltens erforderlich ist (AFAICT jedenfalls), ist, dass, um um den Mittelpunkt der ellipse (in einer non-square/non-Kreis-Szenario), müssen Sie die HorizontalAlignment-und VerticalAlignment-in der Lage sein, um wirksam zu werden. Der Standardwert für beide ist Stretch, und wenn eine explizite Breite/Höhe gesetzt ist, verhält es sich wie Center.
Mit Stretch="Uniform" an, die Ellipse wird immer physisch nehmen den gesamten Raum ein, es ist nur die Zeichnung von Ellipse, gezwungen werden. Mit diesem gezogenen Ellipse Abbildung beginnen immer an der linken oberen Ecke. Also in diesem Fall, wenn Ihre Schaltfläche ist Breiter als hoch, die gezeichneten Teil der Ellipse nicht zentriert zu bekommen zusammen mit dem text.
Dieser code ist ein gutes Beispiel von dem, was Sie wahrscheinlich nicht auf der Suche nach:
...und den button mit der es (mit einem nicht-Quadrat Breite/Höhe):
Sieht wie folgt aus:
Hässlich http://www.freeimagehosting.net/uploads/84e62c4982.png
... im Vergleich zu dieser mit der angefügten Eigenschaft option:
alt-text http://www.freeimagehosting.net/uploads/40755babcd.png
Lief einfach in das selbst.
Hatte ich ein ellipse-Objekt mit
stretch=uniform
zu füllen, ein Gitter, aber nicht go out of bounds. Dies funktioniert ok, aber der Kreis würde nicht zentriert werden, im Falle das Gitter war nicht vollkommen quadratisch.Platzierung der ellipse in einer viewbox löste das Problem für mich:
Das einzige problem hier ist, dass die Basis die Größe der ellipse ist 0 (oder 1, nicht sicher), was bedeutet, dass mit einem
stroke
wird automatisch füllen Sie die gesamte ellipse (der Hub wird eingestellt auf die 0-size-ellipse, und dann die ellipse in der Größe verändert werden).Mit einem Schlaganfall:
Einen workaround für das Hub nicht funktioniert, ist die Verwendung eines MinHeight/Minbreite der ellipse:
Anhand der folgenden Art:
(Beachten Sie, dass die StrokeThickness ist jetzt relative)
Ergebnis:
Set Stretch=Uniform auf der Ellipse automatisch funktioniert wie Min(Höhe,Breite), die Sie nicht brauchen, eine angefügte Eigenschaft, so wie Adam schon sagt.