13

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

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

4

4 に答える 4

17

これは、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>
...

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

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

于 2010-03-08T14:34:35.807 に答える
13

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>
于 2010-03-08T14:00:43.897 に答える
7

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イベントのみをサポートするため、実際のイベントハンドラーをボタンにアタッチして、ストーリーボードをプログラムで開始する必要があります。

于 2010-03-08T13:54:48.927 に答える
5

はい、ここで重要なのはVisualStateManagerです。無料の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>
于 2010-03-08T17:02:22.067 に答える