WPF'de sayfa yüklemesinde açılan kutuda varsayılan "--Select Team -" metni nasıl görüntülenir?

Bir WPF uygulamasında, MVP uygulamasında, Veritabanından getirilen verileri görüntülediğim bir açılan kutum var. Birleşik giriş kutusuna eklenen öğelerden önce, aşağıdaki gibi varsayılan metni görüntülemek istiyorum:

"- Takım Seçin -"

böylece sayfa yüklemede görüntülenir ve seçildiğinde metin silinmeli ve öğeler görüntülenmelidir.

DB'den veri seçiliyor. Kullanıcı birleşik giriş kutusundan bir öğe seçene kadar varsayılan metni görüntülemem gerekiyor.

Lütfen bana yol göster

Bunu yapmanın en kolay yolu şudur:

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

Açıkça diğer seçeneklerinizi eklemeniz gerekecek, ancak bu muhtemelen yapmanın en basit yoludur.

Bununla birlikte, bu yöntemin bir dezavantajı, birleşik giriş kutunuzun içindeki metin düzenlenemezken, yine de seçilebilir olmasıdır. Ancak, bugüne kadar bulduğum her alternatifin kalitesizliği ve karmaşıklığı göz önüne alındığında, bu muhtemelen oradaki en iyi seçenektir.

Bunu herhangi bir kod olmadan bir IValueConverter.

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

Burada yeniden kullanabileceğiniz dönüştürücü sınıfınız var.

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
}

Ve son olarak, dönüştürücünüzü bir kaynak bölümünde bildirmeniz gerekir.

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

Dönüştürücüler, dönüştürücü sınıfını yerleştirdiğiniz yerdir. Bir örnek:

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

Bu yaklaşımın en güzel yanı, kodunuzun arkasında kodun tekrarı olmamasıdır.

Tri Q'nun cevabını beğendim, ancak bu değer dönüştürücüleri kullanmak çok zor. PaulB bunu bir olay işleyiciyle yaptı, ancak bu da gereksiz. İşte saf bir XAML çözümü:

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

Hiç kimse saf bir xaml çözümünün karmaşık olması gerektiğini söylemedi. İşte metin kutusunda 1 veri tetikleyici bulunan basit bir tane. Marj ve istediğiniz gibi konumlandırın

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

Eleman IsEditable="True"üzerinde ayarlayın ComboBox. Bu görüntüler Textözelliği ComboBox.

Direkt olarak desteklenip desteklenmediğini bilmiyorum ama combo'yu bir etiketle kaplayabilir ve seçim boş değilse gizli olarak ayarlayabilirsiniz.

Örneğin.

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

Sonra seçimde işleyici değiştirildi ...

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

Dayanarak IceForge cevabı ben yeniden kullanılabilir bir çözüm hazırlanmış:

xaml stili:

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

kullanım örneği:

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

Birleşik kutularla denemedim ama bu benim için diğer kontrollerle çalıştı ...

ageektrapped blog yayını

Bir filigran görüntülemek için buradaki süsleyici katmanını kullanıyor.

HappyNomad'ın çözümü çok iyiydi ve sonunda bu biraz farklı çözüme ulaşmama yardımcı oldu.

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

En kolay yol, varsayılan metin ve verileri doğrudan ComboBox'ta veritabanından birleştirmek için CompositeCollection'ı kullanmaktır.

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

Ve Kaynaklar'da, ComboBox seçeneklerini DataContext'inize bağlamak için StaticResource tanımlayın, çünkü CollectionContainer'da doğrudan bağlama doğru çalışmıyor.

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

Bu şekilde, ComboBox seçeneklerinizi yalnızca xaml'de tanımlayabilirsiniz, örn.

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

Aşağıdakileri tavsiye ederim:

Bir davranış tanımlayın

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

Kullanıcı davranışı

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

IceForge'un cevabı oldukça yakındı ve bu sorunun en kolay çözümü AFAIK. Ama çalışmadığı için bir şeyi gözden kaçırdı (en azından benim için, aslında metni asla göstermiyor).

Sonunda, açılan kutunun seçili öğesi boş olmadığında gizlenmesi için TextBlock'un "Görünürlük" özelliğini "Gizli" olarak ayarlayamazsınız; bunu varsayılan olarak bu şekilde ayarlamanız gerekir (çünkü Tetikleyicilerle aynı yerde XAML'de bir Ayarlayıcı kullanarak tetikleyicilerde boş olmadığını kontrol edemezsiniz .

İşte onun temeline dayanan gerçek çözüm, eksik Setter Tetikleyicilerden hemen önce yerleştirilmiş:

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

DÜZENLEME: Aşağıdaki yorumlara göre, bu bir çözüm değildir. Nasıl çalıştığından emin değilim ve o projeyi kontrol edemiyorum.

En son XAML için bu yanıtı güncellemenin zamanı geldi.

Bu SO sorusunu bu soruya bir çözüm ararken bulduğumda, güncellenmiş XAML spesifikasyonunun basit bir çözümü olduğunu buldum.

Bu görevi gerçekleştirmek için artık "Yer tutucu" adlı bir öznitelik mevcuttur. Bu kadar basit (Visual Studio 2015'te):

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

En iyi uygulama değil ... ama iyi çalışıyor ...

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

Arkasındaki kod

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

Bu yazıda belirtildiği gibi bir filigranın bu durumda iyi çalışacağına inanıyorum

Biraz koda ihtiyaç var, ancak onu herhangi bir açılır kutu veya metin kutusu (ve hatta şifre kutuları) için yeniden kullanabilirsiniz, bu yüzden bu yolu tercih ediyorum

Projemde bir IsNullConverter sınıfı kullanıyorum ve benim için çalıştı. burada bunun kodu c #, Converter adında bir klasör oluşturun ve bu sınıfı bu klasöre ekleyin, çünkü kullanılan tetikleyici null yerine değeri desteklemiyor ve IsNullConverter bunu yapıyor

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

ad alanını xaml dosyasına bu şekilde ekleyin.

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

anlamına geliyor

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

xaml kodu aracılığıyla kullanılabilir hale getirmek için kaynakların altındaki bu satırı kullanın

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

işte xaml kodu, burada tetikleyiciyi kullandım, böylece birleşik giriş kutusunda bir öğe seçildiğinde metninizin görünürlüğü yanlış olur.

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

// ViewModel kodu

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

        }
    }

Biraz geç ama ..

Daha basit bir yol, IsDummy = true parametresiyle listeye sahte bir veri öğesi eklemek ve HitTestVisable olmadığından ve yüksekliğinin 1 piksel olduğundan (bir Dönüştürücü kullanarak) emin olmaktır, böylece görünmeyecektir.

Sadece SelectionChanged'e kayıt olmaktan ve içinde, dizini kukla öğe dizinine ayarlayın.

Bir cazibe gibi çalışır ve bu şekilde ComboBox'ın stiliyle ve renkleriyle veya uygulama temanızla uğraşmazsınız.

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

Yukarıdaki kod, bunu başarmanın en basit yolunu göstermektedir. Pencere yüklendikten sonra, birleşik giriş kutusunun .Text özelliğini kullanarak birleşik giriş kutusunun metnini bildirin. Bu, DatePicker, Textbox ve diğer kontrollere de genişletilebilir.

Kombine kutuyu veritabanından gelen verilerle şu şekilde kodlamadan önce yaptım -

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

1. Birleşik giriş kutusunun üstüne bir etiket koyun.

2. Etiket içeriğini birleşik giriş kutusu Metin özelliğine bağlayın.

3. Birleşik giriş kutusunun opaklığını sıfıra ayarlayın, Opaklık = 0.

4. Combobox Metin özelliğine varsayılan metni yazın

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

Yalnızca IsEditable özniteliğini true olarak ayarlayın

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

Bunun yarı eski olduğunu biliyorum ama peki ya bu şekilde:

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

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