web-dev-qa-db-de.com

Wenden Sie die Animation auf die Sichtbarkeitsänderung der WPF-Steuerung an

Mein Xaml ist 

   <Grid DockPanel.Dock="Top" >
<DockPanel Background="#bdbec0"  MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >                    
    <Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Name="TopMenuArea"  Height="55">
 some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area
</DockPanel>

Und der Code für die Maus mit der Maus ist

    private void showTopMenu_MouseEnter(object sender, MouseEventArgs e)
    {          
        TopMenuArea.Visibility = Visibility.Visible;
    }

Wie kann ich einen Animationseffekt anwenden, während Sie die Sichtbarkeit von TopMenuArea ändern? Gibt es eine Möglichkeit, es direkt von xaml zu machen?

12
Jibin Mathew

Eventtrigger

<DockPanel Background="#bdbec0"  MouseEnter="showTopMenu_MouseEnter" HorizontalAlignment="Stretch" Height="55" >
    <DockPanel.Triggers>
        <EventTrigger RoutedEvent="DockPanel.MouseEnter">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
                        From="0.0" To="1.0" Duration="0:0:1"></DoubleAnimation>                            
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="DockPanel.MouseLeave">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
                        From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </DockPanel.Triggers>
    <Button HorizontalAlignment="Center" VerticalAlignment="Center">Down</Button>
</DockPanel>
<DockPanel Background="#151515" LastChildFill="True" Visibility="Collapsed" Opacity="0" Name="TopMenuArea"  Height="55">
</DockPanel>

Oder benutze einen Style für das Ein- und Ausblenden (mit der Eingabe/Beendigung des Eventhandlers mit der Maus, wie du es getan hast)

<Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
  <Setter Property="Visibility" Value="Collapsed"/>
  <Setter Property="Opacity" Value="0"/>
  <Style.Triggers>
    <Trigger Property="Visibility" Value="Visible">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                             From="0.0" To="1.0" Duration="0:0:0.2"/>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
    </Trigger>
  </Style.Triggers>
</Style>

<DockPanel Background="#151515" LastChildFill="True" Style="{StaticResource VisibleAnimation}" Name="TopMenuArea"  Height="55">

Definieren Sie einfach den Stil in Ihren App-Ressourcen oder im lokalen Fenster oder UserControl. Sie verwenden den Animationsstil für jedes Steuerelement erneut.

verwenden Sie dies in Ihrem Stackpanel

<StackPanel Background="Red" HorizontalAlignment="Stretch" >
    <StackPanel.Triggers>
        <EventTrigger RoutedEvent="StackPanel.MouseLeftButtonDown" >
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TopMenuArea"
                From="1.0" To="0" Duration="0:0:1"></DoubleAnimation>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopMenuArea"
                        Storyboard.TargetProperty="Visibility">
                        <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="{x:Static Visibility.Collapsed}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </StackPanel.Triggers>
    <Label HorizontalAlignment="Center">Area outside top panel . Clicking here will hide top panel again</Label>
</StackPanel>
23
S.L.

Es ist eine alte Frage, aber ich habe eine Open-Source-Bibliothek zusammengestellt, um das Ausblenden und/oder Übersetzen bei geänderter Sichtbarkeit, geladenem oder bindendem Inhalt zu ermöglichen. 

Sie finden es unter SciChart.Wpf.UI.Transitionz auf Github und auf NuGet.

Verwendungszweck: 

<Window x:Class="WpfApplication15.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.Microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:tz="http://schemas.abtsoftware.co.uk/transitionz"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="b2vc"></BooleanToVisibilityConverter>
    </Window.Resources>
    <Grid>
        <CheckBox x:Name="CheckBox" Content="Is Visible?" IsChecked="False"></CheckBox>
        <TextBlock Text="Hello World!" FontSize="44" HorizontalAlignment="Center" VerticalAlignment="Center"
            Visibility="Collapsed"
            tz:Transitionz.Opacity="{tz:OpacityParams From=0, To=1, Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Translate="{tz:TranslateParams From='10,0', To='0,0', Duration=200, TransitionOn=Visibility}"
            tz:Transitionz.Visibility="{Binding ElementName=CheckBox, Path=IsChecked, Converter={StaticResource b2vc}}"/>
    </Grid>
</Window>

Was in ... resultiert:

 enter image description here

6
Dr. ABT

hier ist ein Beispiel

<Grid DockPanel.Dock="Top">
    <DockPanel Background="#bdbec0"
               x:Name="topPanel"
               HorizontalAlignment="Stretch"
               Height="55">
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center">Down</Button>
    </DockPanel>
    <DockPanel Background="#151515"
               LastChildFill="True"
               Name="TopMenuArea"
               IsHitTestVisible="False"
               Height="55">
        <TextBlock Foreground="White"> some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area</TextBlock>
        <DockPanel.Style>
            <Style TargetType="DockPanel">
                <Setter Property="Opacity"
                        Value="0" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsMouseOver,ElementName=topPanel}"
                                 Value="true">
                        <Setter Property="Opacity"
                                Value="1" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </DockPanel.Style>
    </DockPanel>
</Grid>

im obigen Beispiel habe ich IsHitTestVisible="False" auf dem DockPanel von TopMenuArea festgelegt, da ich sehen kann, dass es sich auf der vorherigen (Quelle für Trigger Panel) befindet

eine andere Option ist, die TopMenuArea als Quelle zu verwenden, wenn sie sich oben befindet

probe

<Grid DockPanel.Dock="Top">
    <DockPanel Background="#bdbec0"
               HorizontalAlignment="Stretch"
               Height="55">
        <Button HorizontalAlignment="Center"
                VerticalAlignment="Center">Down</Button>
    </DockPanel>
    <DockPanel Background="#151515"
               LastChildFill="True"
               Name="TopMenuArea"
               Height="55">
        <TextBlock Foreground="White"> some controls here in a horizontal strip , by default its hidden and when some one click on top button its visible and it wil be hidden when some one click outside this area</TextBlock>
        <DockPanel.Style>
            <Style TargetType="DockPanel">
                <Setter Property="Opacity"
                        Value="0" />
                <Style.Triggers>
                    <Trigger Property="IsMouseOver"
                                 Value="true">
                        <Setter Property="Opacity"
                                Value="1" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </DockPanel.Style>
    </DockPanel>
</Grid>

probieren Sie es aus und sehen Sie, ob es dem entspricht, wonach Sie suchen.

beide oben nur die Deckkraft zwischen 0 und 1 wechseln, Sie können auch Animation verwenden, um bei Bedarf einen Fade-Effekt zu erzeugen.

1
pushpraj

Ich finde eine Möglichkeit, Grid nach und nach mit ScaleTransform auszublenden.

Die ScaleTransform wird zum Ausblenden auf X = 0 Y = 0 gesetzt, X = 1 Y = 1 zum Anzeigen,

und Trigger mit der Eigenschaft Tag als Code unten:

At ViewModel:

private string _helpVisiblilityTag = "hide";
public string HelpVisiblilityTag
{
    get { return _helpVisiblilityTag; }
    set
    {
        _helpVisiblilityTag = value;
        NotifyOfPropertyChange(() => HelpVisiblilityTag);
    }
}

public void Hide()
{
    HelpVisiblilityTag = "hide";
}
public void Show()
{
    HelpVisiblilityTag = "show";
}

Bei Ansicht:

<Button Click="Show"/>



<Grid VerticalAlignment="Center" HorizontalAlignment="Center"  Tag="{Binding HelpVisiblilityTag}" 
              RenderTransformOrigin="0.5, 0.5"  >
    <Grid.Background>
        <SolidColorBrush Color="#D4F1FA" Opacity="0.8"/>
    </Grid.Background>

    <Grid.RenderTransform>
        <ScaleTransform x:Name="MyAnimatedScaleTransform" 
  ScaleX="0" ScaleY="0" />
    </Grid.RenderTransform>

    <Grid.Style>
        <Style TargetType="{x:Type Grid}">
            <Style.Triggers>
                <Trigger Property="Tag" Value="show">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="1.0" Duration="0:0:1" AutoReverse="False" />
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"  
                                From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
                                 >
                                    <DoubleAnimation.EasingFunction>
                                        <ElasticEase EasingMode="EaseOut" Oscillations="1"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                From="0.0" To="1" Duration="0:0:1" AutoReverse="False"
                                 >
                                    <DoubleAnimation.EasingFunction>
                                        <ElasticEase EasingMode="EaseOut" Oscillations="1"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>
                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Opacity"
                                          Duration="0:0:0.5" AutoReverse="False" />
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"
                                From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
                                 />
                                <DoubleAnimation
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
                                From="1" To="0.0" Duration="0:0:0.5" AutoReverse="False"
                                 />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Grid.Style>

    <Button Click="Hide"/>

</Grid>

Beispiel-Screenshot:

 enter image description here

0
yu yang Jian

Sie können ToggleButton Checked und UnChecked Routed Event mit Event Trigger verwenden:

 <ToggleButton Content="Toggle" Height="20" Width="60" Panel.ZIndex="2" VerticalAlignment="Top" HorizontalAlignment="Left">
        <ToggleButton.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard >
                        <DoubleAnimation Storyboard.TargetName="MyDockPanel" 
                                         Storyboard.TargetProperty="Opacity"
                                         From="0" To="1" 
                                         Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                       <DoubleAnimation Storyboard.TargetName="MyDockPanel" 
                                        Storyboard.TargetProperty="Opacity"
                                        From="1" To="0" 
                                        Duration="0:0:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </ToggleButton.Triggers>
    </ToggleButton>
    <DockPanel x:Name="MyDockPanel"  Background="Yellow" Opacity="0">
        <TextBlock DockPanel.Dock="Bottom" Text="DockPanel" 
                   VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </DockPanel>

Ergebnis:

 Result

0
tabby

Dies wäre ein guter Anfang ... Sie können einfach eine C # -Datei hinzufügen und die Eigenschaft wie folgt festlegen.

common:VisibilityAnimation.AnimationType="Fade" 
0
Sangwon Choi