none
[UWP][XAML]Customizing a ComboBox RRS feed

  • Question

  • I am trying to customize a ComboBox to look like the following (the following are actually 3 ComboBox(s) put together in a UserControl):

    I created these ComboBox(s) using the following Style (which as you can see includes several templates):

    <Style x:Key="VerticalPicker" TargetType="ComboBox">
    	<Setter Property="SelectedIndex" Value="0"/>
    	<Setter Property="Padding" Value="0"/>
    	<Setter Property="MinWidth" Value="0"/>
    	<Setter Property="BorderThickness" Value="0"/>
    	<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    	<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    	<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
    	<Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
    	<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
    	<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
    	<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    	<Setter Property="HorizontalAlignment" Value="Center"/>
    	<Setter Property="VerticalAlignment" Value="Center"/>
    	<Setter Property="ItemsPanel"><Setter.Value><ItemsPanelTemplate><CarouselPanel/></ItemsPanelTemplate></Setter.Value></Setter>
    	<Setter Property="ItemTemplate"><Setter.Value><DataTemplate><Border Width="75" Height="75" Background="RoyalBlue" BorderThickness="1"><TextBlock Text="{Binding}" FontFamily="Arial" FontSize="48" Foreground="Black" OpticalMarginAlignment="TrimSideBearings" TextAlignment="Center" TextLineBounds="Tight" VerticalAlignment="Center"/></Border></DataTemplate></Setter.Value></Setter>
    	<Setter Property="Template">
    		<Setter.Value>
    			<ControlTemplate TargetType="ComboBox">
    				<Grid>
    					<Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
    					<Grid.RowDefinitions><RowDefinition Height="Auto"/></Grid.RowDefinitions>
    					<VisualStateManager.VisualStateGroups>
    						<VisualStateGroup x:Name="CommonStates">
    							<VisualState x:Name="Normal"/>
    							<VisualState x:Name="PointerOver"/>
    							<VisualState x:Name="Pressed"/>
    							<VisualState x:Name="Disabled"/>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="FocusStates">
    							<VisualState x:Name="Focused"/>
    							<VisualState x:Name="FocusedPressed"/>
    							<VisualState x:Name="Unfocused"/>
    							<VisualState x:Name="PointerFocused"/>
    							<VisualState x:Name="FocusedDropDown"><VisualState.Setters><Setter Target="PopupBorder.Visibility" Value="Visible"/></VisualState.Setters></VisualState>
    						</VisualStateGroup>
    						<VisualStateGroup x:Name="DropDownStates">
    							<VisualState x:Name="Opened"><Storyboard><SplitOpenThemeAnimation ClosedTargetName="ContentPresenter" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/></Storyboard></VisualState>
    							<VisualState x:Name="Closed"><Storyboard><SplitCloseThemeAnimation ClosedTargetName="ContentPresenter" OffsetFromCenter="{Binding TemplateSettings.DropDownOffset, RelativeSource={RelativeSource Mode=TemplatedParent}}" OpenedTargetName="PopupBorder" OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"/></Storyboard></VisualState>
    						</VisualStateGroup>
    					</VisualStateManager.VisualStateGroups>
    					<ContentPresenter x:Name="ContentPresenter"><ContentControl ContentTemplate="{TemplateBinding ItemTemplate}" Content=" "/></ContentPresenter>
    					<Popup x:Name="Popup">
    						<Border x:Name="PopupBorder" BorderThickness="0" Background="Transparent" HorizontalAlignment="Stretch">
    							<ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="Disabled" HorizontalScrollBarVisibility="Hidden" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Auto" ZoomMode="Disabled"><ItemsPresenter/></ScrollViewer>
    						</Border>
    					</Popup>
    				</Grid>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    	<Setter Property="ItemContainerStyle">
    		<Setter.Value>
    			<Style TargetType="ComboBoxItem">
    				<Setter Property="HorizontalAlignment" Value="Stretch"/>
    				<Setter Property="Margin" Value="0"/>
    				<Setter Property="Padding" Value="0"/>
    			</Style>
    		</Setter.Value>
    	</Setter>
    </Style>

    In the screenshots, you will notice that the first one has the items much closer together. This seems to happen when using the mouse rather than touch. I also want to avoid the selection borders (I do not want any kind of border around any of the items, regardless of whether they are selected. Although I have done plenty of work with templates in ItemsControl(s), I have never done much as far as customizing the templates for ComboBox(s). My basic goal is to have a list of vertically scrolling numbers (the screenshots probably give a good idea of what I want). Can anybody possibly point me in the right direction as to what part of my code might need changed? Thanks.


    Nathan Sokalski njsokalski@hotmail.com http://www.nathansokalski.com/

    Wednesday, May 22, 2019 1:08 AM

All replies

  • Hi,

    First of all, what's the OS version of your test device and what's the target version of your app?

    Is the all the style code for your customized combobox control? I think to remove the border of the item when selected, you might need to check all the selected status for the combobox and combobox item to see if there might be some change to the border. But I'm not sure about this because I don't know if this is all the style code.

    And for the first question, currently I don't have an ideal about what is the reason. Could you please give me a sample about this? A simple demo with necessary that could reproduce the problem will be enough.

    Best regards,

    Roy


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Wednesday, May 22, 2019 7:23 AM
    Moderator