Databases
StackOverflow2013
Postsdbo
POhow to set drop-down-list offset in ComboBox to be like the old-school style (win store app)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to set drop-down-list offset in ComboBox to be like the old-school style (win store app)
    text
    copied!<p>I want the combobox's drop-down-list to be opened right from the offset of the combobox's contentPresenter (you know... the part that shows the selected item). But hat actually happens is that the dropdown-list's offset is above the contentPresenter till the page's ceiling.</p> <p>As well I want the width of the drop down list to be according the largest item - permanently, and not to be changed dynamically as it now (now, it resized according to the items that are in view).</p> <p><img src="https://i.stack.imgur.com/YFcYS.jpg" alt="enter image description here"></p> <p>I tried to set the comboBox's MaxDropDownHeight property to 0 or 300, but nothing has changed.</p> <p>Here is the templateControl (the image has nothing to do with this snippet):</p> <pre><code>&lt;Style TargetType="ComboBox" &gt; &lt;Setter Property="Padding" Value="8,0" /&gt; &lt;Setter Property="FlowDirection" Value="LeftToRight" /&gt; &lt;Setter Property="Foreground" Value="{StaticResource ComboBoxForegroundThemeBrush}" /&gt; &lt;Setter Property="Background" Value="White" /&gt; &lt;Setter Property="BorderBrush" Value="Gray" /&gt; &lt;Setter Property="BorderThickness" Value="1" /&gt; &lt;Setter Property="TabNavigation" Value="Once" /&gt; &lt;Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" /&gt; &lt;Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /&gt; &lt;Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" /&gt; &lt;Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" /&gt; &lt;Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" /&gt; &lt;Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" /&gt; &lt;Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" /&gt; &lt;Setter Property="HorizontalContentAlignment" Value="Stretch" /&gt; &lt;Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" /&gt; &lt;Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" /&gt; &lt;Setter Property="ItemsPanel"&gt; &lt;Setter.Value&gt; &lt;ItemsPanelTemplate&gt; &lt;CarouselPanel /&gt; &lt;/ItemsPanelTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="ComboBox"&gt; &lt;Grid&gt; &lt;Grid.ColumnDefinitions&gt; &lt;ColumnDefinition Width="*" /&gt; &lt;ColumnDefinition Width="32" /&gt; &lt;/Grid.ColumnDefinitions&gt; &lt;VisualStateManager.VisualStateGroups&gt; &lt;VisualStateGroup x:Name="CommonStates"&gt; &lt;VisualState x:Name="Normal" /&gt; &lt;VisualState x:Name="PointerOver"&gt; &lt;!-- &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPointerOverBackgroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPointerOverBorderThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Highlight"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxSelectedPointerOverBackgroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Pressed"&gt; &lt;!-- &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPressedBackgroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPressedBorderThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPressedForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PressedBackground"/&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxArrowPressedForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Disabled"&gt; &lt;!-- &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Background"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxDisabledBackgroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Background"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxDisabledBorderThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxDisabledForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="DropDownGlyph"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxArrowDisabledForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;VisualStateGroup x:Name="FocusStates"&gt; &lt;VisualState x:Name="Focused"&gt; &lt;!-- &lt;Storyboard&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/&gt; &lt;DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Highlight"/&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxFocusedForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="FocusedPressed"&gt; &lt;!-- &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPressedForegroundThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="Highlight"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ComboBoxPressedHighlightThemeBrush}"/&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Unfocused" /&gt; &lt;VisualState x:Name="PointerFocused" /&gt; &lt;VisualState x:Name="FocusedDropDown"&gt; &lt;!-- &lt;Storyboard&gt; &lt;ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PopupBorder"&gt; &lt;DiscreteObjectKeyFrame KeyTime="0"&gt; &lt;DiscreteObjectKeyFrame.Value&gt; &lt;Visibility&gt;Visible&lt;/Visibility&gt; &lt;/DiscreteObjectKeyFrame.Value&gt; &lt;/DiscreteObjectKeyFrame&gt; &lt;/ObjectAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;VisualStateGroup x:Name="DropDownStates"&gt; &lt;VisualState x:Name="Opened"&gt; &lt;!-- &lt;Storyboard&gt; &lt;SplitOpenThemeAnimation ClosedTargetName="ContentPresenter" ContentTranslationOffset="0" ContentTargetName="ScrollViewer" ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;VisualState x:Name="Closed"&gt; &lt;!-- &lt;Storyboard&gt; &lt;SplitCloseThemeAnimation ClosedTargetName="ContentPresenter" ContentTranslationOffset="40" ContentTranslationDirection="{Binding TemplateSettings.SelectedItemDirection, RelativeSource={RelativeSource Mode=TemplatedParent}}" ContentTargetName="ScrollViewer" ClosedLength="{Binding TemplateSettings.DropDownClosedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/&gt; &lt;/Storyboard&gt; --&gt; &lt;/VisualState&gt; &lt;/VisualStateGroup&gt; &lt;/VisualStateManager.VisualStateGroups&gt; &lt;Border x:Name="Background" Grid.ColumnSpan="2" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" /&gt; &lt;Rectangle x:Name="PressedBackground" Margin="{TemplateBinding BorderThickness}" Fill="{StaticResource ComboBoxPressedHighlightThemeBrush}" Opacity="0" /&gt; &lt;Border x:Name="HighlightBackground" Grid.ColumnSpan="2" Background="{StaticResource ComboBoxFocusedBackgroundThemeBrush}" BorderBrush="{StaticResource ComboBoxFocusedBorderThemeBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0" /&gt; &lt;Rectangle x:Name="Highlight" Margin="{TemplateBinding BorderThickness}" Fill="{StaticResource ComboBoxSelectedBackgroundThemeBrush}" Opacity="0" /&gt; &lt;ContentPresenter x:Name="ContentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /&gt; &lt;TextBlock x:Name="DropDownGlyph" Grid.Column="1" Margin="0,0,6,4" HorizontalAlignment="Right" VerticalAlignment="Center" FontFamily="{StaticResource SymbolThemeFontFamily}" FontSize="{StaticResource ComboBoxArrowThemeFontSize}" FontWeight="Bold" Foreground="Red" IsHitTestVisible="False" Text="" /&gt; &lt;Popup x:Name="Popup"&gt; &lt;Border x:Name="PopupBorder" HorizontalAlignment="Stretch" Background="{StaticResource ComboBoxPopupBackgroundThemeBrush}" BorderBrush="{StaticResource ComboBoxPopupBorderThemeBrush}" BorderThickness="{StaticResource ComboBoxPopupBorderThemeThickness}"&gt; &lt;ScrollViewer x:Name="ScrollViewer" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" Foreground="{StaticResource ComboBoxPopupForegroundThemeBrush}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalSnapPointsAlignment="Near" VerticalSnapPointsType="OptionalSingle" ZoomMode="Disabled"&gt; &lt;ItemsPresenter /&gt; &lt;/ScrollViewer&gt; &lt;/Border&gt; &lt;/Popup&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; </code></pre> <p>Thanks!</p>
 

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