Search code examples
c#wpfcomboboxborderbrush

Borderbrush to ComboBox


I need some help with this.

I have two controls, a ComboBox and a TextBox, I need to change the BorderBrush Property to other colors, with de TextBox it works perfectly but with the ComboBox it doesn't. This is my code.

<ComboBox x:Name="cmbCombo" HorizontalAlignment="Left" Margin="155,98,0,0" VerticalAlignment="Top" Width="120" />                   
<TextBox x:Name="txtCaja" HorizontalAlignment="Left" Height="23" Margin="158,56,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<Button Content="Button" HorizontalAlignment="Left" Margin="174,155,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>


cmbCombo.BorderThickness = new Thickness(3);
cmbCombo.BorderBrush = Brushes.OrangeRed;
txtCaja.BorderThickness = new Thickness(3);
txtCaja.BorderBrush = Brushes.OrangeRed;

Thanks for all.


Solution

  • It is possible to set the property BorderBrush to make desired color or brush:

    <ComboBox Margin="10" BorderBrush="Red">
      <ComboBoxItem>No Device Selected</ComboBoxItem>
    </ComboBox>
    

    Result:

    Screenshot of combo box with red border

    If you want to have a thicker border, then use BorderThickness property:

    <ComboBox Margin="10" BorderBrush="Red" BorderThickness="3">
      <ComboBoxItem>No Device Selected</ComboBoxItem>
    </ComboBox>
    

    Update:

    For Windows 8 you should write in Controltemplate of your ComboBox:

    BasedOn="{StaticResource {x:Type ComboBox}}"
    

    For example:

    <Style x:Key="ComboBoxStyle1" TargetType="{x:Type ComboBox}" BasedOn="{StaticResource {x:Type ComboBox}}">
    <Setter Property="SnapsToDevicePixels" Value="True"/>
    <Setter Property="OverridesDefaultStyle" Value="True"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    <Setter Property="TextElement.Foreground" Value="Black"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ComboBox}">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <ToggleButton x:Name="ToggleButton" Grid.Column="2"
                        ClickMode="Press" Focusable="False"
                        IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                        Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
    
                    <ContentPresenter x:Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
                        HorizontalAlignment="Left" VerticalAlignment="Center"                              
                        Content="{TemplateBinding SelectionBoxItem}" 
                        ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                        ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
    
                    <TextBox x:Name="PART_EditableTextBox" Margin="3, 3, 23, 3"                     
                        IsReadOnly="{TemplateBinding IsReadOnly}"
                        Visibility="Hidden" Background="Transparent"
                        HorizontalAlignment="Left" VerticalAlignment="Center"
                        Focusable="True" >
                        <TextBox.Template>
                            <ControlTemplate TargetType="{x:Type TextBox}" >
                                <Border x:Name="PART_ContentHost" Focusable="False" />
                            </ControlTemplate>
                        </TextBox.Template>
                    </TextBox>
                    <!-- Popup showing items -->
                    <Popup x:Name="Popup" Placement="Bottom"
                        Focusable="False" AllowsTransparency="True"
                        IsOpen="{TemplateBinding IsDropDownOpen}"
                        PopupAnimation="Slide" >
                        <Grid x:Name="DropDown" SnapsToDevicePixels="True"
                            MinWidth="{TemplateBinding ActualWidth}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}">
                            <Border x:Name="DropDownBorder" Background="Transparent" Margin="0, 1, 0, 0"
                                CornerRadius="0" BorderThickness="1,1,1,1" 
                                BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
                            <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid> 
                 </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="HasItems" Value="False">
                        <Setter Property="MinHeight" TargetName="DropDownBorder" Value="95"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                    </Trigger>
                    <Trigger Property="IsGrouping" Value="True">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                    </Trigger>
                    <Trigger Property="IsEditable" Value="True">
                        <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                        <Setter Property="Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                        <Setter Property="Visibility" TargetName="ContentSite" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>
    

    and use this Style in ComboBox:

    <ComboBox Style="{DynamicResource ComboBoxStyle1}" >                
       <ComboBoxItem Content="1"/>
       <ComboBoxItem Content="2"/>
       <ComboBoxItem Content="3"/>
    </ComboBox>
    

    or:

    private void ComboBox_Loaded(Object sender, RoutedEventArgs e)
    {
        var comboBox = sender as ComboBox;
        var comboBoxTemplate = comboBox.Template;
        var toggleButton = comboBoxTemplate.FindName("toggleButton", comboBox) as ToggleButton;
        var toggleButtonTemplate = toggleButton.Template;
        var border = toggleButtonTemplate.FindName("templateRoot", toggleButton) as Border;
    
        border.Background = new SolidColorBrush(Colors.Red);
    }