0

我正在创建一个按钮样式。将其粘贴到窗口中以查看想法:

<Style x:Key="SelectionButton3"
        TargetType="{x:Type Button}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ClipToBounds="False">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="75"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Border x:Name="TheBorder" 
                            BorderThickness="0,1.5,1.5,1.5"
                            CornerRadius="3"
                            Background="SteelBlue"
                            Height="35"
                            Grid.Column="1"
                            Grid.Row="0"
                            Margin="-31"
                            BorderBrush="DarkSlateBlue">

                        <Border.BitmapEffect>
                            <DropShadowBitmapEffect x:Name="BorderShadow" 
                                                    ShadowDepth="0"/>
                        </Border.BitmapEffect>

                    </Border>

                    <Rectangle Fill="SteelBlue"
                                Stroke="DarkSlateBlue"
                                Grid.Row="0"
                                Grid.Column="0">

                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45" />
                        </Rectangle.LayoutTransform>

                        <Rectangle.BitmapEffect>
                            <DropShadowBitmapEffect ShadowDepth="5"/>
                        </Rectangle.BitmapEffect>

                    </Rectangle>

                    <ContentPresenter x:Name="ContentArea"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>

            </ControlTemplate>
        </Setter.Value>

    </Setter>

    <Setter Property="Foreground"
            Value="LightGray" />
    <Setter Property="FontFamily"
            Value="Segoe UI" />



</Style>

<Button Click="Button_Click"
        Style="{StaticResource SelectionButton3}"
        Width="185">

</Button>

我想要发生的是当鼠标悬停在边框或矩形上时,边框阴影会出现。我知道我需要一个触发器,但我不确定在哪里以及如何做。

有人可以指出我正确的方向吗?

谢谢

4

1 回答 1

1
<Style x:Key="SelectionButton3"
        TargetType="{x:Type Button}">

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">

                <Grid HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ClipToBounds="False">

                    <Grid.RowDefinitions>
                        <RowDefinition Height="75"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Border x:Name="TheBorder" 
                            BorderThickness="0,1.5,1.5,1.5"
                            CornerRadius="3"
                            Background="SteelBlue"
                            Height="35"
                            Grid.Column="1"
                            Grid.Row="0"
                            Margin="-31"
                            BorderBrush="DarkSlateBlue">
                    </Border>

                    <Rectangle Name="rect" Fill="SteelBlue"
                                Stroke="DarkSlateBlue"
                                Grid.Row="0"
                                Grid.Column="0">

                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45" />
                        </Rectangle.LayoutTransform>

                    </Rectangle>

                    <ContentPresenter x:Name="ContentArea"
                                        VerticalAlignment="Center"
                                        HorizontalAlignment="Center"
                                        Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" />
                </Grid>
                <ControlTemplate.Triggers>
                  <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="TheBorder" Property="BitmapEffect">
                      <Setter.Value>
                        <DropShadowBitmapEffect ShadowDepth="0" />
                      </Setter.Value>
                    </Setter>
                    <Setter TargetName="rect" Property="BitmapEffect">
                      <Setter.Value>
                        <DropShadowBitmapEffect ShadowDepth="5"/>
                      </Setter.Value>
                    </Setter>
                  </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>

    </Setter>

    <Setter Property="Foreground"
            Value="LightGray" />
    <Setter Property="FontFamily"
            Value="Segoe UI" />



</Style>

请注意,除非您使用的是 .NET 3.0 或 3.5 pre SP1,否则您应该使用 .NETEffect而不是BitmapEffect. 该BitmapEffect属性已在 3.5 SP1 中弃用

于 2012-04-10T21:32:00.117 回答