Wie wird der Standardtext "- Team auswählen -" im Kombinationsfeld beim Laden von Seiten in WPF angezeigt?

In einer WPF-App, in einer MVP-App, habe ich ein Kombinationsfeld, für das ich die aus der Datenbank abgerufenen Daten anzeige. Vor den Elementen, die dem Kombinationsfeld hinzugefügt wurden, möchte ich den Standardtext anzeigen, z

" -- Team auswählen --"

Damit beim Laden der Seite und beim Auswählen der Text gelöscht und die Elemente angezeigt werden.

Die Auswahl von Daten aus der Datenbank erfolgt. Ich muss den Standardtext anzeigen, bis der Benutzer ein Element aus dem Kombinationsfeld auswählt.

Bitte führen Sie mich

Der einfachste Weg, dies zu tun, ist:

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

Sie müssen natürlich Ihre anderen Optionen hinzufügen, aber dies ist wahrscheinlich der einfachste Weg, dies zu tun.

Diese Methode hat jedoch einen Nachteil: Der Text in Ihrem Kombinationsfeld kann zwar nicht bearbeitet werden, ist aber dennoch auswählbar. Angesichts der schlechten Qualität und Komplexität jeder Alternative, die ich bisher gefunden habe, ist dies wahrscheinlich die beste Option auf dem Markt.

Sie können dies ohne Code tun, indem Sie a verwenden IValueConverter.

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

Hier haben Sie die Konverterklasse, die Sie wiederverwenden können.

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
}

Und schließlich müssen Sie Ihren Konverter in einem Ressourcenabschnitt deklarieren.

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

Wo Konverter ist der Ort, an dem Sie die Konverterklasse platziert haben. Ein Beispiel ist:

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

Das sehr Schöne an diesem Ansatz ist, dass sich der Code in Ihrem Code nicht wiederholt.

Ich mag die Antwort von Tri Q, aber diese Wertekonverter sind schwierig zu bedienen. PaulB hat es mit einem Event-Handler gemacht, aber das ist auch unnötig. Hier ist eine reine XAML-Lösung:

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

Niemand sagte, eine reine Xaml-Lösung müsse kompliziert sein. Hier ist eine einfache mit 1 Datenauslöser im Textfeld. Rand und Position wie gewünscht

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

Setzen Sie IsEditable="True"auf das ComboBoxElement. Dies zeigt die TextEigenschaft von ComboBox.

Ich weiß nicht, ob es direkt unterstützt wird, aber Sie könnten die Kombination mit einer Beschriftung überlagern und sie auf versteckt setzen, wenn die Auswahl nicht null ist.

z.B.

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

Dann in der Auswahl Handler geändert ...

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

Basierend auf der Antwort von IceForge ich eine wiederverwendbare Lösung vorbereitet:

XAML-Stil:

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

Anwendungsbeispiel:

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

Ich habe es nicht mit Kombinationsfeldern versucht, aber das hat bei mir mit anderen Steuerelementen funktioniert ...

ageektrapped Blogpost

Er verwendet die Adorner-Ebene hier, um ein Wasserzeichen anzuzeigen.

Die Lösung von HappyNomad war sehr gut und hat mir geholfen, diese etwas andere Lösung zu finden.

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

Am einfachsten ist es, CompositeCollection zu verwenden, um Standardtext und -daten aus der Datenbank direkt in ComboBox zusammenzuführen, z

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

Definieren Sie in Resources StaticResource, um ComboBox-Optionen an Ihren DataContext zu binden, da die direkte Bindung in CollectionContainer nicht ordnungsgemäß funktioniert.

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

Auf diese Weise können Sie Ihre ComboBox-Optionen nur in xaml definieren, z

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

Ich würde folgendes empfehlen:

Definieren Sie ein Verhalten

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;
        }
    }
}

Benutzer das Verhalten

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

Die Antwort von IceForge war ziemlich nah und AFAIK ist die einfachste Lösung für dieses Problem. Aber es hat etwas verpasst, da es nicht funktioniert hat (zumindest für mich wird der Text nie angezeigt).

Am Ende können Sie die Eigenschaft "Sichtbarkeit" des TextBlocks nicht einfach auf "Versteckt" setzen, damit sie ausgeblendet wird, wenn das ausgewählte Element des Kombinationsfelds nicht null ist. Sie müssen es standardmäßig so einstellen (da Sie nicht überprüfen können, ob Trigger nicht null sind , indem Sie einen Setter in XAML an derselben Stelle wie die Trigger verwenden.

Hier ist die tatsächliche Lösung basierend auf seiner, wobei der fehlende Setter direkt vor den Auslösern platziert wird:

<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: Laut Kommentar unten ist dies keine Lösung. Ich bin mir nicht sicher, wie es funktioniert hat und kann das Projekt nicht überprüfen.

Es ist Zeit, diese Antwort für die neueste XAML zu aktualisieren.

Als ich diese SO-Frage fand, die nach einer Lösung für diese Frage suchte, stellte ich fest, dass die aktualisierte XAML-Spezifikation eine einfache Lösung bietet.

Ein Attribut namens "Platzhalter" ist jetzt verfügbar, um diese Aufgabe auszuführen. So einfach ist das (in 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>

Nicht die beste Vorgehensweise ... aber funktioniert gut ...

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

Code dahinter

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;
            }           
    }
}

Ich glaube, ein Wasserzeichen, wie in diesem Beitrag erwähnt, würde in diesem Fall gut funktionieren

Es wird ein bisschen Code benötigt, aber Sie können ihn für jede Combobox oder Textbox (und sogar für Passwortboxen) wiederverwenden, daher bevorzuge ich diesen Weg

Ich verwende eine IsNullConverter-Klasse in meinem Projekt und es hat bei mir funktioniert. Hier ist der Code dafür in c #. Erstellen Sie einen Ordner mit dem Namen Converter und fügen Sie diese Klasse in diesen Ordner ein, da der verwendete Trigger keinen Wert für statt null unterstützt, und IsNullConverter tut dies einfach

 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.");
    }
}

Fügen Sie den Namespace wie folgt in die xaml-Datei ein.

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

meint

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

Verwenden Sie diese Zeile unter den Ressourcen, um sie über den XAML-Code verfügbar zu machen

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

Hier ist der XAML-Code. Ich habe hier den Auslöser verwendet. Wenn also ein Element in der Combobox ausgewählt wird, wird die Sichtbarkeit Ihres Textes falsch.

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

// XAML-Code

// ViewModel-Code

    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");

        }
    }

Ein bisschen spät aber ..

Eine einfachere Möglichkeit wäre, der Liste ein Dummy-Datenelement mit dem Parameter IsDummy = true hinzuzufügen und sicherzustellen, dass es nicht HitTestVisable ist und eine Höhe von 1 Pixel (mithilfe eines Konverters) aufweist, damit es nicht angezeigt wird.

Registrieren Sie sich dann einfach bei SelectionChanged und setzen Sie darin den Index auf den Dummy-Elementindex.

Es funktioniert wie ein Zauber und auf diese Weise können Sie sich nicht mit dem Stil und den Farben der ComboBox oder Ihrem Anwendungsthema anlegen.

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

Der obige Code zeigt den einfachsten Weg, dies zu erreichen. Deklarieren Sie nach dem Laden des Fensters den Text der Combobox mithilfe der .Text-Eigenschaft der Combobox. Dies kann auch auf DatePicker, Textbox und andere Steuerelemente erweitert werden.

Ich habe es getan, bevor ich die Combobox mit Daten aus der Datenbank in Codebehind wie folgt verbunden habe -

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

1. Bringen Sie ein Etikett auf der Combobox an.

2. Binden Sie den Inhalt des Etiketts an die Eigenschaft Combobox Text.

3. Setzen Sie die Deckkraft der Combobox auf Null, Deckkraft = 0.

4. Schreiben Sie Standardtext in die Eigenschaft Combobox Text

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

Setzen Sie das IsEditable-Attribut nur auf true

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

Ich weiß, dass dies halb alt ist, aber was ist mit diesem Weg:

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

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