Avalonia: How to align content of ComboBox by center?

Created on 1 Jul 2020  路  8Comments  路  Source: AvaloniaUI/Avalonia

Unlike different controls ComboBox doesn't have HorizontalContentAlignment property.

Is there is any replacement for this? If not can it be added then?

Most helpful comment

@FoggyFinder it seems like a problem with properties overriding - https://github.com/AvaloniaUI/Avalonia/issues/2098
HorizontalAlignment is defined in the template, so it can't be overridden with style.

I will implement ComboBox.HorizontalContentAlignment to avoid that problem.

For now you can only replace whole ComboBox template with alignment-center.

All 8 comments

@FoggyFinder
You can set it with style

<Style Selector="ComboBox /template/ ContentControl">
   <Setter Property="HorizontalContentAlignment" Value="Right" />
</Style>

@grokys @danwalmsley
WPF and UWP have HorizontalContentAlignment and VerticalContentAlignment for ComboBox.
Should we add it to Avalonia, even thought there is relatively easy way to set it with selector?
I can add it to my Fluent ComboBox PR.

@FoggyFinder
You can set it with style

<Style Selector="ComboBox /template/ ContentControl">
   <Setter Property="HorizontalContentAlignment" Value="Right" />
</Style>

Thank you, but can you give a full example?
I've added it like this and it doesn't work:

<ComboBox.Styles>
    <Style Selector="ComboBox /template/ ContentControl">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
    </Style>
</ComboBox.Styles>

_CmbAv

@FoggyFinder sorry, I missed that default ComboBox style also defines HorizontalAlignment="Left", so HorizontalContentAlignment will not apply any visible changes.
Try code below:

<ComboBox Width="200">
  <ComboBox.Styles>
    <Style Selector="ComboBox /template/ ContentControl">
      <Setter Property="HorizontalContentAlignment" Value="Center" />
      <Setter Property="HorizontalAlignment" Value="Stretch" />
    </Style>
  </ComboBox.Styles>

It works for me with ControlCatalog
image

Still the same: text is pinned to the left. I tried on 0.9.999-cibuild0008887-beta version.

I'll try to test on ControlCatalog in the morning - maybe it is late and I'm missing something obvious.

Uh, for some reason I can't build Avalonia from source anymore.

error cs0006 metadata file could not be found:
\Avalonia\src\Avalonia.DesktopRuntime\bin\Debug\netcoreapp2.0\Avalonia.DesktopRuntime.dll
\Avalonia\packages\Avalonia\bin\Debug\netcoreapp2.0\Avalonia.dll

        <ComboBox Width="200">
            <ComboBox.Styles>
                <Style Selector="ComboBox /template/ ContentControl">
                    <Setter Property="HorizontalContentAlignment" Value="Center" />
                    <Setter Property="HorizontalAlignment" Value="Stretch" />
                </Style>
            </ComboBox.Styles>
            <ComboBoxItem>Inline Items</ComboBoxItem>
            <ComboBoxItem>Inline Item 2</ComboBoxItem>
            <ComboBoxItem>Inline Item 3</ComboBoxItem>
            <ComboBoxItem>Inline Item 4</ComboBoxItem>
        </ComboBox>

_av2

Doesn't produce correct result, MCVE is attached:

AvaloniaApplication1.zip

@FoggyFinder it seems like a problem with properties overriding - https://github.com/AvaloniaUI/Avalonia/issues/2098
HorizontalAlignment is defined in the template, so it can't be overridden with style.

I will implement ComboBox.HorizontalContentAlignment to avoid that problem.

For now you can only replace whole ComboBox template with alignment-center.

I'm closing the issue since PR is merged.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

MiKaMaru picture MiKaMaru  路  4Comments

danwalmsley picture danwalmsley  路  4Comments

Suriman picture Suriman  路  3Comments

Urgau picture Urgau  路  3Comments

GitHubington picture GitHubington  路  3Comments