WPF事件觸發器更改其他UI元素

我在我的XAML中定義了ListBox，它使用ItemTemplate。在ItemTemplate裏面放置了Image。WPF事件觸發器更改其他UI元素

<ListBox.ItemTemplate> 
<ListBox.ItemsPanel> 
<ItemsPanelTemplate> 
    <WrapPanel x:Name="itmTempPanel" IsItemsHost="True" ItemWidth="60" ItemHeight="60" Width="{Binding ElementName=lstFilesDropped, Path=Width}"/> 
</ItemsPanelTemplate> 
</ListBox.ItemsPanel> 
... 
<Image> 
<Image.Triggers> 
    <EventTrigger RoutedEvent="MouseEnter"> 
    <BeginStoryboard> 
    <Storyboard> 
    <DoubleAnimation Storyboard.TargetProperty="Height" To="71" Duration="0:0:0.3" /> 
    <DoubleAnimation Storyboard.TargetName="itmTempPanel" Storyboard.TargetProperty="Height" To="71"  Duration="0:0:0.3" /> 
    </Storyboard> 
    </BeginStoryboard> 
    </EventTrigger> 
</Image.Triggers> 
</Image> 
</ListBox.ItemTemplate>

當鼠標進入我要開始上的WrapPanel是圖像高度和我的ItemsPanelTemplate中定義的故事板圖像。

當鼠標進入這個圖像我得到了以下異常：「'itmTempPanel'的名稱不能在'System.Windows.Controls.Image'的名稱範圍中找到。

如何從開始故事板的元素更改其他元素屬性。

謝謝你的幫助！

來源

2014-09-28 Jacob

有兩種方法可以解決這個問題。第一個是在.NET 4.0中爲WPF使用{x:Reference}功能。如果您的應用程序面向.NET 4.0，則應遵循此方法。這個想法是將Storyboard.Target設置爲您想要動畫的對象（在本例中爲WrapPanel）。雖然我們可以使用Binding作爲Storyboard.Target，但我們不能使用RelativeSource或ElementName來設置綁定源，因爲Storyboard（或時間軸）不是FrameworkElement（或FrameworkContentElement）。指定源的唯一方法是設置Source屬性。不過，我們通常可以將其設置爲StaticResource或DynamicResource或直接（使用元素語法）。幸運的是，{x:Reference}是在.NET 4.0中引入的，這可以幫助您引用XAML中的任何命名對象（它的工作方式不像ElementName）。這是第一種方法的代碼：

<DoubleAnimation Storyboard.Target="{Binding Source={x:Reference itmTempPanel}}" 
       Storyboard.TargetProperty="Height" 
       To="71" Duration="0:0:0.3" />

第二種方法是基於DataTrigger。但是，此觸發器不適用於Image，它正好適用於WrapPanel。但現在ElementName可用於綁定觸發源到Image。所以當{x:Reference}不支持時，這種方法是可用的。

<WrapPanel x:Name="itmTempPanel" IsItemsHost="True" ItemWidth="60" ItemHeight="60" 
      Width="{Binding ElementName=lstFilesDropped, Path=Width}"> 
    <WrapPanel.Style> 
    <Style TargetType="WrapPanel"> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding IsMouseOver,ElementName=image}" 
         Value="True"> 
       <DataTrigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
        <DoubleAnimation Storyboard.TargetProperty="Height" 
             To="71" Duration="0:0:0.3" /> 
        </Storyboard> 
       </BeginStoryboard> 
       </DataTrigger.EnterActions> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
    </WrapPanel.Style> 
</WrapPanel> 

<Image Name="image"> 
    <Image.Triggers> 
    <EventTrigger RoutedEvent="MouseEnter"> 
     <BeginStoryboard> 
     <Storyboard> 
      <DoubleAnimation Storyboard.TargetProperty="Height" To="71" 
          Duration="0:0:0.3" />  
     </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
    </Image.Triggers> 
</Image>

請注意，您必須給Image一個名稱（如image）。 WrapPanel的<DoubleAnimation>已刪除。我們使用EventTrigger而不是屬性來使用DataTrigger。當IsMouseOver爲false（等於MouseLeave）時，您還可以指定DataTrigger.ExitActions開始動畫。

來源

2014-09-28 11:49:51

哇，非常感謝！我很欣賞這一點，這對我非常有幫助，最後，瞭解如何僅通過xaml管理動畫。再次謝謝你！！ – Jacob 2014-09-28 12:05:23

小修正。在.NET 4.0中引入'x：Reference'，而不是在.Net 4.5中引入。 – 2014-09-28 13:16:36

@RohitVats謝謝，忘了重新檢查它。 – 2014-09-28 13:22:28

WPF事件觸發器更改其他UI元素

回答

相關問題