web-dev-qa-db-ja.com

Silverlight / WPFボタンでMouseOverのスタイルを設定する

ボタンのマウスオーバーのスタイリングに苦労しています...ボタンのスタイルを設定できました（赤一色）が、マウスオーバーが発生するたびに黒一色に変更したいと思います。私はXAMLを初めて使用しますが、ある種のストーリーボード/アニメーションが必要であることがわかります...これを行う方法が正確にはわかりません。

どんな助けでも大歓迎です。

wpfsilverlightxamlstyling
13
mattruma

これは、WPFからSilverlightとは異なります。 WPFでは、Robからの回答は正しいです。

Silverlightでは、これは機能しません。 Silverlightは、トリガーの代わりにVisualStateManagerを使用します。このためのコードはより複雑ですが、一部の人々はこれがより良いと感じています。自分のスタイルでコントロールテンプレートを作成する必要があります。 （コントロールテンプレートの定義については、 この記事 を参照してください。同様のControlTemplateを作成する最も簡単な方法は、既存のテンプレートを完全に抽出する機能を持つExpression Blendを使用することです。）

コントロールテンプレートで、気になるVisualStateと何をしたいかを定義します。

<VisualStateGroup x:Name="CommonStateGroup">
    <VisualState x:Name="MouseOverState">
        <Storyboard>
            <ColorAnimation Storyboard.TargetName="TopmostElementOfTheTemplate" 
                                       Storyboard.TargetProperty="Foreground" 
                                       To="Black"
                                       Duration="00:00:00" >
            </ColorAnimation>
        </Storyboard>
    </VisualState>
</VisualStateGroup>
...

ロブが上で行ったように、スタイルでもデフォルトの前景色を指定することが重要です。代わりにコントロールで指定すると、スタイルの値が上書きされます。

VisualStateManagerをWPFツールキットから取り出して、WPFで同様のソリューションを使用することが可能であることに注意してください。

17
Ben Von Handorf

WPFでは、アニメーションが必要でない限り、ストーリーボードは必要ありません。

    <Button Content="Hover me">
        <Button.Style>
            <Style TargetType="Button">
                <Setter Property="Background" Value="Red"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="Black"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Button.Style>
    </Button>
13
Rob Fonseca-Ensor

WPFの場合：

リソース（ボタンまたはそのスタイルからアクセスできる任意の場所）でストーリーボードを定義します。

  <Window.Resources>
    <Storyboard x:Key="buttonAnim">
      <ColorAnimation Storyboard.TargetName="_back" Storyboard.TargetProperty="Color" To="Red" />
    </Storyboard>
  </Window.Resources>

ボタンで、アニメーションを起動するイベントトリガーを作成します。

<Button>
   <Button.Background>
      <SolidColorBrush Color="Blue" x:Name="_back" />
   </Button.Background>
   <Button.Triggers>
      <EventTrigger RoutedEvent="Button.MouseEnter">
          <BeginStoryboard Storyboard="{StaticResource buttonAnim}" />
      </EventTrigger>
   </Button.Triggers>
   Button Text
</Button>

アニメーション化するものは明示的に存在する必要があります。これが、背景がSolidColorBrushに明示的に設定されている理由であり、その色はストーリーボードによって変更されます。

もちろん、これはスタイルを介して行う必要があります。

Silverlightは、トリガーでLoadedイベントのみをサポートするため、実際のイベントハンドラーをボタンにアタッチして、ストーリーボードをプログラムで開始する必要があります。

7
Timores

はい、ここではVisual StateManagerが重要です。無料のSilverlightテーマをブログにアップロードしました http://www.blackspike.com/site/silverlight/free-silverlight-4-beta-skin -そこでのスタイルに自分自身を助けることができます、これがスタイル付きボタンのxamlです

    <SolidColorBrush x:Key="Brush_WindowBackground" Color="#FF333333"/>

<SolidColorBrush x:Key="Brush_Foreground" Color="#FFE5E5E5"/>

<SolidColorBrush x:Key="Brush_Highlight" Color="White"/>

<LinearGradientBrush x:Key="Brush_BackgroundGrad" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF3F3F3F" Offset="0"/>
    <GradientStop Color="#FF353535" Offset="0.3"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Over" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF474747" Offset="0"/>
    <GradientStop Color="#FF2F2F2F" Offset="0.3"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Down" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="#FF1D1D1D" Offset="0"/>
    <GradientStop Color="#FF181818" Offset="0.3"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Brush_BorderInner" Color="Black"/>

<SolidColorBrush x:Key="Brush_BorderOuter" Color="#FF434343"/>


<Style TargetType="Button">
    <Setter Property="Foreground" Value="{StaticResource Brush_Foreground}"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="Padding" Value="15,10"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2"/>
                            </VisualStateGroup.Transitions>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_over" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="background_down" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="0.2" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="blackframe" Stroke="{StaticResource Brush_BorderOuter}" Fill="{StaticResource Brush_BorderInner}"/>
                    <Rectangle x:Name="background" Margin="2" Fill="{StaticResource Brush_BackgroundGrad}"/>
                    <Rectangle x:Name="background_over" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Over}"/>
                    <Rectangle x:Name="background_down" Margin="2" Opacity="0" Fill="{StaticResource Brush_BackgroundGrad_Down}"/>
                    <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="{TemplateBinding Padding}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
5
felixthehat