使用Textbox-Item为WPF组合框设置样式

时间:2012-07-10 06:44:50

标签: wpf combobox textbox styles

我有一个Combobox。每个项目都包含标题和说明。 Item with headline and description

我想在第二项中使用一个文本框。这很好用。 ;) enter image description here

现在我想问(因为带有文本框的项目高于所有其他项目),是否可能如果所选项目(使用文本框)没有显示文本框,只有内容为一个字符串?

enter image description here

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

2 个答案:

答案 0 :(得分:1)

取代:

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

但你仍然会遇到问题:

你的comboBox高35像素:

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

side注意:您不需要对文本块的前景使用文本效果:

    <TextBlock Foreground="#FF555454" />

也可以正常工作

答案 1 :(得分:1)

您可以通过使用TextBox编辑文本(就像您已经完成的那样)来实现此目的,并使用TextBlock在选择项目时显示文本。

您可以通过将它们的可见性绑定到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;
        }
    }
}