HyperlinkButton Style soll bei MouseOver Background ändern
Hallo,
ich hab mir das HyperlinkButton von Microsoft heruntergeladen und möchte, wenn man mit der Maus darüber fährt, dass sich die Hintergrundfarbe ändert. Ich hab jetzt schon ein paar sachen probiert, aber es will nicht. Hat sonst noch jemand eine Idee? (SL .NET 4.0)
[...]
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
[...]
<!--
HyperlinkButton
[URL]http://msdn.microsoft.com/en-us/library/cc296242%28v=vs.95%29.aspx[/URL]
-->
<Style TargetType="HyperlinkButton">
<Setter Property="Foreground" Value="#FF73A9D8" />
<Setter Property="Padding" Value="2,0,2,0"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<Grid x:Name="Grid" Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal"/>
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ColorAnimation Duration="0" To="Red" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Grid"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Unfocused"/>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<TextBlock
x:Name="UnderlineTextBlock"
Text="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
TextDecorations="Underline"
Visibility="Collapsed"/>
<TextBlock Canvas.ZIndex="1"
x:Name="DisabledOverlay"
Text="{TemplateBinding Content}"
Foreground="#FFAAAAAA"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Visibility="Collapsed"/>
<ContentPresenter
x:Name="contentPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Schaut mal im IRC vorbei:
Server: https://libera.chat/ ##chsarp
Hallo Briefkasten,
warum machst du nicht einfach einen Trigger (mit Enter-/ExitAction)? Ist mMn viele einfacher und in der MSDN gibts auch Beispiele dazu.
mfG Gü
Stellt fachliche Fragen bitte im Forum, damit von den Antworten alle profitieren. Daher beantworte ich solche Fragen nicht per PM.
"Alle sagten, das geht nicht! Dann kam einer, der wusste das nicht - und hat's gemacht!"
Hallo,
hast du ein Beispiel wo TriggerAction in einem Style verwendet wird?
Schaut mal im IRC vorbei:
Server: https://libera.chat/ ##chsarp
Stellt fachliche Fragen bitte im Forum, damit von den Antworten alle profitieren. Daher beantworte ich solche Fragen nicht per PM.
"Alle sagten, das geht nicht! Dann kam einer, der wusste das nicht - und hat's gemacht!"
Hallo,
korrigiere mich wenn ich falsch liege, aber das msdn bsp funktioniert nur mit wpf oder?
Schaut mal im IRC vorbei:
Server: https://libera.chat/ ##chsarp
Hallo Briefkasten,
ja das Bsp. ist für WPF. Ich war mir sicher dass Trigger in SL 4 gehen. Schade dass das nicht so geht.
Bei deinem Code fällt mir nur auf dass DisabledOverlay mit ZIndex 1 vorne liegt. Ändere mal von dem den Hintergrund und nicht vom Grid (das ja ganz hinten liegt).
mfG Gü
Stellt fachliche Fragen bitte im Forum, damit von den Antworten alle profitieren. Daher beantworte ich solche Fragen nicht per PM.
"Alle sagten, das geht nicht! Dann kam einer, der wusste das nicht - und hat's gemacht!"
Hallo,
ich hab das so gelöst. VS 2010 Datei -> Neu -> Projekt -> Silverlight Navigation Project -> Im Resouce Dictionary wird ein Style erstellt, bei dem Hover effekte usw. aktiviert ist.
Die Realisierung find ich doch etwas eigenartig.
Es gibt 2-3 Border und je nach dem welche Rahmenfarbe man braucht, schaltet man die Visibility per Trigger.
Es wäre doch viel einfacher, glaub ich zumindest, wenn man nur einen Border hat und die Farbe per ColorAnimation setzt.
[.Trigger]
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="FocusVisualElement" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Opacity="0" Margin="-1" RadiusX="1" RadiusY="1"/>
<Border x:Name="ActiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Opacity="0"/>
<Border x:Name="ContentBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Opacity="1">
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Opacity="1">
<ContentPresenter.Effect>
<DropShadowEffect ShadowDepth="0" Color="#FF484848" Opacity="0.65" BlurRadius="0"/>
</ContentPresenter.Effect>
</ContentPresenter>
</Border>
<Border x:Name="InteractiveBorder" MinWidth="{TemplateBinding MinWidth}" MinHeight="{TemplateBinding MinHeight}" Background="{TemplateBinding Background}" BorderThickness="1,1,1,1" Opacity="0" BorderBrush="{StaticResource HoverHyperLinkBackgroundColorBrush}" CornerRadius="1,1,1,1"/>
<Border x:Name="InteractiveElementBorder" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Visibility="Collapsed">
<TextBlock x:Name="InteractiveElement" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}"/>
</Border>
<TextBlock x:Name="DisabledOverlay" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" Foreground="#FFAAAAAA" Visibility="Collapsed"/>
mfG
Schaut mal im IRC vorbei:
Server: https://libera.chat/ ##chsarp
Hallo Briefkasten,
Es wäre doch viel einfacher, glaub ich zumindest, wenn man nur einen Border hat und die Farbe per ColorAnimation setzt.
Mich wundert das irgendwie auch. So wie du schreibst würde ich es auch machen.
Aber ich denke in Blend ist es so einfacher und von daher schauen die Styles so aus (auch bei anderen Controls kann man das beobachten) und sind an die "States" angelehnt. Einen Vorteil sehe ich darin aber schon, nämlich dass durch Ein-/Ausfaden ein Farbverlauf einfach animiert werden kann und das ist sonst etwas schwieriger.
PS: XAML bitte mit [x[nop][/nop]ml]-Tags angeben.
mfG Gü
Stellt fachliche Fragen bitte im Forum, damit von den Antworten alle profitieren. Daher beantworte ich solche Fragen nicht per PM.
"Alle sagten, das geht nicht! Dann kam einer, der wusste das nicht - und hat's gemacht!"