0

ユーザーがマウスをパネルの上に置かない限り、最小化する必要があるパネルがあります。コントロールの上にマウスを置くと、パネルの高さが大きくなるストーリーボードを使用して実装されます。現時点では、ターゲットの高さは 400 にハードコードされていますが、これはアプリケーションが起動するたびにパネルのコンテンツが異なるため、悪い解決策です (実行中は静的です)。

パネルを現在のコンテンツのサイズまで拡大できるアニメーションを作成するにはどうすればよいでしょうか?

<Window x:Class="MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="500" Width="525">
<Grid>
    <Border Margin="10,0" Background="LightGray" HorizontalAlignment="Left" VerticalAlignment="Top" CornerRadius="0,0,8,8">
        <Border.Effect>
            <DropShadowEffect Opacity="0.5"/>
        </Border.Effect>
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.MouseEnter">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Height" 
                                             From="25" 
                                             To="400" 
                                             Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>

            <EventTrigger RoutedEvent="Border.MouseLeave">
                <BeginStoryboard>
                    <BeginStoryboard.Storyboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetProperty="Height" 
                                             From="400" 
                                             To="25" 
                                             Duration="0:0:0.2" />
                        </Storyboard>
                    </BeginStoryboard.Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <StackPanel Margin="5">
            <TextBlock Height="25" Text="My items panel" />
            <ListBox MinWidth="150" MinHeight="100" ItemsSource="{Binding MyItems}" />
        </StackPanel>
    </Border>
</Grid>

編集: StackPanel の Height にバインドしようとしましたが、stackpanel の余白が考慮されていないため、パネルが必要以上に短くなるため、実際には役に立ちませんでした。

<DoubleAnimation Storyboard.TargetProperty="Height" 
                 From="{Binding ElementName=NameOfStackPanel, Path=ActualHeight}"
                 To="25" 
                 Duration="0:0:0.2" />
4

1 に答える 1

1

StackPanel の ActualHeight へのマージンの追加を処理するコンバーターを作成できます。複数値コンバーターを使用することもできるため、マージンもバインドでき、ファッジファクターをハードコードする必要はありません。最後に、stackpanel を別のパネル (マージンなし) でラップし、代わりにその高さにバインドすることができます。

于 2013-01-14T14:46:51.123 に答える