Laden...

Klick und Hover über Button soll Button verändern geht nur mit redundantem Code in XAML

Erstellt von GeneVorph vor 4 Jahren Letzter Beitrag vor 4 Jahren 1.088 Views
G
GeneVorph Themenstarter:in
180 Beiträge seit 2015
vor 4 Jahren
Klick und Hover über Button soll Button verändern geht nur mit redundantem Code in XAML

Hallo,

ich versuche mich gerade daran einen runden Button für ein wpf-Projekt zu erstellen. Die Form gelingt und im Prinzip bin ich mit dem Ergebnis zufrieden. Leider habe ich ein Problem bei den Triggern für verschiedene Button-Events, z. B. isMouseover etc. Ich möchte, dass beim Klicken und Hovern der Mouse sich die Farbe des Buttons ändert - das gelingt mir jedoch nur mit redundantem Code:

Style TargetType="Button">
            <Setter Property="Content" Value="Black"/>
            <Setter Property="Template">
                <Setter.Value>                    
                    <ControlTemplate>                        
                        <Grid>                            
                            <Path Stretch="Uniform" UseLayoutRounding="True" Fill="Aqua">                                
                                <Path.Data>                                    
                                    <EllipseGeometry RadiusX="1" RadiusY="1"/>                                    
                                </Path.Data>                                
                            </Path>                            
                        </Grid>                        
                    </ControlTemplate>                    
                </Setter.Value>                
            </Setter>
            
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Cursor" Value="Hand"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <Path Stretch="Uniform" UseLayoutRounding="True" Fill="Green">
                                        <Path.Data>
                                            <EllipseGeometry RadiusX="1" RadiusY="1"/>
                                        </Path.Data>
                                    </Path>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid>
                                    <Path Stretch="Uniform" UseLayoutRounding="True" Fill="Orange">
                                        <Path.Data>
                                            <EllipseGeometry RadiusX="1" RadiusY="1"/>
                                        </Path.Data>
                                    </Path>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>

            </Style.Triggers>
        </Style>

Besonders dieser Teil riecht verdächtig nach code-smell:

<ControlTemplate>
                                <Grid>
                                    <Path Stretch="Uniform" UseLayoutRounding="True" Fill="Green">
                                        <Path.Data>
                                            <EllipseGeometry RadiusX="1" RadiusY="1"/>
                                        </Path.Data>
                                    </Path>
                                </Grid>
                            </ControlTemplate>

Oder bleibt mit hier wirklich nichts anderes übrig, als die Form ständig neu zu erzeugen? Könnte mir BasedOn hier weiterhelfen?

Außerdem stehe ich gerade völlig auf dem Schlauch, warum man bei einem Button im Projekt den Content (z. B. "KLick mich") nicht sehen kann.

Für alle Tipps, die einem Anfänger weiterhelfen schon mal vielen Dank!

Gruß
Vorph

W
955 Beiträge seit 2010
vor 4 Jahren

Du könntest dir mal das mahapps.metro-Framework anschauen. Entweder verwendest du das oder schaust im Source wie die das gemacht haben.

5.657 Beiträge seit 2006
vor 4 Jahren

Ich würde den Style so in etwa definieren, und dann die BackgroundColor-Eigenschaft per MouseOver-Trigger ändern:


<Setter Property="Template">
	<Setter.Value>				
		<ControlTemplate>
			<Grid>
				<Ellipse Height="{TemplateBinding Height}"
					 Width="{TemplateBinding Width}"
					 Fill="{TemplateBinding Background}"
					 Stroke="{TemplateBinding Foreground}"
					 StrokeThickness="1" />
				<Label Content="{TemplateBinding Content}"
					   HorizontalAlignment="Center"
					   VerticalAlignment="Center" />
			</Grid>
		</ControlTemplate>
	 </Setter.Value>
</Setter>

Habs jetzt nicht ausprobieren können, aber so in etwa sollte es funktionieren.

Weeks of programming can save you hours of planning