Discussion :

[Phossoyeur]

Bonjour tout le monde,

je développe une application pour Windows 8.1 et j'ai un petit souci coté XAML.

J'essaye de mettre en place un trigger pour faire disparaitre un textblock sur le clic d'un bouton.

Voici le code :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<StackPanel Grid.Row="1" Background="SteelBlue">
            <Grid x:Name="GridMenu" >
                <TextBlock x:Name="TbIsibudget" Text="IsiBudget" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
                <ToggleSwitch  HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Center" Width="100" OnContent="Recherche" OffContent="Recherche" Toggled="ToggleSwitch_Toggled"/>
            </Grid>
 
            <Grid>
                <Button x:Name="BtnTest">
                    <Button.Triggers>
                        <EventTrigger>
                            <EventTrigger.RoutedEvent>Button.Click</EventTrigger.RoutedEvent>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="Test" 
                                        Storyboard.TargetProperty="(TextBlock.Opacity)"
                                        From="1.0" To="0.0" Duration="0:0:1" 
                                        AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
                <TextBlock x:Name="Test" Text="AAAA" FontSize="25" Margin="150,0,0,0" Opacity="0">
 
                </TextBlock>
 
            </Grid>
        </StackPanel>

Le problème est que sur VS, le "Click" de la ligne
"<EventTrigger.RoutedEvent>Button.Click</EventTrigger.RoutedEvent>"
est souligné en bleu avec un message d'erreur : Routed event descriptor field 'ClickEvent' missing.

Du coup quand je lance l'appli, la textblock apparait puis disparait sans arrêt !

Quelqu'un aurait une idée ?

Merci de votre contribution !

EDIT : je me suis trompé de fofo, je voulait poster dans WPF sorry ! Un admin pour déplacer ^^' ?

[I_Pnose]

Bonjour,
Avec WinRT (et Silverlight) le seul EventTrigger qui marche encore c’est le Loaded de souvenir...
A mon avis tu peux oublier les triggers et t’orienter vers les VisualState à la place. Un truc dans ce gout-là :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<Button>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Pressed">
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="Test"
                        Storyboard.TargetProperty="(TextBlock.Opacity)"
                        From="1.0" To="0.0" Duration="0:0:1" 
                        AutoReverse="True" RepeatBehavior="Forever" />
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Button>

Par contre j’ai un gros doute sur la cible de ton storyboard ; à mon avis ça ne fonctionnera que si Test fait partie du template de ton bouton. Mais bon, ça se teste (je ne suis pas encore super à l’aise avec les carences de WinRT par rapport à WPF).

[Phossoyeur]

Qu'entends tu par "template du bouton" ?

J'ai essayé

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Button x:Name="BtnTest" Click="BtnTest_OnClick" Margin="196,-28,0,28">
                    <TextBlock x:Name="Test" Text="AAAA" FontSize="25" Margin="150,0,0,0" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation
                        Storyboard.TargetName="Test"
                        Storyboard.TargetProperty="(TextBlock.Opacity)"
                        From="1.0" To="0.0" Duration="0:0:1" 
                        AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                 </Button>

et

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Button x:Name="BtnTest" Click="BtnTest_OnClick" Margin="196,-28,0,28">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation
                        Storyboard.TargetName="Test"
                        Storyboard.TargetProperty="(TextBlock.Opacity)"
                        From="1.0" To="0.0" Duration="0:0:1" 
                        AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                 </Button>
                    <TextBlock x:Name="Test" Text="AAAA" FontSize="25" Margin="150,0,0,0" />

et les deux n'ont rien donné ...

EDIT : j'ai l'impression que dans le code que tu m'as fourni, on ne dit nul part au xaml de s'abonner au click sur le bouton pour lancer l'évènement ?

Est-ce qu'il existe un autre moyen de faire apparaitre / disparaitre des contrôles ?

J'ai vraiment pas envie de mettre un visible = true / false, je veux une belle appli lol ^^


Merci ! Bonne soirée !

[I_Pnose]

Qu'entends tu par "template du bouton" ?

Le template d’un control c’est grossièrement l’arbre XAML qui compose ce dernier. Dans le cas d’un bouton, par défaut on y trouve un Border qui contient un ContentPresenter (entre autres choses). Donc, sauf à redéfinir le style de ton bouton, ce dernier ne possèdera pas intrinsèquement un TextBlock nommé "Test" au sein de son template.

Je t’ai filé ce bout de code sans grande conviction, sachant que de toute manière tu n’aurais pas pu t’en sortir avec ton EventTrigger.

Maintenant il existe un petit package NuGet que j’ai utilisé dans une de mes applis et qui fait très bien le job ; WinRTTriggers (pour le récupérer tu fais clic droit sur "Références" > "Gérer les packages NuGet").

Et tu pourrais ensuite faire un truc dans ce gout-là :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<Button>
    <triggers:Interactions.Triggers>
        <triggers:EventTrigger EventName="Click">
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeTest}" />
        </triggers:EventTrigger>
    </triggers:Interactions.Triggers>
</Button>

En prenant soin de déclarer le storyboard ciblé en ressources :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<Page.Resources>
    <Storyboard x:Key="FadeTest">
        <DoubleAnimation
            Storyboard.TargetName="Test"
            Storyboard.TargetProperty="(TextBlock.Opacity)"
            From="1.0" To="0.0" Duration="0:0:1" />
    </Storyboard>
</Page.Resources>

Et le namespace adéquat :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

xmlns:triggers="using:WinRT.Triggers"

ça je sais que ça fonctionne ^^

Par contre je viens de relire ton message d’origine "la textblock apparait puis disparait sans arrêt !", c’est un peu normal qu’avec ton storyboard le control apparaisse puis disparaisse sans arret, c’est toi qui lui a demandé de faire ça avec les propriétés "AutoReverse" à "True" (qui signifie que lorsqu’il a terminé son animation, il le refait en sens inverse) et "RepeatBehavior" à "Forever" (qui comme son nom l’indique signifie que le storyboard va s’exécuter indéfiniment).

[Phossoyeur]

Ok super merci ! Je teste ça dans l'aprem !

[Phossoyeur]

Bon ben sa marche nikel merci ^^


Par contre du coup comment est ce que je peux faire pour faire un opacity 0 => 1 quand l'opacity du text block est égale à 0 et opacity 1 => 0 quand l'opacity du text block est égale à 1?

Merci ;-)

[I_Pnose]

Ben là tu vas atteindre les limites du "je veux tout faire sans une ligne de C#" ^^'

Ne pas pourrir le code-behind avec du code métier c’est une chose, mais ça ne sert à rien de se mettre des bâtons dans les roues en voulant absolument tout faire via le XAML.

Bon... malgré mon sermon, je pense qu’avec la lib que je t’ai conseillé tu peux encore t’en sortir en faisant un truc du style (pas testé, je ne garantis rien) :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<Button>
    <triggers:Interactions.Triggers>
        <triggers:EventTrigger EventName="Click">
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeOutTest}">
                <triggers:Condition LeftOperand="{Binding ElementName=Test, Path=Opacity}" Operator="Equals" RightOperand="1.0"/>
            </triggers:ControlStoryboardAction>
 
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeInTest}">
                <triggers:Condition LeftOperand="{Binding ElementName=Test, Path=Opacity}" Operator="Equals" RightOperand="0.0"/>
            </triggers:ControlStoryboardAction>
        </triggers:EventTrigger>
    </triggers:Interactions.Triggers>
</Button>

En déclarant évidemment les deux storyboards en ressources :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<Storyboard x:Key="FadeOutTest">
    <DoubleAnimation
        Storyboard.TargetName="Test"
        Storyboard.TargetProperty="(TextBlock.Opacity)"
        From="1.0" To="0.0" Duration="0:0:1" />
</Storyboard>
 
<Storyboard x:Key="FadeInTest">
    <DoubleAnimation
        Storyboard.TargetName="Test"
        Storyboard.TargetProperty="(TextBlock.Opacity)"
        From="0.0" To="1.0" Duration="0:0:1" />
</Storyboard>

Bon par contre j’ai un gros doute sur RightOperand="1.0" ; à mon avis il ne va pas aimer comparer une valeur de type double (la propriété Opacity) et une chaine de caractère (le "1.0" et le "0.0"). Si ça ne fonctionne effectivement pas, peut être essayer de déclarer deux autres ressources bien typées :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<x:Double x:Key="VisibleOpacity">1.0</x:Double>
<x:Double x:Key="HiddenOpacity">0.0</x:Double>

Et d’y faire référence dans les conditions du trigger :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<Button>
    <triggers:Interactions.Triggers>
        <triggers:EventTrigger EventName="Click">
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeOutTest}">
                <triggers:Condition LeftOperand="{Binding ElementName=Test, Path=Opacity}" Operator="Equals" RightOperand="{StaticResource VisibleOpacity}"/>
            </triggers:ControlStoryboardAction>
 
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeInTest}">
                <triggers:Condition LeftOperand="{Binding ElementName=Test, Path=Opacity}" Operator="Equals" RightOperand="{StaticResource HiddenOpacity}"/>
            </triggers:ControlStoryboardAction>
        </triggers:EventTrigger>
    </triggers:Interactions.Triggers>
</Button>

[Phossoyeur]

Wazaaaaa ^_^'

Même avec les ressources double sa ne passe pas.

Le truc c'est que je sais pas si en C# c'est possible de faire ça !

Je vais tenter deux trois trucs on verra

Merci beaucoup en tout cas !

[I_Pnose]

Avec un poil de C# tu as pleins de possibilités, l'une d'elle (pas très MVVM compliant, mais c'est pour illustrer le principe) :

Code xaml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<Page
    x:Class="W8App.MainPage"
    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:triggers="using:WinRT.Triggers"
    mc:Ignorable="d">
 
    <Page.Resources>
        <Storyboard x:Key="FadeOutTest">
            <DoubleAnimation
                Storyboard.TargetName="Test"
                Storyboard.TargetProperty="(TextBlock.Opacity)"
                From="1.0" To="0.0" Duration="0:0:1" />
        </Storyboard>
 
        <Storyboard x:Key="FadeInTest">
            <DoubleAnimation
                Storyboard.TargetName="Test"
                Storyboard.TargetProperty="(TextBlock.Opacity)"
                From="0.0" To="1.0" Duration="0:0:1" />
        </Storyboard>
    </Page.Resources>
 
    <triggers:Interactions.Triggers>
        <triggers:PropertySetTrigger RequiredValue="True" Binding="{Binding Path=IsTextVisible}" >
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeInTest}"/>
        </triggers:PropertySetTrigger>
 
        <triggers:PropertySetTrigger RequiredValue="False" Binding="{Binding Path=IsTextVisible}" >
            <triggers:ControlStoryboardAction Action="Start" Storyboard="{StaticResource FadeOutTest}"/>
        </triggers:PropertySetTrigger>
    </triggers:Interactions.Triggers>
 
    <StackPanel Background="SteelBlue" >
        <Grid >
            <TextBlock Text="IsiBudget" FontSize="30" HorizontalAlignment="Center" VerticalAlignment="Center" />
            <ToggleSwitch  HorizontalAlignment="Left" Margin="50,0,0,0" VerticalAlignment="Center" Width="100" OnContent="Recherche" OffContent="Recherche" />
        </Grid>
 
        <Grid>
            <TextBlock x:Name="Test" Text="AAAA" FontSize="25" Margin="150,0,0,0" Opacity="1.0"/>
 
            <Button Click="OnButtonClick"/>
        </Grid>
    </StackPanel>
</Page>

Et le code-behind de la vue :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
using System.ComponentModel;
using System.Runtime.CompilerServices;
using Windows.UI.Xaml;
 
namespace W8App
{
    public sealed partial class MainPage : INotifyPropertyChanged
    {
        private bool _isTextVisible;
 
        public bool IsTextVisible
        {
            get { return _isTextVisible; }
            set
            {
                _isTextVisible = value;
 
                OnPropertyChanged();
            }
        }
 
        public MainPage()
        {
            InitializeComponent();
 
            DataContext = this;
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
 
        private void OnPropertyChanged([CallerMemberName] string propName = "")
        {
            if (PropertyChanged != null) {PropertyChanged(this, new PropertyChangedEventArgs(propName));}
        }
 
        private void OnButtonClick(object sender, RoutedEventArgs e)
        {
            IsTextVisible = !IsTextVisible;
        }
    }
}

[Phossoyeur]

Nikel, parfait, génial ^^

Merci pour ton aide, la dernière solution marche super bien !

Bon week !