Reputation: 2616
The following shows two buttons. When the mouse is over the second button, I would like to change the firsts borderbrush to white.
<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>
I believe could possibly be done with a datatrigger on the first button as follows, but in order to do that I need to name the second button, not sure how to dynamically name.
<DataTrigger Binding="{Binding ElementName=closeBtn1, Path=IsMouseOver}" Value="True">
<Setter Property="BorderBrush" TargetName="btnBorder" Value="#FFFFFFFF"/>
</DataTrigger>
How to do this?
[EDIT]
This is the template for the first button where you'll see btnBorder is the border I would like to change the color of.
<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>
Upvotes: 1
Views: 283
Reputation: 44038
You can use the SourceName
property in a trigger, like this:
<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>
Don't worry about the names, WPF takes care of that, since the DataTemplate
has it's own Name Scope
Edit: your button ControlTemplate is wrong.
A ControlTemplate
should be defined in such a way that the properties of the Visual elements inside of it are "tied" to the properties of the Control
the template is applied to.
In other words, your btnBorder
should depend on the properties of the "parent templated item" the Control to which template is applied, in this case, btnModule
.
For that purpose, a common approach is to use a TemplateBinding
in the ControlTemplate, like this:
<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 -->
this will bind the btnBorder.BorderBrush
property to the parent's BorderBrush (in this case btnModule.BorderBrush
)
Upvotes: 4