4

ドック パネルの右側にドッキングされているタブ コントロールがあります。タブ コントロールの幅は 10 に設定され、不透明度は 0 に設定されています。マウスを上に移動すると、タブ コントロールの幅が 200 に変更され、不透明度が 100 に変更されます。次に、マウスを離すと、タブ コントロールが元の値に戻ります。その方法がわかりません。誰か助けてくれませんか？以下は私のマークアップです。ここでは、タブ コントロールを最初に表示しようとしていました。

<UserControl x:Class="Cordata.Mrs.MVVM.Views.Controls.SlideoutView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d">
<UserControl.Resources>
    <Storyboard x:Key="OnMouseEnter1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="OptionsSlideout">
            <EasingDoubleKeyFrame KeyTime="0" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
        <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
    </EventTrigger>
</UserControl.Triggers>
<DockPanel HorizontalAlignment="Stretch">
    <TabControl Name="OptionsSlideout" TabStripPlacement="Bottom" Width="10" Margin="0,0,0,5" HorizontalAlignment="Stretch" DockPanel.Dock="Right" Opacity="0">
        <TabItem Header="Configure">
            <StackPanel Orientation="Vertical">
                <Button Name="ConfigurationBuilderButton" Width="80" Cursor="Hand" Click="ConfigurationBuilderButton_Click">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Source="/Images/ConfigurationBuilder.png" ToolTip="Run Configuration Builder" />
                                <TextBlock Text="Configuration Builder" TextWrapping="Wrap" FontWeight="Bold" />
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Button Name="LoadConfigurationButton" Width="80" Cursor="Hand" Margin="0,20,0,0" Click="LoadConfigurationButton_Click">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Source="/Images/LoadCustomConfiguration.png" ToolTip="Load Custom Configuration" />
                                <TextBlock Text="Load Configuration" TextWrapping="Wrap" FontWeight="Bold" />
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </StackPanel>
        </TabItem>
        <TabItem Header="Help">
            <TextBlock Text="Help" />
        </TabItem>
    </TabControl>
</DockPanel>
</UserControl>
4

1 に答える 1

5

Rectangleにいくつかのメイン コンテンツを含めることができるように、を追加して、右側DockPanelにドッキングできるようにする必要がありました。TabControlこれともう 1 つのことには、あなたのハンドラーは必要ありませんResources... テスト プロジェクトにハンドラーを実装していなかったため、ハンドラーを削除する必要がありました。とにかく、これはプロパティで a を使用するだけで必要なことをTrigger行いIsMouseOverます:

<DockPanel HorizontalAlignment="Stretch">
    <TabControl Name="OptionsSlideout" TabStripPlacement="Bottom" Width="10" Margin="0,0,0,5" DockPanel.Dock="Right" Opacity="0.0">
        <TabControl.Style>
            <Style>
                <Style.Triggers>
                    <Trigger Property="Control.IsMouseOver" Value="True">
                        <Trigger.EnterActions>
                            <StopStoryboard BeginStoryboardName="CloseStoryBoard" />
                            <BeginStoryboard Name="OpenStoryBoard">
                                <Storyboard DecelerationRatio="0.8">
                                    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Width)" To="200.0" />
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1.0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="OpenStoryBoard" />
                            <BeginStoryboard Name="CloseStoryBoard">
                                <Storyboard DecelerationRatio="0.8">
                                    <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Width)" To="10.0" />
                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.0" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TabControl.Style>
        <TabItem Header="Configure">
            <StackPanel Orientation="Vertical">
                <Button Name="ConfigurationBuilderButton" Width="80" Cursor="Hand">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Source="/Images/ConfigurationBuilder.png" ToolTip="Run Configuration Builder" />
                                <TextBlock Text="Configuration Builder" TextWrapping="Wrap" FontWeight="Bold" />
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
                <Button Name="LoadConfigurationButton" Width="80" Cursor="Hand" Margin="0,20,0,0">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <StackPanel>
                                <Image Source="/Images/LoadCustomConfiguration.png" ToolTip="Load Custom Configuration" />
                                <TextBlock Text="Load Configuration" TextWrapping="Wrap" FontWeight="Bold" />
                            </StackPanel>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </StackPanel>
        </TabItem>
        <TabItem Header="Help">
            <TextBlock Text="Help" />
        </TabItem>
    </TabControl>
    <Rectangle Name="DummyContent" Fill="White" />
</DockPanel>

今後の参考のために、これはコードが多すぎてここに掲載できません。Rectangle色付きまたはBorder要素を使用して、これをアニメーション化したいと言った場合、ユーザーが問題を視覚化するのは簡単だったでしょうBorder。そうすれば、ハンドラー、画像、Styleおよび/またはResources要素が欠落していても、ユーザーが助けようとするのが遅くなることはありません。投稿する前に問題を単純化することは常に良いことであり、時には自分の問題を解決することさえあります. とにかく、それは問題ではなく、そのコードはあなたが望むことをします。

于 2013-11-12T21:42:30.717 に答える