Question

我想为堆叠面板制作一些动画，如右侧滑动。无论何时单击按钮，它都应该从隐藏到可见动画。我怎么能这样做？

      <ToggleButton Margin="40,0,0,0" Name="shw" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0" Height="25" Width="85" Background="White">
                    <TextBlock VerticalAlignment="Center" Background="Transparent" Text="Select Columns" Padding="0,0,2,0"/>
                </ToggleButton>
                <StackPanel  Margin="40" Name="pnlLeftMenu" Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" Orientation="Vertical" Height="200" HorizontalAlignment="Left">
                    <StackPanel.Style>
                        <Style TargetType="{x:Type StackPanel}">
                            <Setter Property="Visibility" Value="Hidden"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked,ElementName=shw}" Value="True">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </StackPanel.Style>
                    <Border BorderBrush="#FF16A3F7" BorderThickness="2" Width="150" Height="Auto" Background="White" >
                        <ListBox SelectionMode="Multiple" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding CustomList}"  VerticalAlignment="Center" BorderBrush="White">
                            <ListBox.ItemContainerStyle>
                                <Style TargetType="{x:Type ListBoxItem}">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                                <CheckBox Content="{TemplateBinding Content}" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" FontFamily="Calibri" FontSize="12" VerticalContentAlignment="Center" Padding="10,0"/>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </ListBox.ItemContainerStyle>
                        </ListBox>
                    </Border>
                </StackPanel>

Answer 1

试试这个：

使用事件触发器的Checked和UnChecked路由事件切换按钮：

 <ToggleButton x:Name="ProductToggleButton" Content="Toggle" Height="20" Width="60" Panel.ZIndex="10" VerticalAlignment="Top" HorizontalAlignment="Left">
        <ToggleButton.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation Storyboard.TargetName="pnlLeftMenu" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="pnlLeftMenu" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:0.3"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </ToggleButton.Triggers>
    </ToggleButton>

    <StackPanel Background="Yellow" Margin="40" Name="pnlLeftMenu" Opacity="0" Orientation="Vertical" Height="200" HorizontalAlignment="Left">
        <Border BorderBrush="#FF16A3F7" BorderThickness="2" Width="150" Height="Auto" Background="White" >
            <ListBox SelectionMode="Multiple" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ItemsSource="{Binding CustomList}"  VerticalAlignment="Center" BorderBrush="White">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <CheckBox Content="{TemplateBinding Content}" IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsSelected}" FontFamily="Calibri" FontSize="12" VerticalContentAlignment="Center" Padding="10,0"/>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
        </Border>
    </StackPanel>

<强>结果：

单击切换按钮或按钮时如何设置堆栈面板动画以将可见性从隐藏更改为可见？

1 个答案: