使用文本框設計WPF組合框 - 項目

Question

我有一個組合框。每個項目由標題和說明組成。

我想在第二個項目中使用一個文本框。這很好。 ;）

現在我想問（因爲帶有文本框的項目比其他所有項目都高），如果選中的項目（帶有文本框）不顯示文本框，只有內容作爲字符串？

<ComboBox Height="35" Margin="0 2 0 2" SelectedIndex="0"> 
    <ComboBoxItem> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="30"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Image Source="/WpfApplication14;component/Resources/Icon1.ico" Height="22" Width="22" Grid.Column="0" HorizontalAlignment="Left" /> 
      <Grid Grid.Column="1"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
        <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="Item Titel 1" Grid.Row="0" FontWeight="Bold" /> 
       <TextBlock Text="Item Beschreibung 1" Grid.Row="1" FontStyle="Italic"> 
        <TextBlock.TextEffects><TextEffect Foreground="#FF555454" /></TextBlock.TextEffects> 
       </TextBlock> 
      </Grid> 
     </Grid> 
    </ComboBoxItem> 
    <ComboBoxItem> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="30"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Image Source="/WpfApplication14;component/Resources/Icon2.ico" Height="22" Width="22" Grid.Column="0" HorizontalAlignment="Left" /> 
      <Grid Grid.Column="1"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
        <RowDefinition Height="24" MinHeight="24" MaxHeight="24" /> 
       </Grid.RowDefinitions> 
       <TextBlock Text="Item Titel 2" Grid.Row="0" FontWeight="Bold" /> 
       <TextBox Grid.Row="1"> 
        <TextBox.Text>c:\temp\test</TextBox.Text> 
        <TextBox.Style> 
         <Style> 
          <Setter Property="TextBox.Height" Value="20"/> 
         </Style> 
        </TextBox.Style> 
       </TextBox> 
      </Grid> 
     </Grid> 
    </ComboBoxItem> 
</ComboBox> 

Answer 1

您可以通過使用一個TextBox要實現這一目標能夠編輯文本（就像你已經完成的那樣）和一個TextBlock來在選擇該項目時顯示文本。

您可以通過將TextBlock/TextBox的可見性綁定到ComboBoxItem的IsSelected值來顯示/隱藏TextBlock/TextBox，並使用ValueConverter將true/false值轉換爲Visible/Collapsed。

我已經編輯你的代碼有點這裏，使其更簡單，以及：

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions> 
    <ComboBox Name="myComboBox" Margin="0 2 0 2" SelectedIndex="0" Grid.Row="1"> 
     <ComboBoxItem> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="30"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Grid Grid.Column="1"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
         <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
        </Grid.RowDefinitions> 
        <TextBlock Text="Item Titel 1" Grid.Row="0" FontWeight="Bold" /> 
        <TextBlock Text="Item Beschreibung 1" Grid.Row="1" FontStyle="Italic" Foreground="#FF555454" /> 
       </Grid> 
      </Grid> 
     </ComboBoxItem> 
     <ComboBoxItem Name="myComboBoxItem"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="30"/> 
        <ColumnDefinition Width="*"/> 
       </Grid.ColumnDefinitions> 
       <Grid Grid.Column="1"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
         <RowDefinition /> 
        </Grid.RowDefinitions> 
        <TextBlock Text="Item Titel 2" Grid.Row="0" FontWeight="Bold" /> 

        <TextBox Grid.Row="1" Name="myTextBox" Text="c:\temp\test" Height="20" Visibility="{Binding ElementName=myComboBoxItem, Path=IsSelected, Converter={ValueConverter:BooleanToVisibilityConverter}}" /> 
        <TextBlock Name="myTextBlock" Text="{Binding ElementName=myTextBox, Path=Text}" Grid.Row="1" FontStyle="Italic" Foreground="#FF555454" Visibility="{Binding ElementName=myComboBoxItem, Path=IsSelected, Converter={ValueConverter:BooleanToVisibilityConverter}, ConverterParameter=Inverted}" /> 
       </Grid> 
      </Grid> 
     </ComboBoxItem> 
    </ComboBox> 
</Grid> 

代碼爲ValueConverter：

public abstract class BaseConverter : MarkupExtension 
{ 
    public override object ProvideValue(IServiceProvider serviceProvider) 
    { 
     return this; 
    } 
} 

public class BooleanToVisibilityConverter : BaseConverter, IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 

     if (parameter != null && parameter.ToString().Equals("Inverted")) 
     { 
      if ((bool)value) 
       return Visibility.Visible; 
      return Visibility.Collapsed; 
     } 
     if ((bool)value) 
      return Visibility.Collapsed; 
     return Visibility.Visible; 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     try 
     { 
      if (parameter.ToString().Equals("Inverted")) 
       return (Visibility)value != Visibility.Visible; 
      return (Visibility)value == Visibility.Visible; 
     } 
     catch (Exception e) 
     { 
      // Error handling 
      return false; 
     } 
    } 
} 

Answer 2

取代：

 <TextBox Grid.Row="1"> 
      <TextBox.Text>c:\temp\test</TextBox.Text> 
      <TextBox.Style> 
       <Style> 
        <Setter Property="TextBox.Height" Value="20"/> 
       </Style> 
      </TextBox.Style> 
     </TextBox> 

有：

 <TextBox Grid.Row="1" Text="c:\temp\test" Height="20" BorderThickness="0" Padding="0" /> 

，但你仍然有一個問題：

您的組合框是35個像素HIG H：

<ComboBox Height="35" Margin="0 2 0 2" SelectedIndex="0"> 

但是您的ComboBoxItem是16 + 24 = 40個像素高：

  <Grid.RowDefinitions> 
       <RowDefinition Height="16" MinHeight="16" MaxHeight="16" /> 
       <RowDefinition Height="24" MinHeight="24" MaxHeight="24" /> 
      </Grid.RowDefinitions> 

所以無論如何都會被截斷。要麼你的comboBox更大或者comboBoxItem更小。

側注意：您不需要使用文本效果上的文字塊的前景：

<TextBlock Foreground="#FF555454" /> 

將工作一樣好