WPFトリガー：トリガー内のスコープ外コントロールのスタイルの変更

Question

XAMLでこの問題の解決策を思いつきません。

左ボタンの IsMouseOver がtrueの場合、右ボタンの幅を特定の値にアニメーション化したい。これをどこに置くかわからない：ボタンのいずれかのスタイルまたはテンプレート、またはグリッド上のスタイル。可能ですか？

<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>

ありがとう

Answer 1

スタイルが割り当てられたコントロールのスコープ外でコントロールのプロパティを設定できるかどうかわかりません。たとえ可能であっても、そうするのは正しくないと思われます。 シナリオでできることは、イベントトリガーとストーリーボードを使用することです。イベントトリガーとストーリーボードは、両方のボタンから見える場所であればどこでも定義できます。 BtnLeftを変更する方法の例を次に示しますが、必要に応じて再利用できるように、ストーリーボードをツリーの少し上に配置することをお勧めします。

<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>

IsMouseOverプロパティの代わりに、MouseEnterおよびMouseLeaveイベントを使用できます。同じ機能が提供されるはずです。

編集： SourceName プロパティは、トリガーがボタンのスコープ内で定義されている場合、 EventTrigger から省略できます。