Styling a WPF Combobox with a Textbox-Item - wpf

Question

I have a Combobox. Each item consists of a headline and a description.
I want to use in the second item a text box. This works well. ;)
Now I wanted to ask (because the item with the text box is higher than all the others), whether it is possible that if the item which is selected (with the textbox) does not displayed the textbox, only the contents as a string?
<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

You can achieve this by using a TextBox to be able to edit the text (like you've done) and a TextBlock to display the text when the item is selected.
You can show/hide the TextBlock/TextBox by binding the Visibility of them to the ComboBoxItem's IsSelected value and use a ValueConverter to convert the true/false value to Visible/Collapsed.
I've edited your code a bit here to make it simpler as well:
<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>
The code for the 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

replace:
<TextBox Grid.Row="1">
<TextBox.Text>c:\temp\test</TextBox.Text>
<TextBox.Style>
<Style>
<Setter Property="TextBox.Height" Value="20"/>
</Style>
</TextBox.Style>
</TextBox>
with:
<TextBox Grid.Row="1" Text="c:\temp\test" Height="20" BorderThickness="0" Padding="0" />
but you will still have an issue:
your comboBox is 35 pixels high:
<ComboBox Height="35" Margin="0 2 0 2" SelectedIndex="0">
but your ComboBoxItem is 16 + 24 = 40 pixels high:
<Grid.RowDefinitions>
<RowDefinition Height="16" MinHeight="16" MaxHeight="16" />
<RowDefinition Height="24" MinHeight="24" MaxHeight="24" />
</Grid.RowDefinitions>
so it will be truncated anyway. Either make your comboBox bigger or your comboBoxItem smaller.
side Note: you don't need to use a text effect for the foreground on the textblock:
<TextBlock Foreground="#FF555454" />
would work just as well