Discussion :

[SIC83]

Bonjour à tous!

Je souhaite disposer d'un comportement me permettant de modifier le fond d'un seul TabItem (en rouge) d'un TabControl si un évènement particulier se produit (en l'occurrence, le passage à True de IsEnabled d'un bouton de ma page).

J'utilise MVVM light mais je ne pense pas que cela ait une incidence sur la réponse ...

Quelqu'un aurait-il une piste à me proposer ?

Bonne journée,
Frédéric

[SIC83]

Hum ..
Je vais peut-être reformuler car je n'ai pas l'impression que ma demande soit bien claire.

J'ai un TabControl disposant de 4 TabItems.
Je souhaite alerter l'utilisateur qu'un évènement s'est produit sur un TabItem même s'il n'est pas dessus.
L'évènement en question va (par binding sur mon VM) placer la propiété "IsEnable" d'un certain bouton sur true. Or, je souhaite que l'utilisateur puisse "voir" ce changement. Pour cela, j'ai donc prévu de passer le background du header de l'Item en rouge.

J'arrive bien a le passer en rouge (via un style particulier) mais je ne vois pas comment modifier le style lorsque l'évènement se déclenche.

Bonne journée,
Frédéric

[micka132]

En fait on ne sait pas vraiment ce qu'il y a dans chaque tabItem.
Comment un evenement peut se produire si l'on est pas sur le tabItem concerné?
En fait si un event arrive il n'a rien avoir avec une action du tabItem donné puisqu'aucune interraction utilisateur n'est envisageable.
A moins de travailler en asynchrone?

Quoiqu'il en soit l'evenement doit être géré est capté par le control contenant le tabControl. Peux tu mettre le code de ce tabcontrol?

[SIC83]

Bonjour Mickael et merci pour ton intérêt !

Voici le code du TabControl :

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
 
 <sdk:TabControl Margin="0" x:Name="CompoTabControl" SelectedIndex="{Binding CompoTabControlSelectedTabItem, Mode=TwoWay}" SelectionChanged="CompoTabControl_SelectionChanged" Height="190">
            <sdk:TabControl.Effect>
                <DropShadowEffect ShadowDepth="10" BlurRadius="15" Color="{Binding OmbreCompo}"/>
            </sdk:TabControl.Effect>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <Command:EventToCommand Command="{Binding CompoZoneClicCommand, Mode=OneWay}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <sdk:TabItem Header="Monument" x:Name="MonumentTabItem" IsEnabled="{Binding IsEnabledMonumentTab}">
 
...
 
            </sdk:TabItem>
        </sdk:TabControl>

Comme tu peux le constater, il y a une interaction importante entre ce TabControl et le ViewModel auquel il est lié. Bien que certains Bind puissent sembler superflux, ils ont tous une raison d'être.

Mon objectif est effectivement de binder la couleur du background à "quelque chose" (j'ai déjà fait cela dans ce TabControl avec une ombre portée (TabControl.Effect)).
Mais pour le TabItem, je sèche ...

Merci d'avance,
Frédéric

[micka132]

Peut-il y avoir plusieurs tabitem qui peuvent devenir rouge simultanément?
Lorsque l'utilisateur selectionne le tabItem il doit redevenir "normal" ?

[SIC83]

Le TabControl dispose de 5 TabItems. Les 2 premiers (respectivement 'Monument" et "Ensemble") peuvent effectivement être impactés (mais pas nécessairement en même temps).
Je m'explique : Lorsque je charge une fiche, elle peut être liée au monument et/ou à l'ensemble qui sont chargés dans les tabItems. J'ai une alerte (un simple TextBlock dont le visible est bindé sur une propriété de mon ViewModel) dans le tabItem qui m'indique que "la fiche n'est pas (encore) liée".
Si l'utilisateur n'a pas ouvert ce TabIetm, il n'a pas l'information. D'où mon idée de placer le BackGround du TabItem en rouge.

[micka132]

Finalement si le message "la fiche n'est pas (encore) liée" est affiché, même si tu rechanges d'onglet, tu peux laisser le tabitem en rouge non?
Du coup je te propose un simple converter:

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
public class DateConverter : IValueConverter
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if(value)
        {
                return Colors.Red;
        }
        else
        {
                return Colors.Transparent;
        }
 
    }
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Ensuite tu bindes la même propriété utilisé pour afficher le fameux message au background de ton tabitem header.

[SIC83]

Absolument ! C'est une excellente idée de passer par un simple converter. Je vais l'utiliser.
Le seul problème qui me reste (c'est surtout celui-là qui me pose souci) est : Comment dois-je m'y prendre au niveau du xaml ?
J'imagine que c'est dans la balise TabItem, mais je ne trouve pas la propriété ...

[micka132]

Code :

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

1
2
3
4
5
<sdk:TabItem Header="Monument" x:Name="MonumentTabItem" IsEnabled="{Binding IsEnabledMonumentTab}" Background="{Binding LaPropriete,  Converter={StaticResource TabHeaderColorConverter}}">
 
...
 
            </sdk:TabItem>

LaPropriete designe le booleen qui te permet d'afficher ""la fiche n'est pas (encore) liée"", et le TabHeaderColorConverter le converter à déclarer dans les ressources de ta page.

Edit: utilise Colors.Gray au lieu de Colors.Transparent.

[SIC83]

Des fois, je me demande où je vais chercher mes problèmes !!!

J'ai cherché partout mais pas sur la simple propriété Background !

En tous cas, Merci pour l'aide Mickael !
Je m'y mets tout de suite!!