Comment afficher le texte par défaut «--Sélectionnez l'équipe -» dans la zone de liste déroulante sur pageload dans WPF?

Dans une application WPF, dans l'application MVP, j'ai une zone de liste déroulante, pour laquelle j'affiche les données extraites de Database. Avant les éléments ajoutés à la zone de liste déroulante, je souhaite afficher le texte par défaut tel que

" -- Choisis une équipe --"

de sorte que lors du chargement de la page, il s'affiche et lors de sa sélection, le texte doit être effacé et les éléments doivent être affichés.

La sélection des données de la base de données est en cours. Je dois afficher le texte par défaut jusqu'à ce que l'utilisateur sélectionne un élément dans la zone de liste déroulante.

Guidez-moi s'il-vous-plaît

Le moyen le plus simple que j'ai trouvé pour le faire est:

<ComboBox Name="MyComboBox"
 IsEditable="True"
 IsReadOnly="True"
 Text="-- Select Team --" />

Vous devrez évidemment ajouter vos autres options, mais c'est probablement la façon la plus simple de le faire.

Il y a cependant un inconvénient à cette méthode qui est que le texte à l'intérieur de votre zone de liste déroulante ne sera pas modifiable, il est toujours sélectionnable. Cependant, étant donné la mauvaise qualité et la complexité de chaque alternative que j'ai trouvée à ce jour, c'est probablement la meilleure option.

Vous pouvez le faire sans aucun code en utilisant un fichier IValueConverter.

<Grid>
   <ComboBox
       x:Name="comboBox1"
       ItemsSource="{Binding MyItemSource}"  />
   <TextBlock
       Visibility="{Binding SelectedItem, ElementName=comboBox1, Converter={StaticResource NullToVisibilityConverter}}"
       IsHitTestVisible="False"
       Text="... Select Team ..." />
</Grid>

Ici, vous avez la classe de convertisseur que vous pouvez réutiliser.

public class NullToVisibilityConverter : IValueConverter
{
    #region Implementation of IValueConverter

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value == null ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }

    #endregion
}

Et enfin, vous devez déclarer votre convertisseur dans une section de ressources.

<Converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />

Où Converters est l'endroit où vous avez placé la classe de convertisseur. Un exemple est:

xmlns:Converters="clr-namespace:MyProject.Resources.Converters"

La très bonne chose à propos de cette approche est qu'il n'y a pas de répétition de code dans votre code derrière.

J'aime la réponse de Tri Q, mais ces convertisseurs de valeur sont difficiles à utiliser. PaulB l'a fait avec un gestionnaire d'événements, mais c'est également inutile. Voici une solution XAML pure:

<ContentControl Content="{Binding YourChoices}">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <Grid>
                <ComboBox x:Name="cb" ItemsSource="{Binding}"/>
                <TextBlock x:Name="tb" Text="Select Something" IsHitTestVisible="False" Visibility="Hidden"/>
            </Grid>
            <DataTemplate.Triggers>
                <Trigger SourceName="cb" Property="SelectedItem" Value="{x:Null}">
                    <Setter TargetName="tb" Property="Visibility" Value="Visible"/>
                </Trigger>
            </DataTemplate.Triggers>
        </DataTemplate>
    </ContentControl.ContentTemplate> 
</ContentControl>

Personne n'a dit qu'une solution pure de xaml devait être compliquée. En voici un simple, avec 1 déclencheur de données dans la zone de texte. Marge et position comme vous le souhaitez

<Grid>
    <ComboBox x:Name="mybox" ItemsSource="{Binding}"/>
    <TextBlock Text="Select Something" IsHitTestVisible="False">
           <TextBlock.Style>
                <Style TargetType="TextBlock">
                      <Setter Property="Visibility" Value="Hidden"/>
                      <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=mybox,Path=SelectedItem}" Value="{x:Null}">
                                  <Setter Property="Visibility" Value="Visible"/>
                             </DataTrigger>
                      </Style.Triggers>
                </Style>
           </TextBlock.Style>
     </TextBlock>
</Grid>

Situé IsEditable="True"sur l' ComboBoxélément. Cela affichera la Textpropriété du ComboBox.

Je ne sais pas s'il est directement pris en charge, mais vous pouvez superposer le combo avec une étiquette et le définir sur masqué si la sélection n'est pas nulle.

par exemple.

<Grid>
   <ComboBox Text="Test" Height="23" SelectionChanged="comboBox1_SelectionChanged" Name="comboBox1" VerticalAlignment="Top" ItemsSource="{Binding Source=ABCD}"  />
   <TextBlock IsHitTestVisible="False" Margin="10,5,0,0" Name="txtSelectTeam" Foreground="Gray" Text="Select Team ..."></TextBlock>
</Grid>

Puis dans la sélection a changé de gestionnaire ...

private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    txtSelectTeam.Visibility = comboBox1.SelectedItem == null ? Visibility.Visible : Visibility.Hidden;
}

Sur la base de la réponse d'IceForge, j'ai préparé une solution réutilisable:

style xaml:

<Style x:Key="ComboBoxSelectOverlay" TargetType="TextBlock">
    <Setter Property="Grid.ZIndex" Value="10"/>
    <Setter Property="Foreground" Value="{x:Static SystemColors.GrayTextBrush}"/>
    <Setter Property="Margin" Value="6,4,10,0"/>
    <Setter Property="IsHitTestVisible" Value="False"/>
    <Setter Property="Visibility" Value="Hidden"/>
    <Style.Triggers>
        <DataTrigger Binding="{Binding}" Value="{x:Null}">
            <Setter Property="Visibility" Value="Visible"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

exemple d'utilisation:

<Grid>
     <ComboBox x:Name="cmb"
               ItemsSource="{Binding Teams}" 
               SelectedItem="{Binding SelectedTeam}"/>
     <TextBlock DataContext="{Binding ElementName=cmb,Path=SelectedItem}"
               Text=" -- Select Team --" 
               Style="{StaticResource ComboBoxSelectOverlay}"/>
</Grid>

Je ne l'ai pas essayé avec des combos mais cela a fonctionné pour moi avec d'autres contrôles ...

post de blog ageektrapped

Il utilise ici le calque adorner pour afficher un filigrane.

La solution de HappyNomad était très bonne et m'a aidé à arriver à cette solution légèrement différente.

<ComboBox x:Name="ComboBoxUploadProject" 
    Grid.Row="2"
    Width="200" 
    Height="23"                           
    Margin="64,0,0,0"
    ItemsSource="{Binding projectList}"
    SelectedValue ="{Binding projectSelect}" 
    DisplayMemberPath="projectName"
    SelectedValuePath="projectId"
    >
    <ComboBox.Template>
        <ControlTemplate TargetType="ComboBox">
            <Grid>
                <ComboBox x:Name="cb" 
                    DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" 
                    ItemsSource="{Binding ItemsSource, RelativeSource={RelativeSource TemplatedParent}}"
                    SelectedValue ="{Binding SelectedValue, RelativeSource={RelativeSource TemplatedParent}}" 
                    DisplayMemberPath="projectName"
                    SelectedValuePath="projectId"
                    />
                <TextBlock x:Name="tb" Text="Select Item..." Margin="3,3,0,0" IsHitTestVisible="False" Visibility="Hidden"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger SourceName="cb" Property="SelectedItem" Value="{x:Null}">
                    <Setter TargetName="tb" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ComboBox.Template>
</ComboBox>

Le moyen le plus simple est d'utiliser CompositeCollection pour fusionner le texte par défaut et les données de la base de données directement dans ComboBox, par exemple

    <ComboBox x:Name="SelectTeamComboBox" SelectedIndex="0">
        <ComboBox.ItemsSource>
            <CompositeCollection>
                <ComboBoxItem Visibility="Collapsed">-- Select Team --</ComboBoxItem>
                <CollectionContainer Collection="{Binding Source={StaticResource ResourceKey=MyComboOptions}}"/>
            </CompositeCollection>
        </ComboBox.ItemsSource>
    </ComboBox>

Et dans Resources, définissez StaticResource pour lier les options ComboBox à votre DataContext, car la liaison directe dans CollectionContainer ne fonctionne pas correctement.

<Window.Resources>
    <CollectionViewSource Source="{Binding}" x:Key="MyComboOptions" />
</Window.Resources>

De cette façon, vous pouvez définir vos options ComboBox uniquement en xaml, par exemple

   <ComboBox x:Name="SelectTeamComboBox" SelectedIndex="0">
        <ComboBox.ItemsSource>
            <CompositeCollection>
                <ComboBoxItem Visibility="Collapsed">-- Select Team --</ComboBoxItem>
                <ComboBoxItem >Option 1</ComboBoxItem>
                <ComboBoxItem >Option 2</ComboBoxItem>
            </CompositeCollection>
        </ComboBox.ItemsSource>
    </ComboBox>

Je recommanderais ce qui suit:

Définir un comportement

public static class ComboBoxBehaviors
{
    public static readonly DependencyProperty DefaultTextProperty =
        DependencyProperty.RegisterAttached("DefaultText", typeof(String), typeof(ComboBox), new PropertyMetadata(null));

    public static String GetDefaultText(DependencyObject obj)
    {
        return (String)obj.GetValue(DefaultTextProperty);
    }

    public static void SetDefaultText(DependencyObject obj, String value)
    {
        var combo = (ComboBox)obj;

        RefreshDefaultText(combo, value);

        combo.SelectionChanged += (sender, _) => RefreshDefaultText((ComboBox)sender, GetDefaultText((ComboBox)sender));

        obj.SetValue(DefaultTextProperty, value);
    }

    static void RefreshDefaultText(ComboBox combo, string text)
    {
        // if item is selected and DefaultText is set
        if (combo.SelectedIndex == -1 && !String.IsNullOrEmpty(text))
        {
            // Show DefaultText
            var visual = new TextBlock()
            {
                FontStyle = FontStyles.Italic,
                Text = text,
                Foreground = Brushes.Gray
            };

            combo.Background = new VisualBrush(visual)
            {
                Stretch = Stretch.None,
                AlignmentX = AlignmentX.Left,
                AlignmentY = AlignmentY.Center,
                Transform = new TranslateTransform(3, 0)
            };
        }
        else
        {
            // Hide DefaultText
            combo.Background = null;
        }
    }
}

Utilisateur le comportement

<ComboBox Name="cmb" Margin="72,121,0,0" VerticalAlignment="Top"
          local:ComboBoxBehaviors.DefaultText="-- Select Team --"/>

La réponse d'IceForge était assez proche et AFAIK est la solution la plus simple à ce problème. Mais il a manqué quelque chose, car cela ne fonctionnait pas (du moins pour moi, il n'affiche jamais le texte).

En fin de compte, vous ne pouvez pas simplement définir la propriété "Visibility" du TextBlock sur "Hidden" pour qu'elle soit masquée lorsque l'élément sélectionné de la zone de liste déroulante n'est pas nul; vous devez le définir de cette façon par défaut (puisque vous ne pouvez pas vérifier non null dans les déclencheurs , en utilisant un Setter en XAML au même endroit que les Triggers.

Voici la solution réelle basée sur la sienne, le Setter manquant étant placé juste avant les déclencheurs:

<ComboBox x:Name="combo"/>
<TextBlock Text="--Select Team--" IsHitTestVisible="False">
    <TextBlock.Style>
        <Style TargetType="TextBlock">

            <Style.Setters>
                <Setter Property="Visibility" Value="Hidden"/>
            </Style.Setters>

            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=combo,Path=SelectedItem}" Value="{x:Null}">
                    <Setter Property="Visibility" Value="Visible"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

EDIT: Selon les commentaires ci-dessous, ce n'est pas une solution. Je ne sais pas comment je l'ai fait fonctionner et je ne peux pas vérifier ce projet.

Il est temps de mettre à jour cette réponse pour le dernier XAML.

En trouvant cette question SO à la recherche d'une solution à cette question, j'ai ensuite constaté que la spécification XAML mise à jour avait une solution simple.

Un attribut appelé "Espace réservé" est désormais disponible pour accomplir cette tâche. C'est aussi simple que cela (dans Visual Studio 2015):

<ComboBox x:Name="Selection" PlaceholderText="Select...">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ComboBox>

Pas la meilleure pratique ... mais fonctionne bien ...

<ComboBox GotFocus="Focused"  x:Name="combobox1" HorizontalAlignment="Left" Margin="8,29,0,0" VerticalAlignment="Top" Width="128" Height="117"/>

Code derrière

public partial class MainWindow : Window
{
    bool clearonce = true;
    bool fillonce = true;
    public MainWindow()
    {
        this.InitializeComponent();          
        combobox1.Items.Insert(0, " -- Select Team --");
        combobox1.SelectedIndex = 0;
    }

    private void Focused(object sender, RoutedEventArgs e)
    {
            if(clearonce)
            {
                combobox1.Items.Clear();
                clearonce = false;
            }
            if (fillonce)
            {
              //fill the combobox items here 
                for (int i = 0; i < 10; i++)
                {
                    combobox1.Items.Insert(i, i);
                }
                fillonce = false;
            }           
    }
}

Je pense qu'un filigrane comme mentionné dans cet article fonctionnerait bien dans ce cas

Il y a un peu de code nécessaire mais vous pouvez le réutiliser pour n'importe quelle zone de liste déroulante ou zone de texte (et même des boîtes de mot de passe), donc je préfère cette façon

J'utilise une classe IsNullConverter dans mon projet et cela a fonctionné pour moi. voici le code pour cela en c #, créez un dossier nommé Converter et ajoutez cette classe dans ce dossier, car le déclencheur utilisé ne prend pas en charge la valeur pour plutôt que null, et IsNullConverter fait juste cela

 public class IsNullConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (value == null);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new InvalidOperationException("IsNullConverter can only be used OneWay.");
    }
}

ajoutez l'espace de noms dans le fichier xaml comme ceci.

xmlns:Converters="clr-namespace:TymeSheet.Converter"

veux dire

xmlns:Converters="clr-namespace:YourProjectName.Converter"

utilisez cette ligne sous les ressources pour la rendre disponible via le code xaml

<Converters:IsNullConverter x:Key="isNullConverter" />

voici le code xaml, j'ai utilisé ici le déclencheur donc chaque fois qu'un élément est sélectionné dans la zone de liste déroulante, la visibilité de votre texte devient fausse.

<TextBlock Text="Select Project" IsHitTestVisible="False" FontFamily="/TimeSheet;component/Resources/#Open Sans" FontSize="14" Canvas.Right="191" Canvas.Top="22">
                        <TextBlock.Resources>
                            <Converters:IsNullConverter x:Key="isNullConverter"/>
                        </TextBlock.Resources>
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=ProjectComboBox,Path=SelectedItem,Converter={StaticResource isNullConverter}}" Value="False">
                                        <Setter Property="Visibility" Value="Hidden"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>

// Code XAML

// Code ViewModel

    private CategoryModel _SelectedCategory;
    public CategoryModel SelectedCategory
    {
        get { return _SelectedCategory; }
        set
        {
            _SelectedCategory = value;
            OnPropertyChanged("SelectedCategory");
        }
    }

    private ObservableCollection<CategoryModel> _Categories;
    public ObservableCollection<CategoryModel> Categories
    {
        get { return _Categories; }
        set
        {
            _Categories = value;
            _Categories.Insert(0, new CategoryModel()
            {
                CategoryId = 0,
                CategoryName = " -- Select Category -- "
            });
            SelectedCategory = _Categories[0];
            OnPropertyChanged("Categories");

        }
    }

Un peu tard mais ..

Un moyen plus simple serait d'ajouter un élément de données factice à la liste avec le paramètre IsDummy = true et de s'assurer qu'il n'est pas HitTestVisable et que sa hauteur est de 1 pixel (en utilisant un convertisseur) afin qu'il ne soit pas vu.

Enregistrez-vous simplement sur SelectionChanged et définissez l'index sur l'index de l'élément factice.

Cela fonctionne comme un charme et de cette façon, vous ne jouez pas avec le style et les couleurs de la ComboBox ou du thème de votre application.

InitializeComponent()
yourcombobox.text=" -- Select Team --";

Le code ci-dessus montre le moyen le plus simple d'y parvenir. Après le chargement de la fenêtre, déclarez le texte de la zone de liste déroulante à l'aide de la propriété .Text de la zone de liste déroulante. Cela peut également être étendu au DatePicker, à la zone de texte et à d'autres contrôles.

Je l'ai fait avant de lier la zone de liste déroulante avec les données de la base de données dans codebehind comme ceci -

Combobox.Items.Add("-- Select Team --");
Combobox.SelectedIndex = 0;

1. Mettez une étiquette sur la zone de liste déroulante.

2. Liez le contenu de l'étiquette à la propriété Text de la zone de liste déroulante.

3. Définissez l'opacité de la zone de liste déroulante sur zéro, Opacité = 0.

4. Écrire le texte par défaut dans la propriété Text de la zone de liste déroulante

         <ComboBox Name="cb"
           Text="--Select Team--" Opacity="0" 
           Height="40" Width="140" >
            <ComboBoxItem Content="Manchester United" />
            <ComboBoxItem Content="Lester" />
        </ComboBox>
    </Grid>

Définissez uniquement l'attribut IsEditable sur true

<ComboBox Name="comboBox1"            
          Text="--Select Team--"
          IsEditable="true"  <---- that's all!
          IsReadOnly="true"/>

Je sais que c'est semi-vieux mais qu'en est-il de cette façon:

<DataTemplate x:Key="italComboWM">
    <TextBlock FontSize="11" FontFamily="Segoe UI" FontStyle="Italic" Text="--Select an item--" />
</DataTemplate>

<ComboBox EmptySelectionBoxTemplate="{StaticResource italComboWM}" />