0

次のように定義されたボタンスタイルがあります。

<LinearGradientBrush x:Key="Brush_NavButtonBorder0" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#00383f47" Offset="0" />
    <GradientStop Color="#FF383f47" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonBorder4" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF414f5a" Offset="0" />
    <GradientStop Color="#11414f5a" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonBackground" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF3f505a" Offset="0" />
    <GradientStop Color="#FF37454e" Offset="0.75" />
    <GradientStop Color="#FF2f3c44" Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_NavButtonPressedBackground" StartPoint="0,0" EndPoint="0,1" >
    <GradientStop Color="#FF3f505a" Offset="1" />
    <GradientStop Color="#FF37454e" Offset="0.25" />
    <GradientStop Color="#FF2f3c44" Offset="0" />
</LinearGradientBrush>

<Style x:Key="NavigationButton" TargetType="Button">
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Foreground" Value="Gainsboro" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Background" Value="{StaticResource Brush_NavButtonBackground}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}" x:Name="MainControlTemplate">
                <Grid>
                    <Border x:Name="outerBorder" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder0}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" />
                    <Border Margin="1" CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder4}" Background="Transparent" SnapsToDevicePixels="True">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                    </Border>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <!--<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray" />-->
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="outerBorder"
                                                    Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                                    To="Gray"
                                                    Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="{StaticResource Brush_NavButtonPressedBackground}" />
                        <Setter TargetName="content" Property="RenderTransform" >
                            <Setter.Value>
                                <TranslateTransform X="2.0" Y="2.0" />
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" Value="0.5" />
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

このスタイルには 2 つの問題があります。 1. ボタンを MouseOver すると、このスタイルを使用する他のすべてのボタンが、上にあるボタンだけでなく、アニメーションに反応します。2. 0 番目のグラデーション ストップだけでなく、境界線全体の色をアニメーション化したいと考えていますが、これを行う方法が見つからないようです。

ColorAnimation セクションの上のコメント行は、灰色の BorderBrush を MouseOver ですぐに表示することを除いて、私が望むこととほとんど同じです - 灰色の BorderBrush をアニメーションで表示したいのです。

これはかなり単純なはずですが、これを行う方法がわかりません。これを正しい方法で行う方法を知っている人はいますか？

4

1 に答える 1

2

すべてのボタンの境界線を変更する理由は、グラデーション ブラシで実際に色を変更しているためです。また、同じグラデーション ブラシがそのスタイルのすべてのボタン インスタンスで共有されるため、すべてのブラシの境界線が変更されます。

これを解決する方法はいくつかありますが、その 1 つは問題のブラシをスタイル自体のリソースにすることで、同じ方法では共有されません。次のコード スニペットは、変更する必要があるすべてを示しています (最上位のリソースから Brush_NavButtonBorder0 を削除し、ボタン スタイルのリソースに追加します)。

編集:更新に完全なスタイルを含める

<Color x:Key="BorderColor">#00383f47</Color>

<!-- Other Brushes (NOT Brush_NavButtonBorder0) -->

<Style x:Key="NavigationButton" TargetType="Button">
  <Setter Property="FocusVisualStyle" Value="{x:Null}" />
  <Setter Property="Foreground" Value="Gainsboro" />
  <Setter Property="FontSize" Value="14" />
  <Setter Property="Background" Value="{StaticResource Brush_NavButtonBackground}" />
  <Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}" x:Name="MainControlTemplate">
            <ControlTemplate.Resources>
                <LinearGradientBrush x:Key="Brush_NavButtonBorder0" StartPoint="0,0" EndPoint="0,1" >
                            <GradientStop Color="{StaticResource BorderColor}" Offset="0" />
                    <GradientStop Color="#FF383f47" Offset="1" />
                </LinearGradientBrush>
            </ControlTemplate.Resources>
            <Grid>

                <Border x:Name="outerBorder" CornerRadius="5" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder0}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" />


                <Border Margin="1" CornerRadius="4" BorderThickness="1" BorderBrush="{StaticResource Brush_NavButtonBorder4}" Background="Transparent" SnapsToDevicePixels="True">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/>
                </Border>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <!--<Setter TargetName="outerBorder" Property="BorderBrush" Value="Gray" />-->
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="outerBorder"
                                        Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        To="Gray"
                                        Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetName="outerBorder"
                                        Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
                                        To="{StaticResource BorderColor}"
                                        Duration="0:0:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background" Value="{StaticResource Brush_NavButtonPressedBackground}" />
                    <Setter TargetName="content" Property="RenderTransform" >
                        <Setter.Value>
                            <TranslateTransform X="2.0" Y="2.0" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Opacity" Value="0.5" />
                </Trigger>
                <!--<Trigger Property="IsKeyboardFocused" Value="True">
                    <Setter Property="FocusVisualStyle" Value="{StaticResource MyFocusVisualStyle}" />
                </Trigger>-->
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
</Setter>

これは、各ボタン インスタンスが LinearGradientBrush の独自のコピーを取得し、マウスオーバー トリガー アニメーションが、マウスが置かれているボタンのアニメーションにのみ影響することを意味します。

繰り返しますが、この問題を解決するにはさまざまな方法がありますが、上記のコード スニペットは、現在のコードから考えられる最も単純なものです。

于 2012-06-22T00:35:53.043 に答える