I try to change my ComboBox border color.
This is the style that i am using:
<Style x:Key="ComboBoxStyle1" TargetType="{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}">
<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>
<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>
I try to change all the properties but still my ComboBox border color is white:
I also try to define the color inside my ComboBox controller or via code behind.
Update
I put this code:
<Border BorderBrush="Red" BorderThickness="3" />
And this is the result:
As you can see i still have the white color that i want to remove.
You can add your which is the root of your ControlTemplate to Border:
<ControlTemplate TargetType="{x:Type ComboBox}">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<!--your template is here-->
</Grid>
</Border>
<!--etc-->
Related
Can someone help me get this Combobox to change the borderthickness when IsFocus=True?
I've tried several different things in the past two hours but can't seem to get it to work.
I know I have to set the triggers...
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
But can't seem to figure out where to set them.
Also ignore the colors. they are all set at run time or upon user change.
Any help would be greatly appreciated.
<SolidColorBrush x:Name="BrushCBForeGround" x:Key="KeyBrushCBForeGround" Color="Orange"/>
<SolidColorBrush x:Name="BrushCBBorder" x:Key="KeyBrushCBBorder" Color="orange"/>
<SolidColorBrush x:Name="BrushCBBorderBG" x:Key="KeyBrushCBBorderBG" Color="Orange"/>
<SolidColorBrush x:Name="BrushCBBG" x:Key="KeyBrushCBBG" Color="Purple"/>
<SolidColorBrush x:Name="BrushCBHighlightBG" x:Key="KeyBrushCBHighlightBG" Color="Pink"/>
<SolidColorBrush x:Name="BrushCBHighlightFore" x:Key="KeyBrushCBHighlightFore" Color="DarkBlue"/>
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="6" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0" />
<Border Grid.Column="0" CornerRadius="4" Margin="1" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="8,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left"
VerticalAlignment="Center" Margin="15,3,23,3" Focusable="True" Background="Purple" Foreground="Green" Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Scroll">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{DynamicResource KeyBrushCBBG}" BorderThickness="1,2,1,2" BorderBrush="{DynamicResource KeyBrushCBBorder}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="8"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="BorderThickness" Value="2,2,2,2"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBForeGround}"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="Border" Padding="2" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource KeyBrushCBHighlightBG}"/>
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource KeyBrushCBHighlightFore}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You must modify the ToggleButton template. The ToggleButton is responsible for the border. You have currently set the BorderThickness to a fixed value. Simply bind it to the parent ComboBox:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<!-- The outer border enclosing the complete ComboBox -->
<Border x:Name="Border"
Grid.ColumnSpan="2" CornerRadius="6"
Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}"
BorderThickness="{Binding RelativeSource={RelativeSource AncestorType=ComboBox}, Path=BorderThickness}" />
<!-- The inner border enclosing the TextBox -->
<Border Grid.Column="0" CornerRadius="4" Margin="1" Background="{DynamicResource KeyBrushCBBorderBG}" BorderBrush="{DynamicResource KeyBrushCBBorder}" BorderThickness="0,1,0,1" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{DynamicResource KeyBrushButtonForeground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Stroke="{DynamicResource KeyBrushCBForeGround}"/>
</Grid>
</ControlTemplate>
Bind other properties like BorderBrush and other propertries you want to control from the ComboBox element the same way.
I've created a custom Combo Box style in WPF, but there is this irritating blue hover effect that I believe has to do with the FocusVisualStyle but i'm not sure.
I've tried editing the Background, Border, MouseOver Trigger and FocusVisualStyle but still nothing.
Custom ComboBox Style
<Style x:Key="CB" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="Gray" />
<Setter Property="BorderBrush" Value="#b3b3b3" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderThickness" Value="0 0 0 2"/>
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
<Setter Property="FontSize" Value="16" />
<Setter Property="FontWeight" Value="Regular" />
<Setter Property="MinWidth" Value="50"/>
<Setter Property="MinHeight" Value="32"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<!--ToggleButton-->
<ToggleButton Name="ToggleButton" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderThickness="{TemplateBinding BorderThickness}"
FocusVisualStyle="{x:Null}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
<Border x:Name="templateRoot" SnapsToDevicePixels="true" Background="{x:Null}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="Transparent">
<Border x:Name="splitBorder" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" SnapsToDevicePixels="true" Margin="200 0 0 0" HorizontalAlignment="Right" BorderThickness="1" BorderBrush="Transparent">
<Path x:Name="arrow" VerticalAlignment="Center" Margin="0 0 0 0" HorizontalAlignment="Right" Fill="#333333" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z"/>
</Border>
</Border>
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="0 0 0 5"
FocusVisualStyle="{x:Null}"/>
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide"
FocusVisualStyle="{x:Null}">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
FocusVisualStyle="{x:Null}">
<Border x:Name="DropDownBorder"
Background="White"
BorderThickness="1.5"
BorderBrush="{x:Null}"
FocusVisualStyle="{x:Null}">
<Border.Effect>
<DropShadowEffect Opacity="0.6" ShadowDepth="3" BlurRadius="2"/>
</Border.Effect>
</Border>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" FocusVisualStyle="{x:Null}">
<StackPanel FocusVisualStyle="{x:Null}" IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0 0 10 10"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,-5,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="arrow" Property="Fill" Value="White" />
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The effect you are describing is the mouse over effect of the ToggleButton. You need to override the ControlTemplate of the ToggleButton in order to override its default behavior:
<!--ToggleButton-->
<ToggleButton Name="ToggleButton" >
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Background"
Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Background}"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
...
</ToggleButton>
I had to adapt the visual stye of my combobox due to migration from Win7 to Win10, so here's my current style for custom Combobox:
<Style TargetType="{x:Type av:XComboBox}">
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<Setter Property="FrameworkElement.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="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Grid.Column="2"
ClickMode="Press" Focusable="False"
IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
<ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False"
HorizontalAlignment="Left" VerticalAlignment="Center"
Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
<TextBox Name="PART_EditableTextBox" Margin="1, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center" Focusable="True" >
<TextBox.Template>
<ControlTemplate TargetType="TextBox" >
<Border Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<!-- Popup showing items -->
<Popup Name="Popup" Placement="Bottom" Focusable="False" AllowsTransparency="True" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border Name="DropDownBorder" Background="White" 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>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="ComboBox.IsVisible" Value="True">
<Setter Property="Border.BorderBrush" TargetName="DropDownBorder" Value="#878787"/>
</Trigger>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
<Trigger Property="ComboBox.IsEditable" Value="True">
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
<Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
<Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As the application runs both on Win7 and Win10, I would apply that style only on Win10. Is there any way to do this? I couldn't fine anything regarding this; I thought about a converter, but how to apply it?
You could give your Style an x:Key and implement a custom markup extension:
public class Windows10StyleExtension : MarkupExtension
{
private readonly string _key;
public Windows10StyleExtension(string key)
{
_key = key;
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
if (!IsWindows7OrLower)
return new StaticResourceExtension(_key).ProvideValue(serviceProvider);
return null;
}
private bool IsWindows7OrLower =>
(Environment.OSVersion.Version.Major + (double)Environment.OSVersion.Version.Minor / 10) <= 6.1;
}
XAML:
<Style x:Key="style" TargetType="{x:Type av:XComboBox}">
...
<av:XComboBox Style="{local:Windows10Style style}" />
I have a combobox in which I display simple strings. At some point this looks like the following:
This is ok. now ein scroll down one step:
Now the "g" is cut off at the bottom. What I have tried so far: Set the height property explicit to Auto. Changing Padding and Margin. Nothing worked. Had some of you the same problem or any suggestions what I could try?
EDIT
Here the related XAML:
<Style x:Key="GraphicEditorInplaceLabelEditStyle">
<Setter Property="ComboBox.Focusable" Value="True"/>
<Setter Property="ComboBox.IsEditable" Value="True"/>
<Setter Property="ComboBox.IsReadOnly" Value="False"/>
<Setter Property="ComboBox.IsTextSearchEnabled" Value="True"/>
<!--Use Separators for empty entries-->
<Setter Property="ComboBox.ItemContainerStyle">
<Setter.Value>
<Style TargetType="{x:Type ComboBoxItem}" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="">
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Separator HorizontalAlignment="Stretch"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
<Setter Property="ComboBox.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Validation.ValidationAdornerSiteFor="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType=ComboBox}}" Background="{StaticResource ComboBoxActiveBackgroundBrush}" BorderBrush="{StaticResource ComboBoxBorderBrush}" BorderThickness="1" CornerRadius="2">
<Grid>
<ContentPresenter Margin="3,3,3,3" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" HorizontalAlignment="Left" IsHitTestVisible="False" Name="ContentSite" VerticalAlignment="Center" />
<TextBlock Style="{x:Null}" x:Name="PART_TextBackground" Margin="3,3,3,3" Background="Transparent" Focusable="False" FontStyle="Italic" Foreground="LightGray" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBox Style="{x:Null}" x:Name="PART_EditableTextBox" Margin="3,3,3,3" Background="Transparent" Focusable="True" HorizontalAlignment="Left" IsReadOnly="{TemplateBinding IsReadOnly}" VerticalAlignment="Center" Visibility="Hidden">
<TextBox.Template>
<ControlTemplate TargetType="TextBox">
<Border x:Name="PART_ContentHost" Background="{TemplateBinding Background}" Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<Popup AllowsTransparency="True" Focusable="False" IsOpen="{TemplateBinding IsDropDownOpen}" Name="Popup" Placement="Bottom" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{StaticResource ComboBoxActiveBackgroundBrush}" BorderBrush="{StaticResource ComboBoxBorderBrush}" BorderThickness="1" />
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True" CanContentScroll="False">
<StackPanel KeyboardNavigation.DirectionalNavigation="Contained" IsItemsHost="True" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
</Border>
<ToggleButton Grid.Column="1" ClickMode="Press" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" Name="ToggleButton" VerticalAlignment="Bottom">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border x:Name="Border"
CornerRadius="2"
Background="{StaticResource ComboBoxActiveBackgroundBrush}"
BorderBrush="{StaticResource ComboBoxBorderBrush}"
BorderThickness="1"
Margin="0,0,0,0" />
<Rectangle x:Name="arrow"
Height="6"
Width="8"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="2"
Fill="{StaticResource ComboBoxArrowDownBrush}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxMouseOverBackgroundBrush}" />
<Setter TargetName="arrow"
Property="Fill"
Value="{StaticResource ComboBoxArrowDownMouseOverBrush}"></Setter>
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxPressedBackgroundBrush}" />
<Setter Property="Fill"
TargetName="arrow"
Value="{StaticResource ComboBoxArrowUpBrush}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource ComboBoxInactiveBackgroundBrush}" />
<Setter Property="Foreground"
Value="{StaticResource FontInactiveBrush}" />
<Setter Property="Fill"
TargetName="arrow"
Value="{StaticResource ComboBoxArrowDownInactiveBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ToggleButton.Template>
<ToggleButton.RenderTransform>
<TranslateTransform X="-3" Y="0"></TranslateTransform>
</ToggleButton.RenderTransform>
</ToggleButton>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="ToggleButton" Value="Collapsed" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource FontInactiveBrush}" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger Property="Popup.AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" TargetName="DropDownBorder" Value="4" />
<Setter Property="Margin" TargetName="DropDownBorder" Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="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>
I tried to change the padding/margin of the ComboBoxItem as well as the item host stackpanel.
This question already has answers here:
WPF ComboBox without drop-down button
(3 answers)
Closed 3 years ago.
I am creating an WPF application, in that I need to Hide the ComboBox's Arrow symbol. Please help me any body.
If you want to do that, you need to Restyle the ComboBox, as DHN says. This is the one I used:
<!-- ComboBox style -->
<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinWidth" Value="120"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton
Name="ToggleButton"
Template="{DynamicResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter
Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{Binding Text}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
Foreground="DarkBlue"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup
Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="{DynamicResource TextBoxBrush}"
BorderThickness="1"
BorderBrush="{DynamicResource SolidBorderBrush}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#373737"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0"/>
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
If you see in this code, you have a ToggleButton. This one is the one that defines your arrow. Here you have the ToggleButton style:
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border
x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="5"
Background="{DynamicResource DarkGradient}"
BorderBrush="{DynamicResource SolidBorderBrush}"
BorderThickness="1" />
<Border
Grid.Column="0"
CornerRadius="5,0,0,5"
Margin="1"
Background="{DynamicResource TextBoxBrush}"
BorderBrush="{DynamicResource SolidBorderBrush}"
BorderThickness="0,0,1,0" />
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{DynamicResource TextBoxBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter Property="Foreground" Value="DarkBlue"/>
<Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
If you erase this line:
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{DynamicResource TextBoxBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z"/>
And also comment:
<Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
on the ToggleButton you erase your arrow :)
NOTE: If you want to use this code exactly, you need to create your own Fill colors.