Question

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

<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>

我希望发生的是当鼠标悬停在Border或Rectangle上时，会出现Borders投影。我知道我需要一个触发器，但我不确定在哪里和怎么做。

有人能指出我正确的方向吗？

由于

Answer 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 SP1，否则应使用Effect代替BitmapEffect。 {3.0}

中已弃用BitmapEffect属性

WPF投影启动

1 个答案: