WPF: ComboBox items are showing in columns

1

Having issues with displaying combobox items in a WPF application where I am modifying the default combobox template.

Can someone guide me to fix this issue as I am unable find where exactly I am doing the mistake

The code has been written using Visual Studio 2017 on .NET Framework 4.6.1.

Thank you.

ComboBox Style

<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="20" />

        </Grid.ColumnDefinitions>

        <Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ControlsBorderColorBrush}" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Border Grid.Column="1" Margin="0,0,0,3" Name="ButtonBorder" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Fill="{StaticResource ControlsBorderColorBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" />

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="UIElement.IsMouseOver" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="ToggleButton.IsChecked" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBorderColorBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="UIElement.IsEnabled" Value="False">

            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>

            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

<Style x:Key="ControlsComboBox"  TargetType="{x:Type ComboBox}">

    <Setter Property="Background" Value="{StaticResource ControlsBackgroundColorBrush }"/>

    <Setter Property="Height" Value="40"/>

    <Setter Property="Width" Value="200"/>

    <Setter Property="Padding" Value="3"/>

    <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="{StaticResource TextColorBrush}"/>

    <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="3, 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="{StaticResource ControlsBackgroundColorBrush }" Margin="0" CornerRadius="0" BorderThickness="3,0,3,3" BorderBrush="{StaticResource ControlsBorderColorBrush}"/>

                            <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="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>

Page markup

<Grid>

    <StackPanel Style="{StaticResource StackPanelVertical}">

        <TextBlock Style="{StaticResource ControlsTextBlock}">Select Work Server</TextBlock>

        <Border Style="{StaticResource ControlsBorder}">

            <StackPanel>

                <Image Source="/Content/Images/Controls/ServerLogo.png" ToolTip="Please select iManage Work Server" />

                <ComboBox Style="{StaticResource ControlsComboBox}"  Name="cbxServerName" ToolTip="Please select iManage Work Server">

                    <ComboBoxItem>Test 1</ComboBoxItem>

                    <ComboBoxItem>Test 2</ComboBoxItem>

                </ComboBox>

            </StackPanel>

        </Border>

    </StackPanel>

</Grid>

Output is below attached image, as you see it shows in columns format but I am looking for Rows
Final Outout

wpf xaml combobox

share|improve this question

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I would recommend trying to think down your examples code to make it easier for people to help you. It will also help you to debug it yourself.
  
  – Dessus
  Nov 21 '18 at 20:51
  

  
  
  
  

add a comment | 

1

Having issues with displaying combobox items in a WPF application where I am modifying the default combobox template.

Can someone guide me to fix this issue as I am unable find where exactly I am doing the mistake

The code has been written using Visual Studio 2017 on .NET Framework 4.6.1.

Thank you.

ComboBox Style

<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="20" />

        </Grid.ColumnDefinitions>

        <Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ControlsBorderColorBrush}" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Border Grid.Column="1" Margin="0,0,0,3" Name="ButtonBorder" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Fill="{StaticResource ControlsBorderColorBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" />

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="UIElement.IsMouseOver" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="ToggleButton.IsChecked" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBorderColorBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="UIElement.IsEnabled" Value="False">

            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>

            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

<Style x:Key="ControlsComboBox"  TargetType="{x:Type ComboBox}">

    <Setter Property="Background" Value="{StaticResource ControlsBackgroundColorBrush }"/>

    <Setter Property="Height" Value="40"/>

    <Setter Property="Width" Value="200"/>

    <Setter Property="Padding" Value="3"/>

    <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="{StaticResource TextColorBrush}"/>

    <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="3, 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="{StaticResource ControlsBackgroundColorBrush }" Margin="0" CornerRadius="0" BorderThickness="3,0,3,3" BorderBrush="{StaticResource ControlsBorderColorBrush}"/>

                            <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="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>

Page markup

<Grid>

    <StackPanel Style="{StaticResource StackPanelVertical}">

        <TextBlock Style="{StaticResource ControlsTextBlock}">Select Work Server</TextBlock>

        <Border Style="{StaticResource ControlsBorder}">

            <StackPanel>

                <Image Source="/Content/Images/Controls/ServerLogo.png" ToolTip="Please select iManage Work Server" />

                <ComboBox Style="{StaticResource ControlsComboBox}"  Name="cbxServerName" ToolTip="Please select iManage Work Server">

                    <ComboBoxItem>Test 1</ComboBoxItem>

                    <ComboBoxItem>Test 2</ComboBoxItem>

                </ComboBox>

            </StackPanel>

        </Border>

    </StackPanel>

</Grid>

Output is below attached image, as you see it shows in columns format but I am looking for Rows
Final Outout

wpf xaml combobox

share|improve this question

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I would recommend trying to think down your examples code to make it easier for people to help you. It will also help you to debug it yourself.
  
  – Dessus
  Nov 21 '18 at 20:51
  

  
  
  
  

add a comment | 

1

1

1

Having issues with displaying combobox items in a WPF application where I am modifying the default combobox template.

Can someone guide me to fix this issue as I am unable find where exactly I am doing the mistake

The code has been written using Visual Studio 2017 on .NET Framework 4.6.1.

Thank you.

ComboBox Style

<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="20" />

        </Grid.ColumnDefinitions>

        <Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ControlsBorderColorBrush}" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Border Grid.Column="1" Margin="0,0,0,3" Name="ButtonBorder" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Fill="{StaticResource ControlsBorderColorBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" />

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="UIElement.IsMouseOver" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="ToggleButton.IsChecked" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBorderColorBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="UIElement.IsEnabled" Value="False">

            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>

            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

<Style x:Key="ControlsComboBox"  TargetType="{x:Type ComboBox}">

    <Setter Property="Background" Value="{StaticResource ControlsBackgroundColorBrush }"/>

    <Setter Property="Height" Value="40"/>

    <Setter Property="Width" Value="200"/>

    <Setter Property="Padding" Value="3"/>

    <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="{StaticResource TextColorBrush}"/>

    <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="3, 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="{StaticResource ControlsBackgroundColorBrush }" Margin="0" CornerRadius="0" BorderThickness="3,0,3,3" BorderBrush="{StaticResource ControlsBorderColorBrush}"/>

                            <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="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>

Page markup

<Grid>

    <StackPanel Style="{StaticResource StackPanelVertical}">

        <TextBlock Style="{StaticResource ControlsTextBlock}">Select Work Server</TextBlock>

        <Border Style="{StaticResource ControlsBorder}">

            <StackPanel>

                <Image Source="/Content/Images/Controls/ServerLogo.png" ToolTip="Please select iManage Work Server" />

                <ComboBox Style="{StaticResource ControlsComboBox}"  Name="cbxServerName" ToolTip="Please select iManage Work Server">

                    <ComboBoxItem>Test 1</ComboBoxItem>

                    <ComboBoxItem>Test 2</ComboBoxItem>

                </ComboBox>

            </StackPanel>

        </Border>

    </StackPanel>

</Grid>

Output is below attached image, as you see it shows in columns format but I am looking for Rows
Final Outout

wpf xaml combobox

share|improve this question

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

Having issues with displaying combobox items in a WPF application where I am modifying the default combobox template.

Can someone guide me to fix this issue as I am unable find where exactly I am doing the mistake

The code has been written using Visual Studio 2017 on .NET Framework 4.6.1.

Thank you.

ComboBox Style

<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="20" />

        </Grid.ColumnDefinitions>

        <Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ControlsBorderColorBrush}" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Border Grid.Column="1" Margin="0,0,0,3" Name="ButtonBorder" CornerRadius="0" BorderThickness="0" Background="{StaticResource ControlsBackgroundColorBrush}" />

        <Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" Fill="{StaticResource ControlsBorderColorBrush}" VerticalAlignment="Center" HorizontalAlignment="Center" />

    </Grid>

    <ControlTemplate.Triggers>

        <Trigger Property="UIElement.IsMouseOver" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="ToggleButton.IsChecked" Value="True">

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ControlsBorderColorBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="{StaticResource ControlsBackgroundColorBrush}"/>

        </Trigger>

        <Trigger Property="UIElement.IsEnabled" Value="False">

            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>

            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>

            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>

            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>

        </Trigger>

    </ControlTemplate.Triggers>

</ControlTemplate>

<Style x:Key="ControlsComboBox"  TargetType="{x:Type ComboBox}">

    <Setter Property="Background" Value="{StaticResource ControlsBackgroundColorBrush }"/>

    <Setter Property="Height" Value="40"/>

    <Setter Property="Width" Value="200"/>

    <Setter Property="Padding" Value="3"/>

    <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="{StaticResource TextColorBrush}"/>

    <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="3, 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="{StaticResource ControlsBackgroundColorBrush }" Margin="0" CornerRadius="0" BorderThickness="3,0,3,3" BorderBrush="{StaticResource ControlsBorderColorBrush}"/>

                            <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="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>

Page markup

<Grid>

    <StackPanel Style="{StaticResource StackPanelVertical}">

        <TextBlock Style="{StaticResource ControlsTextBlock}">Select Work Server</TextBlock>

        <Border Style="{StaticResource ControlsBorder}">

            <StackPanel>

                <Image Source="/Content/Images/Controls/ServerLogo.png" ToolTip="Please select iManage Work Server" />

                <ComboBox Style="{StaticResource ControlsComboBox}"  Name="cbxServerName" ToolTip="Please select iManage Work Server">

                    <ComboBoxItem>Test 1</ComboBoxItem>

                    <ComboBoxItem>Test 2</ComboBoxItem>

                </ComboBox>

            </StackPanel>

        </Border>

    </StackPanel>

</Grid>

Output is below attached image, as you see it shows in columns format but I am looking for Rows
Final Outout

wpf xaml combobox

wpf xaml combobox

share|improve this question

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

share|improve this question

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

share|improve this question

share|improve this question

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

asked Nov 21 '18 at 19:47

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

61

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I would recommend trying to think down your examples code to make it easier for people to help you. It will also help you to debug it yourself.
  
  – Dessus
  Nov 21 '18 at 20:51
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  I would recommend trying to think down your examples code to make it easier for people to help you. It will also help you to debug it yourself.
  
  – Dessus
  Nov 21 '18 at 20:51
  

  
  
  
  

1

1

I would recommend trying to think down your examples code to make it easier for people to help you. It will also help you to debug it yourself.

– Dessus
Nov 21 '18 at 20:51

I would recommend trying to think down your examples code to make it easier for people to help you. It will also help you to debug it yourself.

– Dessus
Nov 21 '18 at 20:51

add a comment | 

1 Answer
1

active

oldest

votes

0

I am not sure, but just created a new solution and copied the same XAML and it works without any issues, no idea what might have caused this issue in old solution.

share|improve this answer

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419513%2fwpf-combobox-items-are-showing-in-columns%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

I am not sure, but just created a new solution and copied the same XAML and it works without any issues, no idea what might have caused this issue in old solution.

share|improve this answer

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

add a comment | 

0

I am not sure, but just created a new solution and copied the same XAML and it works without any issues, no idea what might have caused this issue in old solution.

share|improve this answer

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

add a comment | 

0

0

0

I am not sure, but just created a new solution and copied the same XAML and it works without any issues, no idea what might have caused this issue in old solution.

share|improve this answer

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

I am not sure, but just created a new solution and copied the same XAML and it works without any issues, no idea what might have caused this issue in old solution.

share|improve this answer

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

share|improve this answer

share|improve this answer

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

answered Nov 27 '18 at 20:14

Krishna Mohan Reddy NareddyKrishna Mohan Reddy Nareddy

61

61

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419513%2fwpf-combobox-items-are-showing-in-columns%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here