Hank
Hank

Reputation: 2616

How to set another control style when they are created in ItemsControl

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

Answers (1)

Fede
Fede

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

Related Questions