locked
[wp8.1]How to make down arrow in Combobox? RRS feed

  • Question

  • Hi

     When i create a combo box,there is no dropdown arrow in the combobox.

    how to create a combobox with dropdown arrow as shown below

    Monday, December 21, 2015 10:49 AM

Answers

  • Hi rmurali.mcp,

    As Amy Peng said, we need add a FontIcon to the Template of this ComboBox, besides I think you also need modify the layout of this control. 

    My template code is like following, you can refer to it:

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid x:Name="ComboBoxGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                   ....
                    <Border x:Name="ShortListOuterBorder" Margin="{ThemeResource PhoneTouchTargetOverhang}" Grid.Row="1" Visibility="Collapsed" Grid.ColumnSpan="2">
                        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="32"/>
                                </Grid.ColumnDefinitions>
                                <UserControl Grid.Column="0" x:Name="UserControl" Foreground="{TemplateBinding Foreground}" FlowDirection="{TemplateBinding FlowDirection}" IsHitTestVisible="False">
                                    <Canvas x:Name="ItemsPresenterHost" HorizontalAlignment="Left" MinHeight="{ThemeResource ComboBoxItemMinHeightThemeSize}">
                                        <ContentPresenter x:Name="PlaceholderTextContentPresenter" Content="{TemplateBinding PlaceholderText}" Margin="{ThemeResource ComboBoxPlaceholderTextThemeMargin}" Opacity="0" Style="{StaticResource PlaceholderContentPresenterStyle}" />
                                        <ItemsPresenter x:Name="ItemsPresenter" Margin="0,0.8,0,0">
                                            <ItemsPresenter.RenderTransform>
                                                <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                            </ItemsPresenter.RenderTransform>
                                        </ItemsPresenter>
                                    </Canvas>
                                </UserControl>
                                <FontIcon Grid.Column="1" x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" FontSize="{ThemeResource ContentControlFontSize}" Glyph="&#xE0E5;" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,10,10,10" VerticalAlignment="Center"/>
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    

    Wish this helps you.

    Best regards!

    • Marked as answer by rmurali.mcp Wednesday, December 23, 2015 7:24 AM
    Tuesday, December 22, 2015 9:03 AM

All replies

  • Hi rmurali.mcp,

    If we want to add a dropdown arrow for the ComboBox, we need to first get the ComboBox control template by right click the ComboBox control-->"Edit Template"-->"Edit a Copy...", then it will show you the default style/template of the ComboBox control:

    After that please add the following inside the ComboBox's ControlTemplate:

     <FontIcon x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Foreground="Black" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="30"  
    Glyph="&#xE0E5;" HorizontalAlignment="Right" IsHitTestVisible="False"/>
    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, December 22, 2015 7:16 AM
  • Hi rmurali.mcp,

    As Amy Peng said, we need add a FontIcon to the Template of this ComboBox, besides I think you also need modify the layout of this control. 

    My template code is like following, you can refer to it:

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid x:Name="ComboBoxGrid">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                   ....
                    <Border x:Name="ShortListOuterBorder" Margin="{ThemeResource PhoneTouchTargetOverhang}" Grid.Row="1" Visibility="Collapsed" Grid.ColumnSpan="2">
                        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="32"/>
                                </Grid.ColumnDefinitions>
                                <UserControl Grid.Column="0" x:Name="UserControl" Foreground="{TemplateBinding Foreground}" FlowDirection="{TemplateBinding FlowDirection}" IsHitTestVisible="False">
                                    <Canvas x:Name="ItemsPresenterHost" HorizontalAlignment="Left" MinHeight="{ThemeResource ComboBoxItemMinHeightThemeSize}">
                                        <ContentPresenter x:Name="PlaceholderTextContentPresenter" Content="{TemplateBinding PlaceholderText}" Margin="{ThemeResource ComboBoxPlaceholderTextThemeMargin}" Opacity="0" Style="{StaticResource PlaceholderContentPresenterStyle}" />
                                        <ItemsPresenter x:Name="ItemsPresenter" Margin="0,0.8,0,0">
                                            <ItemsPresenter.RenderTransform>
                                                <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                            </ItemsPresenter.RenderTransform>
                                        </ItemsPresenter>
                                    </Canvas>
                                </UserControl>
                                <FontIcon Grid.Column="1" x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" FontSize="{ThemeResource ContentControlFontSize}" Glyph="&#xE0E5;" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,10,10,10" VerticalAlignment="Center"/>
                            </Grid>
                        </Border>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    

    Wish this helps you.

    Best regards!

    • Marked as answer by rmurali.mcp Wednesday, December 23, 2015 7:24 AM
    Tuesday, December 22, 2015 9:03 AM