動畫WPF ControlTemplate中的兩個嵌套邊框元素

我正在嘗試爲文本框創建新的ControlTemplate。最後，它應該使用幾個自定義狀態，這會改變控件的出現。代碼片段中的ControlTemplate被剝離出來以便解決我的問題。動畫WPF ControlTemplate中的兩個嵌套邊框元素

我想要使用兩個嵌套的邊框元素並在各種視覺狀態下爲其邊框和背景顏色設置動畫。

<Style TargetType="{x:Type TextBox}"> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="MinHeight" Value="20" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TextBoxBase}"> 
       <Border Name="Border" CornerRadius="2" BorderThickness="1" Margin="2"> 
        <Border.Background> 
         <SolidColorBrush Color="White" /> 
        </Border.Background> 
        <Border.BorderBrush> 
         <SolidColorBrush Color="Black" /> 
        </Border.BorderBrush> 
        <Border Name="Inner" CornerRadius="2" Padding="2" BorderThickness="1"> 
         <Border.BorderBrush> 
          <SolidColorBrush Color="Blue" /> 
         </Border.BorderBrush> 
         <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="Disabled" /> 
          <VisualState x:Name="ReadOnly" /> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" 
             Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="#FFE8EDF9" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ScrollViewer Margin="0" x:Name="PART_ContentHost" /> 
        </Border> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

這是在互聯網上可以找到的控制模板中使用視覺狀態的幾乎基本示例。當出現mouseover事件時，它不起作用，背景也不會改變。如果我刪除內部邊框，它將按預期工作。

如果有人能夠幫助我使用此模板，我會非常感激。

來源

2014-07-02 user3797840

你的問題是，你附VisualStateManager.VisualStateGroups收集到內部Border元素，所以當你取出內Border，在VisualStateGroups收藏成爲連接到外Border再次，這就是爲什麼它仍然工作。所有你需要做修復它是將其移動到外Border：

<Style TargetType="{x:Type TextBox}"> 
    <Setter Property="OverridesDefaultStyle" Value="True" /> 
    <Setter Property="MinHeight" Value="20" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TextBoxBase}"> 
       <Border Name="Border" CornerRadius="2" BorderThickness="1" Margin="2" Background="White" BorderBrush="Black"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="Disabled" /> 
          <VisualState x:Name="ReadOnly" /> 
          <VisualState x:Name="MouseOver"> 
           <Storyboard> 
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
             <EasingColorKeyFrame KeyTime="0" Value="#FFE8EDF9" /> 
            </ColorAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Border Name="Inner" CornerRadius="2" Padding="2" BorderThickness="1" BorderBrush="Blue" Background="{x:Null}"> 
         <ScrollViewer Margin="0" x:Name="PART_ContentHost" /> 
        </Border> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style>

來源

2014-07-02 14:12:51 Sheridan

按秒打我，並感謝清理這些依賴關係對他來說，這就像在黑板上的指甲看到所有的噪音在某人xaml ... +1 –

*感謝您爲他清理這些依賴關係，就像黑板上的指甲* ......哈哈......我確切地知道您的意思。 – Sheridan

要完成此答案，請了解您正在覆蓋的控件（或您正在執行的任何其他操作）「捕獲」事件。可能發生的情況是，您的第二個邊框捕獲mouseOver事件，對其進行處理，然後阻止其進行調整或冒泡。爲了幫助您解決這類問題，請嘗試使用像XAMLSpy這樣的工具來查看運行時真正發生的情況 – Miiite

動畫WPF ControlTemplate中的兩個嵌套邊框元素

回答

相關問題