web-dev-qa-db-ja.com

グーグルボタンのようなwpfボタンの周りにシャドウドロップ効果を作成する方法

私はwpfでグーグルボタンを作成しようとしています。私はグーグルのボタンのCSSスタイルを指定する次のリンクを見つけました

GoogleボタンのCSSスタイル

今、私もネットを検索して、グーグルのボタンに似ているこのスタイルを見つけました

<Style x:Key="GoogleGreyButton" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#FFF5F5F5"/>
    <Setter Property="BorderBrush" Value="#FFDCDCDC"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="#FF666666"/>
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="FontFamily" Value="Arial"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="8,7"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    CornerRadius="1" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                </Border>

                <ControlTemplate.Triggers>
                    <!--TODO: Set the right colors-->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="border" Property="BorderBrush" Value="#FFC6C6C4" />
                        <Setter Property="Foreground" Value="#FF020202" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                       ` <!--Some setters here--> `

                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Trigger Property="IsPressed" Value="True">パート上記のようにシャドウドロップ効果を生成する必要があります Googleボタンのcssスタイル 、どうすればそれを達成できますか？

wpfbuttonstylesshadow
12
tesla1060

BorderThicknessをいくつか変更することで、シャドウドロップのような効果を生み出すことができます。次のようなものを試してください。

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="BorderThickness" Value="1,1,2,2" />
</Trigger>

この方法で行うと、ボタンの全体の幅と高さが変更されるため、レイアウトが少し混乱する可能性があることに注意してください。ボタンをホバーすると、その周りの他のコントロールが少しだけ「ぶつかる」可能性があります。

適切なドロップシャドウを試してみたい場合は、次のようにボタンにドロップシャドウを追加できます。

<Button>
    <Button.BitmapEffect>
        <DropShadowBitmapEffect Color="Black" Direction="320" Softness="1" ShadowDepth="10" Opacity="0.5" />
    </Button.BitmapEffect>
</Button>

編集：

MrDosuがコメントしたように、 BitMapEffect は非推奨であるため、代わりに Effect を使用する必要があります。

Effectを使用したサンプルは次のとおりです。

<Trigger Property="IsMouseOver" Value="True">
    <Setter TargetName="border" Property="BorderBrush" Value="DarkGray" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="Button.Effect">
        <Setter.Value>
            <DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
        </Setter.Value>
    </Setter>
</Trigger>
20
Eirik

マテリアルシャドウ（いわゆるelevation）を実装する場合は、次のコードを使用できます。

public static class UI
{

    public static readonly DependencyProperty ElevationProperty = DependencyProperty.RegisterAttached("Elevation", typeof(double), typeof(UI), new FrameworkPropertyMetadata(default(double), FrameworkPropertyMetadataOptions.AffectsRender, null, OnElevationChanged));

    public static double GetElevation(this UIElement element) => element.GetValue(ElevationProperty) as double? ?? default;

    public static void SetElevation(this UIElement element, double elevation) => element.SetValue(ElevationProperty, elevation);

    private static object OnElevationChanged(DependencyObject d, object value)
    {
        if (d is UIElement element && value is double elevation)
            if (elevation == 0)
                element.Effect = null;
            else
            {
                Effect e = CreateElevation(elevation, element.Effect);
                if (e != null)
                    element.Effect = e;
            }
        return value;
    }

    private static Effect CreateElevation(double elevation, Effect source)
    {
        void MixShadows(DropShadowEffect nearest, DropShadowEffect matched, double balance)
        {
            matched.BlurRadius = matched.BlurRadius * (1 - balance) + nearest.BlurRadius * balance;
            matched.ShadowDepth = matched.ShadowDepth * (1 - balance) + nearest.ShadowDepth * balance;
        }
        DropShadowEffect[] shadows = new DropShadowEffect[]
        {
            new DropShadowEffect()
            {
                BlurRadius = 5,
                ShadowDepth = 1
            },
            new DropShadowEffect()
            {
                BlurRadius = 8,
                ShadowDepth = 1.5
            },
            new DropShadowEffect()
            {
                BlurRadius = 14,
                ShadowDepth = 4.5
            },
            new DropShadowEffect()
            {
                BlurRadius = 25,
                ShadowDepth = 8
            },
            new DropShadowEffect()
            {
                BlurRadius = 35,
                ShadowDepth = 13
            }
        };
        elevation = Math.Max(0, elevation / 12 * shadows.Length - 1);
        int prevIndex = (int)Math.Floor(elevation), index = (int)elevation, nextIndex = (int)Math.Ceiling(elevation);
        double approx = elevation - index;
        DropShadowEffect shadow = shadows[index];
        if (approx != 0)
            MixShadows(approx < 0 ? shadows[prevIndex] : shadows[nextIndex], shadow, Math.Abs(approx));
        bool modify = false;
        if (source is DropShadowEffect sourceShadow)
        {
            sourceShadow.BlurRadius = shadow.BlurRadius;
            sourceShadow.ShadowDepth = shadow.ShadowDepth;
            shadow = sourceShadow;
            modify = true;
        }
        shadow.Direction = 270;
        shadow.Color = Color.FromArgb(0xAA, 0, 0, 0);
        shadow.Opacity = .42;
        shadow.RenderingBias = RenderingBias.Performance;
        return modify ? null : shadow;
    }
}

その後：

<Button local:Elevation="2">Elevated button</Button>

任意のUIElementの標高として、2〜12の任意の値を設定できます。

0
Davide Cannizzo