WPF Triggers: Changing an out-of-scope control's style in a trigger

Question

I can't come up with a solution for this problem in XAML:

I want to animate the width of the right button to a certain value when IsMouseOver of the left button is true. I dont know where to put this: in a style or template of one of the buttons or in a style on the grid. Is it even possible?

<Border Style="{StaticResource ContentBodyStyle}" x:Name="Border" >
    <Grid Width="Auto" Height="Auto" Style="{DynamicResource GridStyle1}">
        <Grid.ColumnDefinitions>
        <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button Margin="0,0,0,0" Content="Button" Grid.Row="0" x:Name="BtnLeft" Style="{DynamicResource ButtonStyle1}"/>
        <Button Margin="0,0,0,0" Content="Button" Grid.Column="1" x:Name="BtnRight" Width="0"/>
    </Grid>
</Border>

Thanks

Answer 1

I am not sure you can set properties for controls outside of the scope of a control with a style assigned to it. Even if it is possible, it doesn't seem right to do so. What you can do in your scenario is to use event triggers and storyboards, defined anywhere they'd be visible to both buttons. Here's an example of how to modify BtnLeft, although I'd prefer to put the storyboards a bit further up the tree to allow for reuse if necessary:

<Button Margin="0,0,0,0" Content="Button" Grid.Row="0" x:Name="BtnLeft" Style="{DynamicResource ButtonStyle1}">
    <Button.Resources>
        <Storyboard x:Key="OnMouseEnter1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                Storyboard.TargetName="BtnRight"
                Storyboard.TargetProperty="Width">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="75"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnMouseLeave1">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                Storyboard.TargetName="BtnRight" 
                Storyboard.TargetProperty="Width">
                <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Button.Resources>
    <Button.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="BtnLeft">
            <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="BtnLeft">
            <BeginStoryboard Storyboard="{StaticResource OnMouseLeave1}"/>
        </EventTrigger>
    </Button.Triggers>
</Button>

Instead of the IsMouseOver property, you can use MouseEnter and MouseLeave events. That should give you the same functionality.

Edit: The SourceName property can be omitted from the EventTrigger when that trigger is defined within the scope of the button.