I am making a style for ComboBox and added this code to the ComboBox template
...
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="{TemplateBinding Padding}"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
...
The problem is in IsReadOnly="{TemplateBinding IsReadOnly}" property. Visual Studio tells that this is an unknown member and doesn't render a ComboBox in the designer. But if I launch the project, it will work properly. By the way, a ComboBox has property IsReadOnly. How to fix this glitch?
Upd: ComboBox template
<Style 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="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<ToggleButton x:Name="ToggleButton" Grid.ColumnSpan="2"
Template="{StaticResource ComboBoxToggleButtonTemplate}"
Focusable="False" ClickMode="Press"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
/>
<ContentPresenter x:Name="ContentSite" Grid.Column="0"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Stretch"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="{TemplateBinding Padding}"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<!--IsReadOnly="{TemplateBinding IsReadOnly}"-->
<Border x:Name="Overlay" Grid.ColumnSpan="2" CornerRadius="5" Margin="-2" BorderThickness="3" BorderBrush="{StaticResource InputBorderFocused}" Visibility="Hidden"/>
<Popup x:Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" BorderThickness="1"
BorderBrush="{DynamicResource InputBorder}"
Background="{DynamicResource InputBackground}"/>
<ScrollViewer Margin="0" 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="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger SourceName="Popup" Property="AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="Overlay"/>
</Trigger>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter Property="Visibility" Value="Visible" TargetName="Overlay"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Late reply, but today I faced the same issue. What it fixed for me was just to set the PART_EditableTextBox.IsReadOnly through the Triggers of the ComboBox.Template. The TemplateBinding on the TextBox can be removed.
<ControlTemplate.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter TargetName="PART_EditableTextBox" Property="IsReadOnly" Value="True"></Setter>
</Trigger>
<Trigger Property="IsReadOnly" Value="False">
<Setter TargetName="PART_EditableTextBox" Property="IsReadOnly" Value="False"></Setter>
</Trigger>
<!--...-->
</ControlTemplate.Triggers>
Related
I have an issue with popup placement. If the combobox encounters the edge of the screen then the target origin changes to the top-left corner of the target area and the popup alignment point changes to the bottom-left corner of the Popup. This is a problem for me because I changed the style of combobox to have rounded corners.
This is how it looks normally and this is how it looks wen encountering the edge of the screen
I have defined a style and I tried to set a trigger on 'Placement' property of the combobox but without success. This is my style:
<Style
x:Key="FormComboboxStyle"
BasedOn="{StaticResource BaseStyle}"
TargetType="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="Padding"
Value="5" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="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="{TemplateBinding Padding}"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{StaticResource ComboBoxTextBoxStyle}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="{TemplateBinding Padding}"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup
Name="Popup"
IsOpen="{TemplateBinding IsDropDownOpen}"
Placement="Bottom"
AllowsTransparency="True"
Focusable="False"
VerticalOffset="0"
HorizontalOffset="0"
PopupAnimation="Slide">
<Grid
Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border
x:Name="DropDownBorder"
Background="{DynamicResource WhiteColor}"
BorderThickness="2,0,2,2"
CornerRadius="0 0 5 5"
Padding="0"
BorderBrush="{DynamicResource PrimaryGrayColor}" />
<ScrollViewer Margin="4,2,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="{DynamicResource DisabledPrimaryGrayColor}" />
</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="Margin" Value="0,0,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>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
According to When the Popup Encounters the Edge of the Screen, "For security reasons, a Popup cannot be hidden by the edge of a screen." Therefore you can not forcibly place a Popup under the ComboBox if it will hide the Popup.
I have a custom WPF combobox, on top I have textbox and below item template which will display the list of items. Now when I move mouse over the items then the respecting is getting selected, but without clicking on any item just clicking into textbox which is present inside same combobox. Now I want the selection from combobox to be cleared. Because when I type something in textbox and click on enter key then it is considering the selected item as last highlighted one. But actually if I click on textbox and typed something then i want to do different process.
<Style x:Key="MyCustomComboBox" TargetType="{x:Type ComboBox}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxFocusVisual}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="{StaticResource myWhite}" />
<Setter Property="BorderBrush" Value="{StaticResource myBlue}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="Padding" Value="16,5,10,0" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="ScrollViewer.PanningMode" Value="Both" />
<Setter Property="Stylus.IsFlicksEnabled" Value="False" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="2" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid" SnapsToDevicePixels="true">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="0" MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup"
Grid.ColumnSpan="2"
Margin="1"
AllowsTransparency="true"
IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}">
<Themes:SystemDropShadowChrome x:Name="Shdw"
Width="Auto"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
CornerRadius="5"
Color="Transparent">
<Border x:Name="DropDownBorder"
Padding="0,1,0,0"
Background="White"
BorderBrush="#92AEC4"
BorderThickness="1"
CornerRadius="5">
<Grid Width="300" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Width="250"
Margin="8,4,8,16">
<Border Height="24"
BorderBrush="#656565"
BorderThickness="1"
CornerRadius="3">
<StackPanel Margin="8,0" Orientation="Horizontal">
<TextBlock Padding="0,0,5,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="ACE-Icon-Font"
FontSize="15"
Foreground="#656565"
Text="" />
<Grid>
<TextBox x:Name="SearchTextBox"
Width="{Binding ElementName=DropDownBorder, Path=ActualWidth}"
VerticalAlignment="Center"
Foreground="#333333"
IsEnabled="True"
Focusable="True"
Text="{Binding Path=CustNameSearch, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}">
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="BorderThickness" Value="0" />
</Style>
</TextBox.Style>
</TextBox>
</Grid>
</StackPanel>
</Border>
</Grid>
<Grid Grid.Row="1"
Background="Transparent"
RenderOptions.ClearTypeHint="Enabled">
<ScrollViewer x:Name="DropDownScrollViewer"
MaxHeight="194"
Template="{DynamicResource ScrollViewerControlTemplate1}">
<Grid>
<Canvas Width="0"
Height="0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Rectangle x:Name="OpaqueRect"
Grid.Column="1"
Width="{Binding ActualWidth, ElementName=DropDownBorder}"
Height="{Binding ActualHeight, ElementName=DropDownScrollViewer}"
Fill="{Binding Background, ElementName=DropDownBorder}" />
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter"
KeyboardNavigation.DirectionalNavigation="Contained"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Button Margin="16,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Command="{Binding Path=HandleCommandsCommand}"
CommandParameter="AddCustDetails"
Content="Create Customer"
Visibility="{Binding Path=CreateCustButtonVisibility, FallbackValue=Collapsed}">
</Button>
</Grid>
</ScrollViewer>
</Grid>
</Grid>
</Border>
</Themes:SystemDropShadowChrome>
</Popup>
<ToggleButton x:Name="TogB"
Grid.ColumnSpan="2"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ComboBoxReadonlyToggleButton}" />
<ContentPresenter x:Name="ConPres"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="Select Cust.."
ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
IsHitTestVisible="false"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter.Style>
<Style>
<Setter Property="TextBlock.Foreground" Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=TogB, Path=IsChecked}" Value="True">
<Setter Property="TextBlock.Foreground" Value="#FFFFFF" />
</DataTrigger>
</Style.Triggers>
</Style>
</ContentPresenter.Style>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="PART_Popup" Property="HasDropShadow" Value="true">
<Setter TargetName="Shdw" Property="Margin" Value="0,0,3,3" />
<Setter TargetName="Shdw" Property="Color" Value="#16000000" />
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="Height" Value="120" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="ConPres" Property="TextBlock.Foreground" Value="#CBCBCB" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="true" />
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false" />
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</MultiTrigger>
<Trigger SourceName="DropDownScrollViewer" Property="ScrollViewer.CanContentScroll" Value="false">
<Setter TargetName="OpaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=DropDownScrollViewer}" />
<Setter TargetName="OpaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=DropDownScrollViewer}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="BorderBrush" Value="{StaticResource TextBoxBorder}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Padding" Value="3" />
<Setter Property="Template" Value="{StaticResource ComboBoxEditableTemplate}" />
</Trigger>
</Style.Triggers>
</Style>
If user click on textbox inside to combobox then the selection from combobox should clear. Or EnterKey pressed on textbox then it should not select anything form combobox and should remain same.
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-->
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.
I have a problem with a ComboBox. I wanted to change its apparency by overriding its style, but I have some problems of appearance, and I can't find where are they.
My ComboBox has this appearance:
I have two problems:
I don't know where to change the foreground of the expandable menu... Wherever I change it, it remains white!!
When I choose an option, the Text of the ComboBox appears twice, one in dark blue and one in white, as you can appreciate on the image. And I don't know how to change it...
My style looks like this:
<!-- All ComboBox styles -->
<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="{StaticResource DarkGradient}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1" />
<Border
Grid.Column="0"
CornerRadius="5,0,0,5"
Margin="1"
Background="{StaticResource TextBoxBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="0,0,1,0" />
<Path
x:Name="Arrow"
Grid.Column="1"
Fill="{StaticResource 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="Background" Value="LightGray" />
<Setter TargetName="Border" Property="BorderBrush" Value="Gray" />
<Setter Property="Foreground" Value="DarkGray"/>
<Setter TargetName="Arrow" Property="Fill" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- ComboBox TextBox -->
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<!-- ComboBox style -->
<Style x:Key="{x:Type ComboBox}" TargetType="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="MinWidth" Value="120"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="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="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{TemplateBinding Text}"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Visible"
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="{StaticResource TextBoxBrush}"
BorderThickness="1"
BorderBrush="{StaticResource 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="LightGray"/>
</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 anyone can help to solve this, will be really appreciated!
EDIT:
I could solve the problem of writing twice the value by changing this:
Text="{TemplateBinding SelectionBoxItem}"
And then adding to the ItemSource selection sentence, and then setting it by default, but I still have the problem of being not able to change the Foreground of the combo...
EDIT2:
I discovered one thing: when I create the list, I do this:
listPrecissions = new List<Precisions>()
Where Precisions is a class that I created with two strings. If I create it with a direct string:
listPrecissions = new List<string>()
and add the items, it has a black foreground. But have no idea why...
Your question lacks the following styles TextBoxBrush, SolidBorderBrush and DarkGradient.
I don't know where to change the foreground of the expandable menu... Wherever I change it, it remains white!!
Setting the Foreground property on the ComboBox seems to change it for me (with your styles applied).
When I choose an option, the Text of the ComboBox appears twice, one in dark blue and one in white, as you can appreciate on the image. And I don't know how to change it...
<ContentPresenter Name="ContentSite" and <TextBox x:Name="PART_EditableTextBox" are responsible for displaying the current item for two different cases. First is the normal one, the second is when the ComboBox is marked as editable (IsEditable="True"). In your style the default for PART_EditableTextBox is Visible, so just set it to Hidden.
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{TemplateBinding Text}"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
Foreground="DarkBlue"
IsReadOnly="{TemplateBinding IsReadOnly}"/>