Làm cách nào để hiển thị văn bản mặc định “--Select Team -” trong hộp tổ hợp khi tải trang trong WPF?

Trong ứng dụng WPF, trong ứng dụng MVP, tôi có một hộp tổ hợp để tôi hiển thị dữ liệu được lấy từ Cơ sở dữ liệu. Trước khi các mục được thêm vào hộp Tổ hợp, tôi muốn hiển thị văn bản mặc định như

" -- Chọn đội --"

để khi tải trang, nó sẽ hiển thị và khi chọn nó, văn bản sẽ được xóa và các mục sẽ được hiển thị.

Việc chọn dữ liệu từ DB đang diễn ra. Tôi cần hiển thị văn bản mặc định cho đến khi người dùng chọn một mục từ hộp tổ hợp.

Xin vui lòng hướng dẫn cho tôi

Cách dễ nhất mà tôi đã tìm thấy để làm điều này là:

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

Rõ ràng là bạn sẽ cần thêm các tùy chọn khác của mình, nhưng đây có lẽ là cách đơn giản nhất để thực hiện.

Tuy nhiên, có một nhược điểm của phương pháp này là trong khi văn bản bên trong hộp tổ hợp của bạn sẽ không thể chỉnh sửa được, nó vẫn có thể chọn được. Tuy nhiên, với chất lượng kém và độ phức tạp của mọi phương án mà tôi tìm thấy cho đến nay, đây có lẽ là lựa chọn tốt nhất hiện có.

Bạn có thể làm điều này mà không cần bất kỳ mã nào bằng cách sử dụng một IValueConverter.

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

Ở đây bạn có lớp chuyển đổi mà bạn có thể sử dụng lại.

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
}

Và cuối cùng, bạn cần khai báo trình chuyển đổi của mình trong phần tài nguyên.

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

Nơi Converters là nơi bạn đã đặt lớp chuyển đổi. Một ví dụ là:

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

Điều rất hay về cách tiếp cận này là không có mã lặp lại trong mã của bạn phía sau.

Tôi thích câu trả lời của Tri Q, nhưng những bộ chuyển đổi giá trị đó là một điều khó sử dụng. PaulB đã làm điều đó với một trình xử lý sự kiện, nhưng điều đó cũng không cần thiết. Đây là một giải pháp XAML tinh khiết:

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

Không ai nói rằng một giải pháp xaml tinh khiết phải phức tạp. Đây là một cách đơn giản, với 1 trình kích hoạt dữ liệu trên hộp văn bản. Ký quỹ và vị trí như mong muố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>

Đặt IsEditable="True"trên ComboBoxphần tử. Điều này sẽ hiển thị thuộc Texttính của ComboBox.

Tôi không biết liệu nó có được hỗ trợ trực tiếp hay không nhưng bạn có thể phủ kết hợp bằng một nhãn và đặt nó thành ẩn nếu lựa chọn không rỗng.

ví dụ.

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

Sau đó, trong phần lựa chọn đã thay đổi trình xử lý ...

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

Dựa trên câu trả lời của IceForge, tôi đã chuẩn bị một giải pháp có thể tái sử dụng:

phong cách 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>

ví dụ sử dụng:

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

Không thử với hộp kết hợp nhưng điều này đã hoạt động với tôi với các điều khiển khác ...

bài đăng trên blog của ageektrapped

Anh ấy sử dụng lớp tô điểm ở đây để hiển thị hình mờ.

Giải pháp của HappyNomad rất tốt và cuối cùng đã giúp tôi đi đến giải pháp hơi khác này.

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

Cách dễ nhất là sử dụng CompositeCollection để hợp nhất văn bản và dữ liệu mặc định từ cơ sở dữ liệu trực tiếp trong ComboBox, ví dụ:

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

Và trong phần Tài nguyên, định nghĩa StaticResource để ràng buộc các tùy chọn ComboBox với DataContext của bạn, bởi vì liên kết trực tiếp trong CollectionContainer không hoạt động chính xác.

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

Bằng cách này, bạn có thể xác định các tùy chọn ComboBox của mình chỉ trong xaml, ví dụ:

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

Tôi muốn giới thiệu những điều sau:

Xác định một hành vi

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

Hành vi của người dùng

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

Câu trả lời của IceForge khá gần và AFAIK có phải là giải pháp dễ dàng nhất cho vấn đề này. Nhưng nó đã bỏ lỡ điều gì đó, vì nó không hoạt động (ít nhất là đối với tôi, nó không bao giờ thực sự hiển thị văn bản).

Cuối cùng, bạn không thể chỉ đặt thuộc tính "Visibility" của TextBlock thành "Hidden" để ẩn nó khi mục đã chọn của hộp tổ hợp không phải là rỗng; bạn phải THIẾT LẬP theo cách đó theo mặc định (vì bạn không thể kiểm tra trình kích hoạt không null bằng cách sử dụng Bộ định vị trong XAML ở cùng nơi với Trình kích hoạt.

Đây là giải pháp thực tế dựa trên của anh ta, Setter bị mất tích được đặt ngay trước Trigger:

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

CHỈNH SỬA: Theo nhận xét bên dưới, đây không phải là một giải pháp. Không chắc mình đã làm việc như thế nào và không thể kiểm tra dự án đó.

Đã đến lúc cập nhật câu trả lời này cho XAML mới nhất.

Tìm câu hỏi SO này để tìm giải pháp cho câu hỏi này, sau đó tôi thấy rằng thông số XAML được cập nhật có một giải pháp đơn giản.

Một thuộc tính có tên "Trình giữ chỗ" hiện có sẵn để thực hiện tác vụ này. Nó đơn giản như sau (trong 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>

Không phải phương pháp hay nhất..nhưng hoạt động tốt ...

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

Mã ẩn

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

Tôi tin rằng hình mờ như được đề cập trong bài đăng này sẽ hoạt động tốt trong trường hợp này

Cần một chút mã nhưng bạn có thể sử dụng lại nó cho bất kỳ hộp tổ hợp hoặc hộp văn bản nào (và thậm chí cả hộp mật khẩu) nên tôi thích cách này hơn

Tôi đang sử dụng lớp IsNullConverter trong dự án của mình và nó phù hợp với tôi. đây là mã cho nó trong c #, hãy tạo một thư mục có tên Converter và thêm lớp này vào thư mục đó, vì trình kích hoạt được sử dụng không hỗ trợ giá trị thay vì null và IsNullConverter chỉ làm điều đó

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

thêm không gian tên trong tệp xaml như thế này.

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

có nghĩa

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

sử dụng dòng này bên dưới các tài nguyên để làm cho nó có sẵn thông qua mã xaml

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

đây là mã xaml, tôi đã sử dụng trình kích hoạt ở đây để bất cứ khi nào một mục được chọn trong hộp kết hợp, độ hiển thị của văn bản của bạn sẽ trở thành sai.

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

// Mã XAML

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

        }
    }

Hơi muộn nhưng ..

Một cách đơn giản hơn là thêm một mục dữ liệu giả vào danh sách với tham số IsDummy = true và đảm bảo rằng nó không phải là HitTestVisable và chiều cao của nó là 1 pixel (sử dụng Bộ chuyển đổi) để nó sẽ không bị nhìn thấy.

Hơn chỉ cần đăng ký với SelectionChanged và trong đó, đặt chỉ mục thành chỉ mục mục giả.

Nó hoạt động giống như một sự quyến rũ và theo cách này, bạn sẽ không gây rối với phong cách và màu sắc của ComboBox hoặc chủ đề ứng dụng của mình.

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

Đoạn mã trên minh họa cách đơn giản nhất để đạt được nó. Sau khi tải cửa sổ, khai báo văn bản của combobox, sử dụng thuộc tính .Text của combobox. Điều này cũng có thể được mở rộng cho DatePicker, Textbox và các điều khiển khác.

Tôi đã làm điều đó trước khi liên kết hộp kết hợp với dữ liệu từ cơ sở dữ liệu trong đoạn mã như thế này -

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

1. Đặt nhãn lên đầu hộp kết hợp.

2. Liên kết nội dung của nhãn với thuộc tính Văn bản kết hợp.

3. Đặt độ mờ của hộp tổ hợp thành 0, Opacity = 0.

4. Viết văn bản mặc định trong thuộc tính Văn bản hộp tổ hợp

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

Chỉ đặt thuộc tính IsEditable thành true

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

Tôi biết điều này là bán cũ nhưng những gì về cách này:

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

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