Modifier le background d'un TabItem

Version imprimable

11/05/2013, 17h46
SIC83

Modifier le background d'un TabItem

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
12/05/2013, 09h34
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. :koi:

Bonne journée,
Frédéric
16/05/2013, 11h15
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?

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

Voici le code du TabControl :
Code:

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

16/05/2013, 12h18
micka132

Peut-il y avoir plusieurs tabitem qui peuvent devenir rouge simultanément?
Lorsque l'utilisateur selectionne le tabItem il doit redevenir "normal" ?
16/05/2013, 12h42
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.

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:

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.

16/05/2013, 13h36
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é ... :?

Code:

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.

16/05/2013, 14h54
SIC83

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

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!!