Question

我有一个样式触发器，使我的stackpanel可以通过鼠标悬停淡入淡出。我想在我的stackpanel中添加一个复选框，使其在选中时保持打开状态。当我的复选框被选中时，如何在XAML中停止故事板？

<StackPanel Width="25" Opacity="0" Margin="0,0,0,5" HorizontalAlignment="Stretch" 
DockPanel.Dock="Right" Background="#FFEEEEEE">
<StackPanel.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="600" />
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
To=".95" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <StopStoryboard BeginStoryboardName="OpenStoryBoard" />
                    <BeginStoryboard Name="CloseStoryBoard">
                        <Storyboard DecelerationRatio="0.8">
                            <DoubleAnimation 
Storyboard.TargetProperty="(FrameworkElement.Width)" To="25.0" />
                            <DoubleAnimation Storyboard.TargetProperty="Opacity" 
To="0.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </Style.Triggers>
    </Style>
</StackPanel.Style>
<CheckBox Content"Keep Open" />
</StackPanel>

Answer 1

您可以使用ControlTemplate代替StackPanel.Style。但是ControlTemplate必须在Window.Resources中声明。我为你制作了这段代码。我希望它按照你的意愿运作。

<Window.Resources>
    <ControlTemplate x:Key="myResource" TargetType="ContentControl">
        <StackPanel Name="myStackPanel" Width="25" Background="Black" Opacity="0">
            <CheckBox Name="myCheckBox" HorizontalAlignment="Center" Content="Keep Open" Foreground="Aqua"/>
        </StackPanel>
        <ControlTemplate.Triggers>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition SourceName="myStackPanel" Property="IsMouseOver" Value="True"/>
                    <Condition SourceName="myCheckBox" Property="IsChecked" Value="False"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="25" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="0.0" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.ExitActions>
            </MultiTrigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition SourceName="myCheckBox" Property="IsChecked" Value="True"/>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.EnterActions>
                <MultiTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="25" Duration="0:0:1" />
                            <DoubleAnimation Storyboard.TargetName="myStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="0.01" />
                        </Storyboard>
                    </BeginStoryboard>
                </MultiTrigger.ExitActions>
            </MultiTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>

<ContentControl Template="{StaticResource myResource}"/>

Answer 2

虽然我正在回答这个问题，但是在让我入门的过程中，Zafar可以归功于Zafar。还有一个条件需要添加到他的建议中，以获得我正在寻找的解决方案。我希望发布完整的解决方案，以防任何人需要此功能。下面是一个StackPanel，它通过鼠标悬停/退出操作淡入淡出。如果选中该复选框，它将保持打开状态，无论鼠标位置如何。一旦取消选中该复选框，就可以返回使用鼠标。我将不透明度设为1进行测试，但请务必根据需要设置不透明度。

<UserControl.Resources>
<ControlTemplate x:Key="SlideoutResource" TargetType="ContentControl">
    <DockPanel HorizontalAlignment="Stretch">
        <StackPanel Name="SlideoutStackPanel" Width="25" Opacity="1" Margin="0,0,0,5" HorizontalAlignment="Stretch" DockPanel.Dock="Right" Background="#FFEEEEEE">
            <CheckBox Name="KeepOpenCheckBox" Content="Keep Open" />
        </StackPanel>
        <Rectangle Name="DummyPlaceHolder" /> <!-- This placeholder is needed to make the fade work. -->
    </DockPanel>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition x:Name="MouseOverCondition" SourceName="SlideoutStackPanel" Property="IsMouseOver" Value="True"/>
                <Condition SourceName="KeepOpenCheckBox" Property="IsChecked" Value="False"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition SourceName="KeepOpenCheckBox" Property="IsChecked" Value="True"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition x:Name="MouseOutCondition" SourceName="SlideoutStackPanel" Property="IsMouseOver" Value="False"/>
                <Condition SourceName="KeepOpenCheckBox" Property="IsChecked" Value="False"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="25" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.EnterActions>
            <MultiTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Width)" To="600" Duration="0:0:1" />
                        <DoubleAnimation Storyboard.TargetName="SlideoutStackPanel" Storyboard.TargetProperty="(StackPanel.Opacity)" To="1" />
                    </Storyboard>
                </BeginStoryboard>
            </MultiTrigger.ExitActions>
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
</UserControl.Resources>
<ContentControl Template="{StaticResource SlideoutResource}"/>

停止执行故事板

2 个答案: