當鼠標光標在其上時，XAML按鈕模板發生更改

我有一個XAML ResourceDictionary，我嘗試爲我的程序中的所有按鈕定義一致的設計。當鼠標光標在其上時，XAML按鈕模板發生更改

我設法讓一個單一的設計對他們來說，有了這個代碼：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Style TargetType="{x:Type Button}"> 
     <Setter Property="OverridesDefaultStyle" Value="True" /> 
     <Setter Property="SnapsToDevicePixels" Value="True" /> 
     <Setter Property="Foreground" Value="MidnightBlue" /> 
     <Setter Property="Background" Value="White" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate x:Name="tmpltButton"> 
        <Grid> 
         <Border x:Name="ButtonBorder" 
          CornerRadius="7,7,7,7" 
          BorderBrush="MidnightBlue" 
          BorderThickness="2"> 
         </Border> 

         <ContentPresenter x:Name="ButtonContent" 
          Content="{Binding Path=Content, 
          RelativeSource={RelativeSource TemplatedParent}}" 
          HorizontalAlignment="center" 
          VerticalAlignment="center"> 
         </ContentPresenter> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary>

但它刪除，當用戶CLIK按鈕，或把他的鼠標在它的默認行爲。儘管我努力想找回一種方法，但我找不到方法。

當鼠標懸停時，如何更改按鈕設計？

來源

2015-06-02 MarinD

您錯過了ControlTemplate的Trigger財產。只要把它放在tmpltButton元素裏面。下面是默認的：

<ControlTemplate.Triggers> 
    <Trigger Property="IsDefaulted" Value="true"> 
     <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 
    </Trigger> 
    <Trigger Property="IsMouseOver" Value="true"> 
     <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/> 
     <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> 
    </Trigger> 
    <Trigger Property="IsPressed" Value="true"> 
     <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> 
     <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> 
    </Trigger> 
    <Trigger Property="IsEnabled" Value="false"> 
     <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/> 
     <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/> 
     <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/> 
    </Trigger> 
</ControlTemplate.Triggers>

但是，如果你想樣式的組成部分，我建議用鼠標右鍵單擊在設計視圖中的組件，然後單擊Edit Template > Edit a copy，於是你開始從劃痕造型吧。

爲了完整起見，正如Mike所說，微軟提供了Expression Blend這是Visual Studio包中包含的工具。它允許更多的設計功能，當然它值得一試。

來源

2015-06-02 10:36:54 fillobotto

值得一提的是，你只能**編輯Visual Studio中**文檔大綱窗口**的副本**。否則，您可以使用** Expression Blend **設計器。 –

謝謝。我試圖將你的代碼添加到我的，但我得到一個錯誤：未知的構建錯誤，MC4109：無法找到類型'System.Windows.Controls.Control'的模型屬性'默認'。我不確定發生了什麼事。也許這是因爲我使用VS2010。 – MarinD

也許你是針對不同的框架版本和'IsDefaulted'屬性不存在，請嘗試刪除它。 – fillobotto

您應該使用樣式觸發器來自己控制它。

要更改背景顏色，您需要在按鈕上設置樣式觸發器，然後使用控件模板中的模板綁定來設置背景。

舉個簡單的例子，我所做的按鈕，背景不同的顏色爲3種情況 - IsPressed，鼠標懸停= True和鼠標懸停=假：

<Style TargetType="{x:Type Button}"> 
    <Style.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="Background" Value="Pink"/> 
     </Trigger> 
     <Trigger Property="IsMouseOver" Value="False"> 
      <Setter Property="Background" Value="Orange"/> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="True"> 
      <Setter Property="Background" Value="IndianRed"/> 
     </Trigger> 
    </Style.Triggers> 

    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="Foreground" Value="MidnightBlue" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate x:Name="tmpltButton"> 
       <Grid Background="{TemplateBinding Background}"> 
        <Border x:Name="ButtonBorder" CornerRadius="7,7,7,7" BorderBrush="MidnightBlue" BorderThickness="2"/> 
        <ContentPresenter x:Name="ButtonContent" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
             HorizontalAlignment="Center" VerticalAlignment="Center"/> 

       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2015-06-02 10:53:34

當鼠標光標在其上時，XAML按鈕模板發生更改

回答

相關問題