Jak wyświetlić domyślny tekst „--Select Team -” w polu kombi podczas ładowania strony w WPF?

W aplikacji WPF, w aplikacji MVP, mam pole kombi, dla którego wyświetlam dane pobrane z Bazy Danych. Przed elementami dodanymi do pola Combo chcę wyświetlić domyślny tekst, taki jak

" -- Wybierz drużynę --"

aby po załadowaniu strony wyświetlił się i po wybraniu go tekst powinien zostać wyczyszczony, a pozycje powinny zostać wyświetlone.

Trwa wybieranie danych z DB. Muszę wyświetlać domyślny tekst, dopóki użytkownik nie wybierze elementu z pola kombi.

Proszę, prowadź mnie

Najłatwiejszy sposób, jaki znalazłem, to:

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

Oczywiście będziesz musiał dodać inne opcje, ale jest to prawdopodobnie najprostszy sposób na zrobienie tego.

Jest jednak jedna wada tej metody, która polega na tym, że tekst w polu kombi nie będzie edytowalny, ale nadal można go wybrać. Jednak biorąc pod uwagę słabą jakość i złożoność każdej alternatywy, którą do tej pory znalazłem, jest to prawdopodobnie najlepsza opcja.

Możesz to zrobić bez żadnego kodu, używając pliku IValueConverter.

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

Tutaj masz klasę konwertera, której możesz ponownie użyć.

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
}

Na koniec musisz zadeklarować swój konwerter w sekcji zasobów.

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

Gdzie Converters to miejsce, w którym umieściłeś klasę konwertera. Oto przykład:

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

Bardzo fajną rzeczą w tym podejściu jest brak powtarzania kodu w kodzie.

Podoba mi się odpowiedź Tri Q, ale te konwertery wartości są trudne w użyciu. PaulB zrobił to za pomocą programu obsługi zdarzeń, ale to też jest niepotrzebne. Oto rozwiązanie w czystym języku XAML:

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

Nikt nie powiedział, że czyste rozwiązanie XAML musi być skomplikowane. Oto prosty, z jednym wyzwalaczem danych w polu tekstowym. Margines i pozycja według potrzeb

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

Ustaw IsEditable="True"na ComboBoxelemencie. Spowoduje to wyświetlenie Textwłaściwości pliku ComboBox.

Nie wiem, czy jest bezpośrednio obsługiwany, ale możesz nałożyć na kombinację etykietę i ustawić ją jako ukrytą, jeśli wybór nie jest pusty.

na przykład.

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

Następnie w wyborze zmieniono obsługę ...

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

Na podstawie odpowiedzi IceForge przygotowałem rozwiązanie wielokrotnego użytku:

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

przykład użycia:

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

Nie próbowałem tego z polami kombi, ale zadziałało to dla mnie z innymi kontrolkami ...

post na blogu ageektrapped

Używa tutaj warstwy adorner, aby wyświetlić znak wodny.

Rozwiązanie HappyNomad było bardzo dobre i pomogło mi ostatecznie dojść do tego nieco innego rozwiązania.

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

Najłatwiejszym sposobem jest użycie CompositeCollection do scalenia domyślnego tekstu i danych z bazy danych bezpośrednio w ComboBox np

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

W Resources zdefiniuj StaticResource, aby powiązać opcje ComboBox z DataContext, ponieważ bezpośrednie powiązanie w CollectionContainer nie działa poprawnie.

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

W ten sposób możesz zdefiniować opcje ComboBox tylko w XAML np

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

Polecam:

Zdefiniuj zachowanie

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

Użytkownik zachowanie

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

Odpowiedź IceForge była dość bliska i jest AFAIK najłatwiejszym rozwiązaniem tego problemu. Ale coś przeoczyło, ponieważ nie działało (przynajmniej dla mnie, tak naprawdę nigdy nie wyświetla tekstu).

Ostatecznie nie możesz po prostu ustawić właściwości „Widoczność” TextBlock na „Ukryty”, aby była ona ukryta, gdy element zaznaczony w polu kombi nie jest pusty; musisz ustawić to w ten sposób domyślnie (ponieważ nie możesz sprawdzić wartości Null w wyzwalaczach , używając Setter w XAML w tym samym miejscu co wyzwalacze.

Oto rzeczywiste rozwiązanie oparte na jego, brakujący seter jest umieszczony tuż przed wyzwalaczami:

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

EDYCJA: Zgodnie z poniższymi komentarzami, to nie jest rozwiązanie. Nie wiem, jak to działa, i nie mogę sprawdzić tego projektu.

Czas zaktualizować tę odpowiedź, aby uzyskać najnowszy kod XAML.

Znajdując to pytanie SO, szukając rozwiązania tego pytania, stwierdziłem, że zaktualizowana specyfikacja XAML ma proste rozwiązanie.

Do wykonania tego zadania jest teraz dostępny atrybut o nazwie „Symbol zastępczy”. To jest tak proste, jak to (w programie 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>

Nie jest to najlepsza praktyka, ale działa dobrze ...

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

Kod za

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

Uważam, że znak wodny, o którym wspomniano w tym poście, działałby dobrze w tym przypadku

Potrzebny jest trochę kodu, ale możesz go ponownie użyć dla dowolnego pola wielofunkcyjnego lub pola tekstowego (a nawet skrzynek z hasłami), więc wolę ten sposób

Używam klasy IsNullConverter w moim projekcie i zadziałało dla mnie. oto kod w języku c #, utwórz folder o nazwie Converter i dodaj tę klasę do tego folderu, ponieważ używany wyzwalacz nie obsługuje wartości for zamiast null, a IsNullConverter po prostu to robi

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

dodaj przestrzeń nazw w pliku XAML w ten sposób.

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

znaczy

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

użyj tej linii poniżej zasobów, aby była dostępna za pośrednictwem kodu XAML

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

tutaj jest kod XAML, użyłem tutaj wyzwalacza, więc za każdym razem, gdy element zostanie wybrany w polu kombi, widoczność tekstu staje się fałszywa.

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

// Kod XAML

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

        }
    }

Trochę późno, ale ...

Prostszym sposobem byłoby dodanie fikcyjnego elementu danych do listy z parametrem IsDummy = true i upewnienie się, że nie jest to HitTestVisable, a jego wysokość wynosi 1 piksel (przy użyciu konwertera), aby nie był widoczny.

Następnie wystarczy zarejestrować się w SelectionChanged i ustawić w nim indeks na fikcyjny indeks pozycji.

Działa jak urok i w ten sposób nie będziesz mieszać ze stylem i kolorami ComboBox lub motywem aplikacji.

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

Powyższy kod demonstruje najprostszy sposób osiągnięcia tego celu. Po załadowaniu okna zadeklaruj tekst pola kombi, używając właściwości .Text pola kombi. Można to rozszerzyć na DatePicker, Textbox i inne kontrolki.

Zrobiłem to przed powiązaniem combobox z danymi z bazy danych w za kodem w ten sposób -

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

1. Umieść etykietę na górze pudełka wielofunkcyjnego.

2. Powiąż zawartość etykiety z właściwością tekstu combobox.

3. Ustaw krycie combobox na zero, Opacity = 0.

4. Wpisz tekst domyślny we właściwości Text combobox

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

Ustaw tylko atrybut IsEditable na true

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

Wiem, że to jest na wpół stare, ale co z tego:

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

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