一个立体的按钮 控件模板

6 篇文章 0 订阅

<!--操作设备按键模板-->
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                    <ColumnDefinition Width="25*"></ColumnDefinition>
                    <ColumnDefinition Width="2*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition Height="3"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Grid.Column="0">
                    <Grid.Background>
                        <LinearGradientBrush  EndPoint="1,0.5" StartPoint="0,0.5">
                            <GradientStop Color="#FF097995" Offset="0.28"/>
                            <GradientStop Color="#FF30A7C5" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                </Grid>
                <Border Name="Border" Grid.Column="1" Background="#FF30A7C5" TextBlock.FontSize="14" TextBlock.TextAlignment="Center" TextBlock.FontWeight="Medium" TextBlock.Foreground="#FFD6FFFF">

                    <ContentPresenter RecognizesAccessKey="True"  HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
                </Border>
                <Grid Grid.Column="2">
                    <Grid.Background>
                        <LinearGradientBrush  EndPoint="1,0.5" StartPoint="0,0.5">
                            <GradientStop Color="#FF30A7C5" Offset="0.28"/>
                            <GradientStop Color="#FF097995" Offset="1"/>
                        </LinearGradientBrush>
                    </Grid.Background>

                </Grid>
                <Grid Grid.Row="1" Height="3" VerticalAlignment="Bottom" Grid.ColumnSpan="3" >
                    <Grid.Background>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FF097995" Offset="0.921"/>
                            <GradientStop Color="#FF30A7C5"/>
                        </LinearGradientBrush>
                    </Grid.Background>
                </Grid>
               
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#FF0D95B8"></Setter>
                </Trigger>
                <Trigger Property="IsPressed" Value="true">
                    <Setter TargetName="Border" Property="Background" Value="#FF30A7C5"/>
                    <Setter TargetName="Border" Property="BorderBrush" Value="#FF30A7C5"/>
                </Trigger>
                <EventTrigger RoutedEvent="MouseEnter">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" To="#FF30A7C5" Duration="0:0:1" AutoReverse="True"
                                            RepeatBehavior="Forever"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation Storyboard.TargetName="Border" Storyboard.TargetProperty="Background.Color" 
                                            Duration="0:0:0.5"></ColorAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值