none
HexButton

    Frage

  • Ich versuche einen Style für einen HexButton zu erstellen. Leider schreitet der Button nicht auf das Hexagon Shape noch auf das Rechteck des Buttons. Ich moechte aber das zB MouseOver nur wenn der Cursor auch nur auf dem Hexagon Shape ist

    Hier mein XAML:

    SolidColorBrush x: Key = "HexButtonBackground" Farbe = "{ThemeResource SystemControlChromMediumAcrylicWindowMediumBrush}" />
        <SolidColorBrush x: Schlüssel = "HexButtonBackgroundPointerOver" Color = "{ThemeResource SystemAccentColorLight1}" />
        <SolidColorBrush x: Schlüssel = "HexButtonBackgroundPressed" Color = "{ ThemeResource SystemAccentColor} "/>

        < Format x: Key =" mcHexButton "TargetType =" Schaltfläche ">
            <Setter Property =" HorizontalAlignment "Wert =" Stretch "/>
            <Setter Property =" VerticalAlignment "Wert =" Stretch "/>
            < Setter Property = "Margin" Wert = "0" />
            <Setter-Eigenschaft = "Hintergrund" Wert = "{StaticResource HexButtonBackground}" />
            <Setter Property = "BorderThickness" Wert = "1" />
            <Setter Property = "BorderBrush" Wert = "Blau" />
            <Setter Property = "Vordergrund" Wert = "Blau" />
            <Setter Property = "UseSystemFocusVisuals" Wert = "False" />
            <Setter-Eigenschaft = "Vorlage">
                <Setter.Value>
                    <ControlTemplate TargetType = "Schaltfläche">
                        <Raster x: Name = "RootGrid">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x: Name = "CommonStates ">
                                    <VisualState x: Name = "Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName = "RootGrid" />
                                        </ Storyboard>
                                    </ VisualState>
                                    <VisualState x: Name = "ZeigerÜber">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "RootGrid" Storyboard.TargetProperty = "Hintergrund">
                                                < DiscreteObjectKeyFrame KeyTime = "0" Wert = "{StaticResource HexButtonBackgroundPointerOver}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "ContentPresenter" Storyboard.TargetProperty = "BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime = "0" Wert = "{StaticResource HexButtonBackgroundPointerOver}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "ContentPresenter" Storyboard.TargetProperty = "Vordergrund">
                                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName = "RootGrid" />
                                        </ Storyboard>
                                    </ VisualState>
                                    <VisualState x: Name = "Gepresst">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "RootGrid" Storyboard.TargetProperty = "Hintergrund">
                                                < DiscreteObjectKeyFrame KeyTime = "0" Wert = "{StaticResource HexButtonBackgroundPressed}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "ContentPresenter" Storyboard.TargetProperty = "BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime = "0" Wert = "{StaticResource HexButtonBackgroundPressed}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "ContentPresenter" Storyboard.TargetProperty = "Vordergrund">
                                                <DiscreteObjectKeyFrame KeyTime = "0" Value = "{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName = "RootGrid" />
                                        </ Storyboard>
                                    </ VisualState>
                                    <VisualState x: Name = "Deaktiviert">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "RootGrid" Storyboard.TargetProperty = "Hintergrund">
                                                < DiscreteObjectKeyFrame KeyTime = "0" Value = "{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "ContentPresenter" Storyboard.TargetProperty = "Vordergrund">
                                                <DiscreteObjectKeyFrame KeyTime = "0" Wert = "{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName = "ContentPresenter" Storyboard.TargetProperty = "BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime = "0" Wert = "{ThemeResource SystemControlDisabledTransparentBrush}" />
                                            </ ObjectAnimationUsingKeyFrames>
                                        </ Storyboard>
                                    </ VisualState>
                                </ VisualStateGroup>
                            < /VisualStateManager.VisualStateGroups> <Pfadbreite
                            = "{TemplateBinding Width}" Höhe = "{TemplateBinding Height}" Ausdehnung = "Uniform" Fill = "{TemplateBinding Background}"
                                  Stroke = "{TemplateBinding BorderBrush}" StrokeThickness = "{TemplateBinding BorderThickness}"
                                  Daten = "M8.660254,0 L17.320508,5 17.320508,15 8.660254,20 0,15 0,5 8.660254,0 Z" />

                            <InhaltPresenter x : Name = "ContentPresenter" Inhalt = "{TemplateBinding Content}"
                              ContentTransitions = "{TemplateBinding ContentTransitions}"
                              ContentTemplate = "{TemplateBinding ContentTemplate}"
                              Auffüllen = "{TemplateBinding Padding}"
                              HorizontalContentAlignment = "{TemplateBinding HorizontalContentAlignment}"
                              VerticalContentAlignment = "{TemplateBinding VerticalContentAlignment}"
                              AutomationProperties.AccessibilityView = "Raw" />
                            
                            < ! - <TextBlock VerticalAlignment = "Mitte" Rand = "0,0,0,0" x: Name = "TextBlock" 
                                       HorizontalAlignment = "Mitte"
                                       Text = "{TemplateBinding Content}" TextWrapping = "Umbruch" FontSize = "{TemplateBinding FontSize}" 
                                       FontFamily = "{TemplateBinding FontFamily}" FontStyle = "{TemplateBinding FontStyle}" 
                                       FontWeight = "{TemplateBinding FontWeight}" FontStretch = "{TemplateBinding FontStretch} " 
                                       Vordergrund =" {TemplateBinding Foreground} "/> ->
                        </ Grid>
                    </ ControlTemplate>
                </Setter.Value>
            </ Setter>
        </ Style>

    Donnerstag, 11. Oktober 2018 15:09

Alle Antworten

  • Hallo MSAAM,

    Leider schreitet der Button nicht auf das Hexagon Shape noch auf das Rechteck des Buttons.

    Möchtest Du ein gleichseitiges Sechseck erstellen, oder ein Sechseck, bei dem einige Seiten größer als die anderen sind (wie auf dem Bild hier)? Zu diesem Zweck kannst Du die Path-Klasse und die Data-Eigenschaft verwenden, wie in den zwei folgenden Beispielen veranschaulicht:
    XAML UWP Button with a polygonal shape

    Create custom Shape Control in UWP (Universal Windows Apps), Windows 10

    Wenn Du ein gleichseitiges Sechseck bevorzugst, könnte auch die Polygon-Klasse zielführend sein.

    Ich moechte aber das zB MouseOver nur wenn der Cursor auch nur auf dem Hexagon Shape ist

    Um herauszufinden, ob ein Punkt innerhalb des Sechsecks (mit den Ecken A₁ bis A₆ beginnend von der linken und die restlichen im Uhrzeigersinn) liegt, kannst Du zunächst prüfen, ob er innerhalb des inneren Vierecks liegt, also wenn A₂, A₃, A₅ und A₆ diese vier Ecken sind, ob p.y > A₂.y und p.y < A₅.y und p.x > A₂.x und p.x < A₃.x (wenn A₂.y = A₃.y, A₅.y = A₆.y, A₂.x = A₆.x und A₃ = A₅.x). Wenn diese Bedingung erfüllt ist, so liegt er auch innerhalb des Sechsecks, sonst wird überprüft, ob er innerhalb der zwei restlichen Dreiecke liegt. Zu diesem Zweck verweise ich Dich auf die Antwort von Trienco in diesem Thread:
    Feststellen, ob ein Punkt innerhalb eines Dreiecks liegt.

    Gruß,
    Dimitar

    P.S. Da Du die Frage gelöscht hast, während ich beim Bearbeiten der Antwort war, stelle ich sie mit Verlaub wieder her. Wenn Du inzwischen die Lösung gefunden hast, wäre es für andere Leser dieses Threads hilfreich, wenn Du sie hier schildern würdest.

    Bitte haben Sie Verständnis dafür, dass im Rahmen dieses Forums, welches auf dem Community-Prinzip „IT-Pros helfen IT-Pros“ beruht, kein technischer Support geleistet werden kann oder sonst welche garantierten Maßnahmen seitens Microsoft zugesichert werden können.


    Freitag, 12. Oktober 2018 13:52
    Moderator