Avalonia: Round Button

Created on 20 May 2019  路  2Comments  路  Source: AvaloniaUI/Avalonia

How can I make Round Button?

Is there any property for this or Do I need to customize this?

If then, how can I customize the template?

I tried to find answer, but I couldn't find yet.

Thanks

Most helpful comment

here is one approach

      <Style Selector="Button.toolbar">
        <Setter Property="Margin" Value="9,3,9,3"/>
        <Setter Property="Width" Value="40"/>
        <Setter Property="Height" Value="40"/>
         <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="6"/>
      </Style>
      <Style Selector="Button.toolbar /template/ ContentPresenter">
        <Setter Property="CornerRadius" Value="20"/>
      </Style>
      <Style Selector="Button:pointerover.toolbar /template/ ContentPresenter">
        <Setter Property="Background" Value="#80e0e0e0"/>
      </Style>

All 2 comments

here is one approach

      <Style Selector="Button.toolbar">
        <Setter Property="Margin" Value="9,3,9,3"/>
        <Setter Property="Width" Value="40"/>
        <Setter Property="Height" Value="40"/>
         <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Padding" Value="6"/>
      </Style>
      <Style Selector="Button.toolbar /template/ ContentPresenter">
        <Setter Property="CornerRadius" Value="20"/>
      </Style>
      <Style Selector="Button:pointerover.toolbar /template/ ContentPresenter">
        <Setter Property="Background" Value="#80e0e0e0"/>
      </Style>

Great, It works as I wanted! Thank you

Was this page helpful?
0 / 5 - 0 ratings

Related issues

khoshroomahdi picture khoshroomahdi  路  4Comments

MiKaMaru picture MiKaMaru  路  4Comments

Urgau picture Urgau  路  3Comments

georgiuk picture georgiuk  路  3Comments

stdcall picture stdcall  路  4Comments