Databases
StackOverflow2013
Postsdbo
POHow do I display the selected item and use borders with a combobox? And why does this behavior occur?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I display the selected item and use borders with a combobox? And why does this behavior occur?
    text
    copied!<p>How do I make the selected item of a <code>ComboBox</code> show up in the <code>ComboBox</code> textfield AND use <code>Border</code>s in the <code>ComboBox</code> <code>ControlTemplate</code>? With the following code the items popup fine but never show up in the <code>ComboBox</code> textfield after selecting; but removing the 2 <code>Border</code>s from the <code>ComboBox</code> template fixes this. Why?? How?? And more importantly: how do I use this template with <code>Border</code>s AND have the <code>SelectedItem</code> show up properly in the <code>ComboBox</code> textfield after selecting?</p> <pre><code>&lt;Window.Resources&gt; &lt;Style x:Key="ComboboxDropdownButton" TargetType="{x:Type ToggleButton}"&gt; &lt;Setter Property="MinWidth" Value="0"/&gt; &lt;Setter Property="MinHeight" Value="0"/&gt; &lt;Setter Property="Width" Value="NaN"/&gt; &lt;Setter Property="Height" Value="NaN"/&gt; &lt;Setter Property="Background" Value="Transparent"/&gt; &lt;Setter Property="BorderBrush" Value="Black"/&gt; &lt;Setter Property="BorderThickness" Value="1"/&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type ToggleButton}"&gt; &lt;DockPanel SnapsToDevicePixels="True" Background="{TemplateBinding Background}" LastChildFill="False"&gt; &lt;Border x:Name="Border" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" DockPanel.Dock="Right" Background="WhiteSmoke" CornerRadius="0,3,3,0" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" &gt; &lt;Path Fill="{TemplateBinding Foreground}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0L4.5,4 9,0z"/&gt; &lt;/Border&gt; &lt;/DockPanel&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="IsMouseOver" Value="True"&gt; &lt;Setter TargetName="Border" Property="Background" Value="White" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsChecked" Value="True"&gt; &lt;Setter TargetName="Border" Property="Background" Value="White" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Style.Triggers&gt; &lt;Trigger Property="IsEnabled" Value="False"&gt; &lt;Setter Property="Opacity" Value="0.5"/&gt; &lt;/Trigger&gt; &lt;/Style.Triggers&gt; &lt;/Style&gt; &lt;ControlTemplate x:Key="ComboBoxTextBox" TargetType="{x:Type TextBox}"&gt; &lt;Border x:Name="PART_ContentHost" Focusable="False" /&gt; &lt;/ControlTemplate&gt; &lt;Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}"&gt; &lt;Setter Property="SnapsToDevicePixels" Value="true" /&gt; &lt;Setter Property="OverridesDefaultStyle" Value="true" /&gt; &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /&gt; &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /&gt; &lt;Setter Property="ScrollViewer.CanContentScroll" Value="true" /&gt; &lt;Setter Property="MinWidth" Value="120" /&gt; &lt;Setter Property="MinHeight" Value="20" /&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type ComboBox}"&gt; &lt;Border SnapsToDevicePixels="True" x:Name="OuterBorder" Background="Transparent" BorderBrush="Red" BorderThickness="1" CornerRadius="4" Margin="-1"&gt; &lt;Border x:Name="InnerBorder" Background="WhiteSmoke" BorderThickness="1" CornerRadius="3" BorderBrush="Black"&gt; &lt;Grid&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="EditStates"&gt; &lt;VisualState x:Name="Editable"&gt; &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="PART_EditableTextBox"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" /&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ContentSite"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" /&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Uneditable" /&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;ToggleButton x:Name="ToggleButton" Margin="-1" Grid.Column="2" Focusable="False" ClickMode="Press" Style="{StaticResource ComboboxDropdownButton}" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"&gt; &lt;/ToggleButton&gt; &lt;ContentPresenter x:Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Stretch" HorizontalAlignment="Left"&gt; &lt;/ContentPresenter&gt; &lt;TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="3,3,23,3" Focusable="True" Background="Transparent" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}" /&gt; &lt;Popup x:Name="PART_Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide"&gt; &lt;Grid x:Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}" &gt; &lt;Border x:Name="DropDownBorder" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=Border}" Background="WhiteSmoke" BorderBrush="Black" BorderThickness="1" CornerRadius="0,0,3,3"&gt; &lt;/Border&gt; &lt;ScrollViewer Padding="1" SnapsToDevicePixels="True"&gt; &lt;StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" /&gt; &lt;/ScrollViewer&gt; &lt;/Grid&gt; &lt;/Popup&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/Border&gt; &lt;ControlTemplate.Triggers&gt; &lt;Trigger Property="HasItems" Value="false"&gt; &lt;Setter TargetName="DropDownBorder" Property="MinHeight" Value="95" /&gt; &lt;/Trigger&gt; &lt;Trigger Property="IsGrouping" Value="true"&gt; &lt;Setter Property="ScrollViewer.CanContentScroll" Value="false" /&gt; &lt;/Trigger&gt; &lt;/ControlTemplate.Triggers&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Window.Resources&gt; &lt;Grid&gt; &lt;ComboBox Width="120" Height="20" Name="comboBox1" SnapsToDevicePixels="True" HorizontalAlignment="Center" VerticalAlignment="Center" Text="ComboBox" SelectedIndex="0" IsEditable="True" IsReadOnly="True"&gt; &lt;ComboBoxItem&gt;item 1&lt;/ComboBoxItem&gt; &lt;ComboBoxItem&gt;item 2&lt;/ComboBoxItem&gt; &lt;ComboBoxItem&gt;item 3&lt;/ComboBoxItem&gt; &lt;/ComboBox&gt; &lt;/Grid&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload