views:

168

answers:

2

Hi, I'm trying to style Comboboxes in WPF so that they are white, and have the same border as TextBoxes. I have the following style so far, but don't know how to set the border:

<Style TargetType="ComboBox">
    <Setter Property="Margin" Value="0,2,0,2" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="Background" Value="White" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                 ???
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
A: 

In between your controltemplate pls implmenet something like this.

 <Grid
                        SnapsToDevicePixels="true">
                            <Border
                            x:Name="Bd"
                            Background="Transparent"
                            BorderBrush="#FF888888"
                            Padding="1"
                            CornerRadius="5" BorderThickness="2,2,2,2">
                                <Grid
                                Grid.IsSharedSizeScope="true">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition
                                        Width="1" />
                                        <ColumnDefinition
                                        Width="*" />
                                        <ColumnDefinition
                                        Width="Auto"
                                        SharedSizeGroup="ComboBoxButton" />
                                    </Grid.ColumnDefinitions>
                                    <Border
                                    x:Name="SelectedItemBorder"
                                    Grid.ColumnSpan="2" />
                                    <ContentPresenter
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                    Grid.Column="1"
                                    Content="{TemplateBinding SelectionBoxItem}"
                                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                              ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" 
                                    TextBlock.Foreground="White"
                                    Height="Auto"
                                    Margin="2,2,7,2"
                                    VerticalAlignment="Center" />
                                    <ToggleButton
                                    Style="{StaticResource ComboBoxTransparentButtonStyle}"
                                    Grid.ColumnSpan="3"
                                    IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                    Opacity="0.25" />
                                </Grid>
                            </Border>
                            <Popup
                            Focusable="false"
                            AllowsTransparency="true"
                            IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                            Placement="Bottom"
                            PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}"
                            x:Name="PART_Popup">
                                <Border CornerRadius="5"
                                x:Name="DropDownBorder"
                                MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                MinWidth="{TemplateBinding ActualWidth}"
                                Background="#FF7E7E7E"
                                BorderThickness="1">
                                    <ScrollViewer
                                    Foreground="#FFFFFFFF">
                                        <ItemsPresenter
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        KeyboardNavigation.DirectionalNavigation="Contained"
                                        TextBlock.Foreground="White"
                                        VerticalAlignment="Stretch" />
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FFFFFFFF"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="BorderBrush" TargetName="Bd" Value="#FFD2ECCF"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition
                                        Property="IsSelectionBoxHighlighted"
                                        Value="true" />
                                    <Condition
                                        Property="IsDropDownOpen"
                                        Value="false" />
                                </MultiTrigger.Conditions>
                                <Setter
                                    Property="Foreground"
                                    Value="white" />
                                <Setter
                                    Property="BorderBrush"
                                    Value="{x:Null}" />
                            </MultiTrigger>
                            <Trigger
                                Property="IsSelectionBoxHighlighted"
                                Value="true">
                                <Setter
                                    Property="Background"
                                    TargetName="SelectedItemBorder"
                                    Value="Transparent" />
                            </Trigger>
                            <Trigger
                                Property="HasDropShadow"
                                SourceName="PART_Popup"
                                Value="true">
                                <!--    <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
                            <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>-->
                            </Trigger>
                            <Trigger
                                Property="HasItems"
                                Value="false">
                                <Setter
                                    Property="MinHeight"
                                    TargetName="DropDownBorder"
                                    Value="95" />
                            </Trigger>
                            <Trigger
                                Property="IsEnabled"
                                Value="false">
                                <Setter
                                    Property="Foreground"
                                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
                                <Setter
                                    Property="Background"
                                    TargetName="Bd"
                                    Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
                            </Trigger>
                            <Trigger
                                Property="IsGrouping"
                                Value="true">
                                <Setter
                                    Property="ScrollViewer.CanContentScroll"
                                    Value="false" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
Kishore Kumar
+1  A: 

Use Expression Blend. If you want ComboBox to look similar to TextBox, have a look at TextBox template by right clicking TextBlock and selecting Edit Template > Edit a Copy and use that to modify your ComboBox template!

Mihir Gokani