2. 程式人生 > >WPF Button 樣式 滑鼠移入發光

WPF Button 樣式 滑鼠移入發光

阿新 • • 發佈：2019-01-18 
 <Style TargetType="Button">
            <Setter Property="Foreground" Value="Black"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <!--背景色-->
                        <Border x:Name="back" Opacity="0.8" CornerRadius="3">
                            <Border.BitmapEffect>
                                <OuterGlowBitmapEffect Opacity="1" GlowSize="0" GlowColor="{Binding RelativeSource={RelativeSource TemplatedParent},Path=(Button.Background).(SolidColorBrush.Color)}"/>
                            </Border.BitmapEffect>
                            <Border.Background>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1.5">
                                    <GradientBrush.GradientStops>
                                        <GradientStopCollection>
                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0"/>
                                            <GradientStop Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}" Offset="0.4"/>
                                            <GradientStop Color="#FFF" Offset="1"/>
                                        </GradientStopCollection>
                                    </GradientBrush.GradientStops>
                                </LinearGradientBrush>
                            </Border.Background>
                            <!--前景色及邊框-->
                            <Border x:Name="fore" BorderThickness="1" CornerRadius="3" BorderBrush="#5555">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientBrush.GradientStops>
                                            <GradientStopCollection>
                                                <GradientStop Color="#6FFF" Offset="0.5"/>
                                                <GradientStop Color="#1111" Offset="0.51"/>
                                            </GradientStopCollection>
                                        </GradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <!--按鈕內容-->
                                <ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding  Content}">
                                    <ContentPresenter.BitmapEffect>
                                        <DropShadowBitmapEffect Color="#000" Direction="-90" ShadowDepth="2" Softness="0.1" Opacity="0.3" />
                                    </ContentPresenter.BitmapEffect>
                                </ContentPresenter>
                            </Border>
                        </Border>
                        <!--觸發器-->
                        <ControlTemplate.Triggers>
                            <!--滑鼠移入移出-->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation To="10" Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                            <ColorAnimation To="#AFFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation To="#3FFF" BeginTime="0:0:0.2" Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="back" Storyboard.TargetProperty="(Border.BitmapEffect).(OuterGlowBitmapEffect.GlowSize)" />
                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" />
                                            <ColorAnimation Duration="0:0:0.2" Storyboard.TargetName="fore" Storyboard.TargetProperty="(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                                <!--<Setter TargetName="back" Property="Background">
                                    <Setter.Value>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform
                                          CenterX="0.5"
                                          CenterY="0.5"
                                          ScaleX="1.5"
                                          ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Button.Background).(SolidColorBrush.Color)}"/>
                                            <GradientStop Offset="0.45" Color="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(Border.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)}"/>
                                        </RadialGradientBrush> 
                                    </Setter.Value>
                                </Setter>-->
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

以 上是XAML檔案的樣式

以下是效果圖：

  滑鼠移入 

相關推薦

WPF Button 樣式 滑鼠移入發光

<Style TargetType="Button"> <Setter Property="Foreground" Value="Black"></Setter> <Setter P

WPF ScrollViewer 滾動條滑鼠移入移出及滑鼠按下拖動時的外觀樣式

在WPF 中自定義ScrollViewer的樣式實現的效果如下圖所示：主要是滑鼠移入顯示滾動條，移出滑鼠滾動條消失，按住拖拽改變滾動條外觀顏色等； 關鍵點幾個點是：1：在ScrollViewer 的自定義模板中 定義好如下幾個事件觸發器： <EventTrigger

設定選單欄選單樣式（滑鼠移入移出狀態，背景顏色，字型顏色大小，間距，邊框）

setStyleSheet(“QMenuBar{” “background:rgb(255,255,255);” “color:rgb(0,0,0);” “font-size:14px;” “padding:2px;” “border:1px solid rgb(165,171,184);”

JS學習筆記 - fgm練習 - 滑鼠移入/移出div樣式改變

  思路： div的預設樣式正常設定。 滑鼠移入時，發生改變的樣式有3個，即 邊框顏色，div背景色，字型顏色。 把這三個css改變設定在一個類名下，再通過js給div動態 新增/去除這個類名，實現div樣式改變。   <style> body{color:#

CSS筆記 - fgm練習 - 滑鼠移入移出div顯示隱藏 CSS樣式部分

問題總結： 1. checkbox和下面隱藏的div對齊，是在清除了預設樣式的前提下，而不需要額外設定float: left; 2. 隱藏的div這裡不需要專門設定寬高、居中，是靠內容和padding撐起來的尺寸。外層div居中，內層跟著居中。 <style> *{margin

hover事件2，滑鼠移入一個標籤使其子級標籤的css樣式發生改變，顯示可見

html程式碼： <div class="father">滑鼠移入顯示 <p class="child">隱藏內容，經過滑鼠移入後展示。</p> </div> css程式碼： .father .child{    displ

滑鼠移入移出，樣式修改，顯示隱藏提示訊息

重要的有三點： 1.a標籤中的ishow是自己定義的屬性，自己輸入值 2.a:hover表示滑鼠移上去時， 3.a:hover:after{content:attr(ishow)}表示滑鼠移上去後

vue滑鼠移入新增class樣式,滑鼠移出去除樣式(active)

滑鼠移入新增class樣式 HTML HTML繫結事件,加入或者移出class為active <div class="col-lg-3 col-xs-6 paddingLef

hover事件，滑鼠移入一個標籤使其子級標籤的css樣式發生改變

目標：滑鼠移入一個標籤使其子級標籤顯示可見。html程式碼：<div class="father">滑鼠移入顯示 <p class="child">隱藏內容，經過滑鼠移入後展示。</p> </div>css程式碼：.f

楊老師課堂之JavaScript懸浮事件（滑鼠移入移出事件）

 今天給大家分享一個簡單的JavaScript事件案例： 該事件屬於懸浮事件 改程式碼邏輯非常簡單，主要是 當滑鼠移動到按鈕上顯示一個盒子，移開之後盒子隱藏 JavaScript事件中     onmouseover 代表的是滑鼠指標移動到指定的物件

手寫無縫輪播$滑鼠移入暫停移除輪播

無縫輪播 使用外掛Swiper沒找到滑鼠移入立即暫停功能，需求是並排幾張圖片無縫滑動，滑鼠移入立即停止，滑鼠移除立即滾動。 六個展示位，七個內容 html程式碼 <ul class="div"> <li style="background-color:#cca6b5

判斷滑鼠移入方向

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in

【HTML】—滑鼠移入或移出表格，表格變色

本文積累了幾種滑鼠移入或者移出html的table表格時，表格背景色變化的幾種方法。 一、利用樣式CSS表示式 在樣式裡寫表示式expression，實現滑鼠經過表格行上變色，但在firefox裡無效果。 完整程式碼如下： <html> <hea

根據滑鼠移入移出方向，實現hover效果

首先，我們要判斷滑鼠移入物件的方向：先獲取該物件的左邊距，然後通過判斷滑鼠距離上面、左面、右面、下面的值的最小值，來獲取滑鼠移入物件的方向。 JS程式碼： ;(function($){ $.fn.extend({ dirMove:function(){ var $outer=this

HTML 事件 -- 滑鼠移入高亮顯示

需求：      滑鼠移入某個單元格時高亮顯示該格。（例項報表中同時設有隔行變色）     下面以潤乾報表 5 自帶報表例項【訂單.rpx】為例，實現 滑鼠移入高亮顯示   &n

js實現表格隔行變色和滑鼠移入高亮

程式碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g

js，滑鼠移入塊控制另一塊改變

<script>  var a=document.getElementsByTagName('li')    定義一個變數找到當前文件內的li。  for(i=0;i<a.length;i=i+1){     &

C# WPF button樣式清空以及關閉 最小化 按鈕重置

 屬性 ResizeMode="CanResizeWithGrip" 設定視窗拉動 屬性 MouseLeftButtonDown="DragWindow" 設定 滑鼠拖動視窗 C#後臺（滑鼠移動視窗） <Window.Resources> ..

滑鼠移入檢視縮圖詳細圖片

<div> <img src="img/2.jpg" alt="..." id="img2"/> <script type="text/javascript"> $(function(){ $("img[id^='img']").

jquery滑鼠移入變色移出恢復

一、需求說明 現需要對一個表格的內容部分做下高亮處理：當滑鼠放到這一行時，背景色發生改變；當滑鼠移出這一行時，恢復這一行的原有背景色。如下圖，原來是除了首行以外，帶序號的內容部分，奇偶行背景色交替變化，當滑鼠放到第1行時，看到下圖的樣式，移出該行後，恢復原樣。 二、程