rejy11
rejy11

Reputation: 752

ComboBox Size Differences

I have 2 ComboBox's in a app settings flyout. One of which has an ItemTemplate defined and the other does not:

<StackPanel Orientation="Horizontal"
        Margin="5">
<Label Content="Accent"
       VerticalAlignment="Center"/>
<ComboBox ItemsSource="{Binding MetroAccents}" 
          SelectedItem="{Binding SelectedAccent}"
          Margin="5">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <Label Content="{Binding Name}"
                   Margin="0"/>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

<StackPanel Orientation="Horizontal"
        Margin="5">
<Label Content="Grid Lines"
       VerticalAlignment="Center"/>
<ComboBox ItemsSource="{Binding GridLinesVisibilityList}"
          SelectedItem="{Binding SelectedGridLinesVisibility}"
          Margin="5"/>

image of settings flyout containing combobox's

However, the ComboBox with the ItemTemplate has a larger height than the other ComboBox. Analysing the control with the 'Enable Selection' debugging tool, the ComboBox with the ItemTemplate seems to have a TextBlock with the Label (defined in the template). Whereas the other ComboBox only has a Label. Does anyone know why this is?

Upvotes: 0

Views: 29

Answers (1)

XAMlMAX
XAMlMAX

Reputation: 2363

Label will take more space due to it's default style which looks like this:

<Style x:Key="LabelStyle1" TargetType="{x:Type Label}">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="5"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Label}">
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>  

Which as you can see has padding on it. While the TextBlock does not. This is why it takes more space.
Bear in mind that Label supports key bindings with _ underscore and also other UI elements as it's content. I personally don't use it unless I need key bindings, but even then I use AccessText MSDN.

Upvotes: 2

Related Questions