Animation de la visibilité de caché pour effondré, et vice-versa

Je suis en train de réaliser quelque chose de similaire à l'iPhone la vue du message. Sur un clic sur un bouton, un bouton supprimer glisse pour chaque message et en cliquant sur "done" la suppression des boutons de glisse. J'ai été en mesure de réaliser que l'utilisation de mvvm à l'exception de la coulissantes effet.
Ici est le style que je pourrais écrire avec mes connaissances limitées:

<Style TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
            <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

Ici "ShowDeleteButton" est un bool propriété dans le modèle de vue. Cela fonctionne très bien. mais l'effondrement et "obtenir visibles" qui se passe brusquement et très rapide. J'ai besoin d'un glissement de l'animation.
Veuillez noter que la suppression des boutons disparaissent, le reste des contrôles doit tenir le reste de l'espace et, comme le bouton, les contrôles existants devraient reculer et de donner de l'espace à l'aide des boutons.
J'ai essayé avec le storyboard d'animation, mais même après une couple d'heures, je ne suis pas en mesure de comprendre les erreurs étranges, il est en train de lancer. Voici le code:

<DataTrigger Binding="{Binding ShowDeleteButton}" Value="false">
     <DataTrigger.EnterActions>
          <BeginStoryboard>
               <Storyboard BeginTime="0:0:1">
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
                     <DiscreteObjectKeyFrame Value="{x:Static Visibility.Collapsed}" />
                  </ObjectAnimationUsingKeyFrames>
                </Storyboard>
           </BeginStoryboard>
      </DataTrigger.EnterActions>
      <DataTrigger.ExitActions>
            <BeginStoryboard>
               <Storyboard BeginTime="0:0:1">
                 <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visiblity">
                     <DiscreteObjectKeyFrame Value="{x:Static Visibility.Visible}" />
                 </ObjectAnimationUsingKeyFrames>
               </Storyboard>
            </BeginStoryboard>
      </DataTrigger.ExitActions>
</DataTrigger>

Quelqu'un peut s'il vous plaît aider l'âme en détresse?

ce qui concerne

OriginalL'auteur James | 2012-05-22

Vieille question... hein...

De toute façon... pour oublier la visibilité. L'astuce consiste à animer Width/Height de Contrôle placé dans Grid's Column/Row où la Column/Row a Largeur définie sur Auto. Uff 🙂

Voici donc une Grid nommé "conteneur" avec deux colonnes. Dans la première colonne peut être placé tout ce que vous voulez, mais vous devez aligner à Droite car vous voulez déplacer lorsque votre bouton supprimer est affiché. Et dans la deuxième colonne, il s'agit d'un Contrôle (représentant votre DeleteButton) Avis que la première colonne de a Width="*" de la deuxième colonne a Width="Auto"

<Grid Background="Purple" Width="350" Height="100">
<CheckBox Content="Show" IsChecked="{Binding Path=ShowDeleteButton}" Height="16" HorizontalAlignment="Left" Margin="12,12,0,0" Name="checkBox1" VerticalAlignment="Top" />
<Grid x:Name="container" Margin="40,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Name="content" Margin="0">
<Label Content="Look I'm flyin'!" Margin="0,30,10,0" VerticalAlignment="Top" HorizontalAlignment="Right"/>
</Grid>
<Control Grid.Column="1" Margin="0">
<Control.Template>
<ControlTemplate>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ShowDeleteButton}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation 
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)" 
From="0" To="120" Duration="0:0:1" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation 
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)" 
From="120" To="0" Duration="0:0:1" AutoReverse="False"/>
</Storyboard>
</BeginStoryboard>
</DataTrigger.ExitActions>
</DataTrigger>
</ControlTemplate.Triggers>
<Grid x:Name="flyout" Width="0">
<Rectangle Fill="Green"/>
<Label Content="I'm DELETE button" Margin="10,30,0,0" VerticalAlignment="Top"/>
</Grid>
</ControlTemplate>
</Control.Template>
</Control>
</Grid>
</Grid>

Et la Control dans la Grille de la deuxième colonne a DataTrigger basé sur votre ViewModel de la propriété "ShowDeleteButton"

Depuis le Width de la colonne où la Control est placé est Auto vous pouvez modifier la largeur de la Control à l'aide de simples DoubleAnimation et vous obtenir le comportement désiré.

MODIFIER

Regardez cette option si vous souhaitez que le volant pour être au-dessus de tout.

<Grid x:Name="LayoutRoot">
<Grid x:Name="container" Width="120" HorizontalAlignment="Right">
<Button x:Name="button" Content="In" Margin="0,13,7.5,0" VerticalAlignment="Top" HorizontalAlignment="Right" d:LayoutOverrides="HorizontalAlignment">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation 
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)" 
From="0" To="120" Duration="0:0:1" AutoReverse="False"/> 
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
<Grid x:Name="flyout" Width="120" Margin="0" HorizontalAlignment="Right">
<Rectangle Fill="Green"/>
<Label Content="This is some label" Margin="6.038,27,1.006,0" VerticalAlignment="Top"/>
<Button Content="Out" Margin="11.917,58,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="80.083">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation 
Storyboard.TargetName="flyout"
Storyboard.TargetProperty="(Grid.Width)" 
From="120" To="0" Duration="0:0:1" AutoReverse="False"/> 
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</Grid>

Veuillez noter que le bouton "Out" peut être cliqué pendant son déplacement. Il devrait être probablement désactivé. Je l'ai juste fait comme ça parce que j'ai voulu faire simple et tout en xaml. Bien sûr, vous pouvez utiliser mahapps. Ou vous pouvez simplement faire aussi vite que c'est dans MahApps et il est impossible de cliquer deux fois dessus. 🙂 J'ai regardé MahApps FlyOutDemo et ma solution est beaucoup plus simple pour moi. Et je n'ai pas besoin de la troisième partie de la bibliothèque.

Merci @Viktor! Cependant, ce n'est pas exactement ce que je voulais. Cette approche est en fait re dimensionnement mon existantes en vue de les adapter à la nouvelle vue. Cependant, je voulais un volant qui viendrait plus de la vue existante. MahApps métro offre un tel contrôle. 🙂 J'apprécie ton effort pour répondre à la vieille question de bien! Acclamations..
alors ce que cela signifie? ", le bouton apparaît, les contrôles existants devraient reculer et de donner de l'espace à l'aide des boutons." Si vous ne voulez pas que alors encore approche pourrait être la même... animer la largeur de la grille avec de l'auto de largeur. Si vous ne pouvez pas gérer ce que je peux le regarder une fois de plus. j'ai essayé MahApps.Metro... ne l'aime pas. 🙂
voir le montage 🙂
Salut @Viktor merci encore je vais essayer cela. btw, ne vous dérangerait de me laisser savoir ce qui fait que vous n'aimez pas MahApps? Une chose est sûre de mon côté, ils ne fournissent styles pour datagrid et datepicker. Quelles sont les raisons de votre côté?
Fonctionne Comme un charme!A résolu beaucoup plus tôt, bien que, depuis le tutoriel ici: youtube.com/watch?v=Kkr4DtVOYmI Cependant, j'apprécie l'effort que vous avez pris pour répondre à la question. Cheers Viktor!

OriginalL'auteur Kapitán Mlíko

Vous devez vous connecter pour publier un commentaire.