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 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应该以这样一种方式定义，即它内部的Visual元素的属性“绑定”到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）

如何在ItemsControl中创建另一个控件样式

1 个答案: