How to make a square button when using scaled sizing?

Themes, Shared, and Core Libraries for Avalonia Forum

Posted 1 month ago by Michael Janulaitis - Corner Bowl Software
Avatar

A square button is as easy as setting the Width and Height to hardcoded values, however when using the User Interface Density the width must continue to equal height as the density and/or Base Font Size is changed.  How can I create a square button without hardcoding sizes?

Comments (4)

Posted 1 month ago by Michael Janulaitis - Corner Bowl Software
Avatar

I think I just answered my own question.  This seems to be working well:

	<Style Selector="Button.image">
		<Setter Property="Template">
			<ControlTemplate>
				<Border
					Background="{TemplateBinding Background}"
					BorderBrush="{TemplateBinding BorderBrush}"
					BorderThickness="{TemplateBinding BorderThickness}"
					CornerRadius="{TemplateBinding CornerRadius}"
					Width="{Binding $self.Bounds.Height}">
					<Viewbox Width="16" Height="16">
						<PathIcon Data="{TemplateBinding Tag}"/>
					</Viewbox>
				</Border>
			</ControlTemplate>
		</Setter>
	</Style>
Posted 1 month ago by Michael Janulaitis - Corner Bowl Software
Avatar

Now how can I set my button height to equal the same height as other controls such as a one line TextBox or ComboBox when no other contorls are present in the control collection such as a StackPanel?

Posted 1 month ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hello,

That is tough since you need the actual measurement of the other controls, which can vary widely based on font sizes, paddings, etc.

Your surefire way to get it would be to put a disabled TextBox in the same StackPanel but set its Width=0 and Opacity=0.


Actipro Software Support

Posted 1 month ago by Michael Janulaitis - Corner Bowl Software
Avatar

Yes that thought crossed my mind but it's super hacky so I didn't do that.

[Modified 1 month ago]

Add Comment

Please log in to a validated account to post comments.