如何在ItemsControl中創建其他控件樣式時

Question

下面顯示了兩個按鈕。當鼠標移到第二個按鈕上時，我想將第一個邊框刷變爲白色。

<ItemsControl ItemsSource="{Binding Path=ModuleCollection}" > 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <Grid Margin="0"> 
       <Button Content="{Binding ModuleName}" Template="{StaticResource navModuleButton}"/> 
       <Button Template="{StaticResource CloseButtonStyle}"/> 
      </Grid> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

我相信可能被使用的第一個按鈕一個datatrigger做如下，但爲了做到這一點，我需要命名第二個按鈕，不知道如何動態名。

<DataTrigger Binding="{Binding ElementName=closeBtn1, Path=IsMouseOver}" Value="True"> 
    <Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/> 
</DataTrigger> 

如何做到這一點？

[編輯]

這是第一個按鈕，你會看到btnBorder是我想改變顏色的邊框模板。

<ControlTemplate x:Key="navModuleButton" TargetType="{x:Type Button}"> 
    <Border x:Name="btnBorder" RenderTransformOrigin="0.5,0.5" BorderThickness="1,1,1,1" CornerRadius="0,0,7,0"> 
     <Grid x:Name="Grid" RenderTransformOrigin="0.5,0.5"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <Border x:Name="Border1" RenderTransformOrigin="0.5,0.5" BorderThickness="0.5,0.5,0.5,0.5" CornerRadius="0,0,7,0"> 
       <Border.Background> 
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> 
         <LinearGradientBrush.RelativeTransform> 
          <TransformGroup> 
           <ScaleTransform ScaleX="1" ScaleY="1" /> 
           <RotateTransform Angle="90" /> 
          </TransformGroup> 
         </LinearGradientBrush.RelativeTransform> 
        </LinearGradientBrush> 
       </Border.Background> 
      </Border> 
      <DockPanel Name="myContentPresenterDockPanel"> 
       <ContentPresenter x:Name="myContentPresenter" Margin="10,0,21,0" 
            Content="{TemplateBinding Content}" 
            HorizontalAlignment="Center" VerticalAlignment="Center" 
            TextBlock.Foreground="White" /> 
      </DockPanel> 
     </Grid> 
    </Border> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/> 
     </Trigger> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsEnabled" Value="False"/> 
      </MultiTrigger.Conditions> 
      <Setter Property ="Opacity" Value="0.30" /> 
     </MultiTrigger> 
     <MultiTrigger> 
      <MultiTrigger.Conditions> 
       <Condition Property="IsPressed" Value="True"/> 
      </MultiTrigger.Conditions> 
      <Setter Property="Background" TargetName="Border1"> 
       <Setter.Value> 
        <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"> 
         <LinearGradientBrush.RelativeTransform> 
          <TransformGroup> 
           <TranslateTransform X="0" Y="0"/> 
           <ScaleTransform ScaleX="1" ScaleY="1"/> 
           <SkewTransform AngleX="0" AngleY="0"/> 
           <RotateTransform Angle="90"/> 
           <TranslateTransform X="0" Y="0"/> 
           <TranslateTransform X="0" Y="0"/> 
          </TransformGroup> 
         </LinearGradientBrush.RelativeTransform> 
         <LinearGradientBrush.GradientStops> 
          <GradientStopCollection> 
           <GradientStop Color="#837C7C7C" Offset="0"/> 
           <GradientStop Color="#83343434" Offset="0.99496336996337187"/> 
           <GradientStop Color="#83343434" Offset="0.523844744998591"/> 
           <GradientStop Color="#837C7C7C" Offset="0.48045224006762494"/> 
          </GradientStopCollection> 
         </LinearGradientBrush.GradientStops> 
        </LinearGradientBrush> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Cursor" Value="Hand" TargetName="Grid"/> 
      <Setter Property="BitmapEffect" TargetName="Border1"> 
       <Setter.Value> 
        <OuterGlowBitmapEffect GlowColor="Blue"/> 
       </Setter.Value> 
      </Setter> 
     </MultiTrigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 

Answer 1

可以使用SourceName財產觸發，像這樣：

<DataTemplate> 
    <Grid Margin="0"> 
     <Button x:Name="btnModule" 
       Content="{Binding ModuleName}" 
       Template="{StaticResource navModuleButton}"/> 

     <Button x:Name="btnClose" 
       Template="{StaticResource CloseButtonStyle}"/> 
    </Grid> 

    <DataTemplate.Triggers> 
     <Trigger SourceName="btnClose" Property="IsMouseOver"> 
      <Setter TargetName="btnModule" Property="BorderBrush" Value="White"/> 
     </Trigger> 
    </DataTemplate.Triggers> 
</DataTemplate> 

不要擔心名稱，WPF照顧的是，由於DataTemplate有它自己的Name Scope

編輯：你的按鈕ControlTemplate是錯誤的。

甲ControlTemplate應當以這樣的方式被定義爲在其內部的視覺元素的性質「捆綁」到Control的屬性的模板應用於。

換句話說，您的btnBorder應取決於應用模板的控件（在本例中爲btnModule）的「父模板項目」的屬性。

爲此，常用的方法是在ControlTemplate中使用TemplateBinding，像這樣：

<Border x:Name="btnBorder" 
     RenderTransformOrigin="0.5,0.5" 
     BorderThickness="1,1,1,1" 
     CornerRadius="0,0,7,0" 
     BorderBrush="{TemplateBinding BorderBrush}"> <!-- See the TemplateBinding here --> 

這將btnBorder.BorderBrush物業給母公司BorderBrush結合（在這種情況下btnModule.BorderBrush）