Bagaimana cara menampilkan teks default "--Pilih Tim -" di kotak kombo pada pageload di WPF?

Di aplikasi WPF, di aplikasi MVP, saya memiliki kotak kombo, tempat saya menampilkan data yang diambil dari Database. Sebelum item ditambahkan ke kotak kombo, saya ingin menampilkan teks default seperti

"- Pilih Tim -"

sehingga pada pageload itu ditampilkan dan saat memilihnya teks harus dihapus dan item harus ditampilkan.

Sedang memilih data dari DB. Saya perlu menampilkan teks default sampai pengguna memilih item dari kotak kombo.

mohon bimbingannya

Cara termudah yang saya temukan untuk melakukan ini adalah:

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

Anda jelas perlu menambahkan opsi lain, tetapi ini mungkin cara termudah untuk melakukannya.

Namun ada satu kelemahan dari metode ini yaitu meskipun teks di dalam kotak kombo Anda tidak dapat diedit, itu masih dapat dipilih. Namun, mengingat kualitas dan kompleksitas yang buruk dari setiap alternatif yang saya temukan hingga saat ini, ini mungkin pilihan terbaik yang ada.

Anda dapat melakukan ini tanpa kode apa pun dengan menggunakan file IValueConverter.

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

Di sini Anda memiliki kelas konverter yang dapat Anda gunakan kembali.

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
}

Dan terakhir, Anda perlu mendeklarasikan konverter Anda di bagian resource.

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

Di mana Pengonversi adalah tempat Anda menempatkan kelas konverter. Contohnya adalah:

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

Hal yang sangat menyenangkan tentang pendekatan ini adalah tidak ada pengulangan kode dalam kode Anda.

Saya suka jawaban Tri Q, tetapi konverter nilai itu sulit digunakan. PaulB melakukannya dengan event handler, tapi itu juga tidak perlu. Inilah solusi XAML murni:

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

Tidak ada yang bilang larutan xaml murni harus rumit. Ini yang sederhana, dengan 1 pemicu data di kotak teks. Margin dan posisi sesuai keinginan

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

Set IsEditable="True"pada ComboBoxelemen. Ini akan menampilkan Textproperti dari ComboBox.

Saya tidak tahu apakah itu didukung secara langsung tetapi Anda dapat melapisi kombo dengan label dan mengaturnya ke tersembunyi jika pilihannya tidak null.

misalnya.

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

Kemudian dalam pemilihan berubah penangan ...

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

Berdasarkan jawaban IceForge, saya menyiapkan solusi yang dapat digunakan kembali:

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

contoh penggunaan:

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

Belum mencobanya dengan kotak kombo tetapi ini berhasil untuk saya dengan kontrol lain ...

ageektrapped blogpost

Dia menggunakan lapisan penghias di sini untuk menampilkan tanda air.

Solusi HappyNomad sangat bagus dan membantu saya pada akhirnya mendapatkan solusi yang sedikit berbeda ini.

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

Cara termudah adalah dengan menggunakan CompositeCollection untuk menggabungkan teks default dan data dari database secara langsung di ComboBox mis.

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

Dan di Resources, tentukan StaticResource untuk mengikat opsi ComboBox ke DataContext Anda, karena pengikatan langsung di CollectionContainer tidak berfungsi dengan benar.

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

Dengan cara ini Anda dapat menentukan opsi ComboBox Anda hanya di xaml mis

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

Saya akan merekomendasikan yang berikut ini:

Tentukan perilaku

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

Gunakan perilakunya

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

Jawaban IceForge cukup dekat, dan AFAIK adalah solusi termudah untuk masalah ini. Tapi itu melewatkan sesuatu, karena tidak berfungsi (setidaknya bagi saya, itu tidak pernah benar-benar menampilkan teks).

Pada akhirnya, Anda tidak bisa begitu saja menyetel properti "Visibilitas" dari TextBlock ke "Tersembunyi" agar bisa disembunyikan ketika item yang dipilih kotak kombo tidak null; Anda harus MENYETELnya seperti itu secara default (karena Anda tidak dapat memeriksa tidak null di pemicu , dengan menggunakan Setter di XAML di tempat yang sama dengan Pemicu.

Inilah solusi sebenarnya berdasarkan miliknya, Setter yang hilang ditempatkan tepat sebelum Pemicu:

<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: Per komentar di bawah, ini bukan solusi. Tidak yakin bagaimana saya membuatnya berfungsi, dan tidak dapat memeriksa proyek itu.

Saatnya memperbarui jawaban ini untuk XAML terbaru.

Menemukan pertanyaan SO ini mencari solusi untuk pertanyaan ini, saya kemudian menemukan bahwa spesifikasi XAML yang diperbarui memiliki solusi sederhana.

Atribut yang disebut "Placeholder" sekarang tersedia untuk menyelesaikan tugas ini. Ini sesederhana ini (dalam 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>

Bukan praktik terbaik..tapi berfungsi dengan baik ...

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

Kode di belakang

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

Saya percaya tanda air seperti yang disebutkan dalam posting ini akan berfungsi dengan baik dalam kasus ini

Ada sedikit kode yang diperlukan tetapi Anda dapat menggunakannya kembali untuk combobox atau kotak teks (dan bahkan kotak kata sandi) jadi saya lebih suka cara ini

Saya menggunakan kelas IsNullConverter dalam proyek saya dan itu berhasil untuk saya. berikut adalah kode untuk itu di c #, buat folder bernama Konverter dan tambahkan kelas ini di folder itu, karena pemicu yang digunakan tidak mendukung nilai daripada null, dan IsNullConverter lakukan saja

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

tambahkan namespace dalam file xaml seperti ini.

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

cara

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

gunakan baris ini di bawah sumber daya untuk membuatnya tersedia melalui kode xaml

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

di sini adalah kode xaml, saya digunakan di sini pemicu sehingga setiap kali item dipilih di kotak kombo, visibilitas teks Anda menjadi salah.

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

// Kode XAML

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

        }
    }

Sedikit terlambat tapi ..

Cara yang lebih sederhana adalah dengan menambahkan item data dummy ke daftar dengan parameter IsDummy = true dan pastikan itu bukan HitTestVisable dan tingginya 1 piksel (menggunakan Konverter) sehingga tidak akan terlihat.

Dari sekedar mendaftar ke SelectionChanged dan di dalamnya, setel indeks ke indeks item dummy.

Ini berfungsi seperti pesona dan dengan cara ini Anda tidak mengacaukan gaya dan warna ComboBox atau tema aplikasi Anda.

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

Kode di atas menunjukkan cara termudah untuk mencapainya. Setelah jendela dimuat, nyatakan teks kotak kombo, menggunakan properti .Text kotak kombo. Ini dapat diperluas ke DatePicker, Textbox, dan kontrol lainnya juga.

Saya melakukannya sebelum mengikat kotak kombo dengan data dari database di belakang kode seperti ini -

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

1. Beri label di atas kotak kombo.

2. Ikat konten label ke properti Teks kotak kombo.

3. Atur opacity kotak kombo menjadi nol, Opacity = 0.

4. Tulis teks default di properti Teks kotak kombo

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

Hanya setel atribut IsEditable ke true

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

Saya tahu ini agak tua tetapi bagaimana dengan cara ini:

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

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