I have a custom combo box style as below
<Style x:Key="SmallArrowComboBoxStyle" TargetType="{x:Type ComboBox}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}"/>
<Setter Property="Background" Value="#FF1E1E1E"/>
<Setter Property="BorderBrush" Value="#454545"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontFamily" Value="Segoe UI,Meiryo UI" />
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Foreground" Value="#FFFFFF" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid x:Name="MainGrid1" SnapsToDevicePixels="true" Margin="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<Popup x:Name="PART_Popup1" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}" Margin="1,0,1,1" Placement="Bottom" >
<Border x:Name="Shdw1" BorderBrush ="#FF4289C4" Background="#FF4289C4" BorderThickness="1" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=MainGrid1}">
<Border x:Name="DropDownBorder" BorderThickness="0" Background="#1E1E1E">
<Grid>
<ScrollViewer x:Name="DropDownScrollViewer1" Template="{DynamicResource ScrollViewerControlTemplate1}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
<Rectangle x:Name="OpaqueRect1" Fill="{Binding Background, ElementName=DropDownBorder}"
Height="{Binding ActualHeight, ElementName=DropDownBorder}" Width="{Binding ActualWidth, ElementName=DropDownBorder}"/>
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter1" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Grid>
</ScrollViewer>
<Slider x:Name="CustomSliderVertical" Margin="0,0,-12,0" Maximum="100" SmallChange="1" LargeChange="10" TickPlacement="BottomRight" TickFrequency="10"
Style="{StaticResource CustomSliderStyle}" Foreground="{DynamicResource LimeBrush}" HorizontalAlignment="Right" Delay="1"
Orientation="Vertical" Focusable="False" Grid.Column="0" Grid.Row="1" Panel.ZIndex="1"/>
</Grid>
</Border>
</Border>
</Popup>
<ToggleButton BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}" Grid.ColumnSpan="2"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource SmallArrowComboBoxToggleButton}" BorderThickness="{TemplateBinding BorderThickness}"/>
<ContentPresenter ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" Name="ContentSite"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Content="{TemplateBinding SelectionBoxItem}"
ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
IsHitTestVisible="false" Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<TextBox x:Name="PART_EditableTextBoxSmall" Width="150" Height="40"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBoxSmall}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Background="Transparent"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBoxSmall" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
<Setter Property="Foreground" TargetName="PART_EditableTextBoxSmall" Value="#FFFFFF"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I prepared a test application with a combo box and applied this style to the combo box. Prepared the test application with
.NET Framework 4 and 4.6.2
Tested the appearance of combo box using both
Windows-10(.NET Framework 4.6.2) and Windows-7(.NET Framework 4)
But there is an appearance difference between Windows 10 and Windows 7.
That is the alignment of combo box text is different.
That is padding of combo box is different in Windows 10 and Windows 7. But these padding values are not explicitly set in the code.
- In Windows 7, the padding value is ‘4,3,4,3’
- In Windows 10, the padding value is ‘6,3,5,3’
While checking, it is observed that the RenderSize of "MainGrid1" (grid layout control from the above style code) is different in Windows 10 and Windows 7.
From MSDN, RenderSize is the final render size of an element.
My doubt is why this RenderSize have different values in Windows 10 and Windows 7 ?
