Avalonia单选按钮样式

huangapple go评论61阅读模式
英文:

Avalonia Radiobutton Style

问题

我在我的Window.Resources中有这段代码:

<Style Selector="RadioButton.Nav">
    <Setter Property="FontSize" Value="6"/>
    <Setter Property="FontWeight" Value="Bold"/>			
    <Setter Property="BorderBrush" Value="Black"/>
    <Setter Property="Margin" Value="5 5 5 0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <ControlTemplate.Content>
                    <Border
                        Height="{TemplateBinding Height}"
                        CornerRadius="12"
                        Width="180"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}">
                        <ContentPresenter
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"/>
                    </Border>
                </ControlTemplate.Content>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后,我在我的RadioButton上使用了它:

<RadioButton Classes="Nav" Content="Dashboard"/>

我试图改变我的RadioButton的设计,使它看起来像一个按钮,但当我使用这个样式时,RadioButton消失了。这段代码在WPF中可以工作,但我无法在Avalonia中使其工作。

英文:

I have this code in my Window.Resources

&lt;Style Selector=&quot;RadioButton.Nav&quot; &gt;
		&lt;Setter Property=&quot;FontSize&quot; Value=&quot;6&quot;/&gt;
		&lt;Setter Property=&quot;FontWeight&quot; Value=&quot;Bold&quot;/&gt;			
		&lt;Setter Property=&quot;BorderBrush&quot; Value=&quot;Black&quot;/&gt;
		&lt;Setter Property=&quot;Margin&quot; Value=&quot;5 5 5 0&quot;/&gt;
		&lt;Setter Property=&quot;Template&quot; &gt;
			&lt;Setter.Value&gt;
				&lt;ControlTemplate TargetType=&quot;{x:Type RadioButton}&quot;&gt;
					&lt;ControlTemplate.Content&gt;
						&lt;Border
                        Height=&quot;{TemplateBinding Height}&quot;
                        CornerRadius=&quot;12&quot;
                        Width=&quot;180&quot;
                        Background=&quot;{TemplateBinding Background}&quot;
                        BorderBrush=&quot;{TemplateBinding BorderBrush}&quot;&gt;
							&lt;ContentPresenter
								VerticalAlignment=&quot;Center&quot;
								HorizontalAlignment=&quot;Center&quot;/&gt;
						&lt;/Border&gt;
					&lt;/ControlTemplate.Content&gt;
				&lt;/ControlTemplate&gt;
			&lt;/Setter.Value&gt;
		&lt;/Setter&gt;
	&lt;/Style&gt;

And then, I used it on my radiobutton

&lt;RadioButton Classes=&quot;Nav&quot; Content=&quot;Dashboard&quot;/&gt;

Im trying to change the design of my radiobutton to make it look like a button, but when I use the style, the radiobutton disappers. The code works in WPF, but I can't make it work in Avalonia.

答案1

得分: 0

First off, Styles go in Window.Styles, not Window.Resources.

Second, you don't need to specify the TargetType in Avalonia. Remove TargetType="{x:Type RadioButton}" (I'm unsure if this would cause a problem, but I know it's not needed).

Finally, your provided ContentPresenter is overwriting important bindings for Content and ContentTemplate, I recommend in your case to just copy the one from the Fluent theme since all you are changing is alignment and you can set that by setting the HorizontalContentAlignment and VerticalContentAlignment properties in the style itself.

One last note, consider TemplateBinding the CornerRadius and Width as well, this makes further styling easier down the road. Unlike WPF, CornerRadius does not need to be an attached property (i.e., use CornerRadius not Border.CornerRadius).

One last and final note, controls in Avalonia have a different default for VerticalAlignment and HorizontalAlignment. This caused me quite a bit of confusion when I started. It works exactly the same as WPF, but in WPF, the Default is "Stretch" whereas in Avalonia it is "Left" and "Center" respectively, so the style below will be left and vertically centered and 180 wide on the window. It will not fill the container vertically and be horizontally centered like WPF. If you want that, set VerticalAlignment to Stretch and HorizontalAlignment to Stretch or Center.

英文:

First off, Styles go in Window.Styles, not Window.Resources.

Second, you don't need to specify the TargetType in Avalonia. Remove TargetType=&quot;{x:Type RadioButton}&quot; (I'm unsure if this would cause a problem, but I know it's not needed).

Finally, your provided ContentPresenter is overwriting important bindings for Content and ContentTemplate, I recommend in your case to just copy the one from the Fluent theme since all you are changing is alignment and you can set that by setting the HorizontalContentAlignment and VerticalContentAlignment properties in the style itself.

One last note, consider TemplateBinding the CornerRadius and Width as well, this make further styling easier down the road. Unlike WPF, CornerRadius does not need to be an attached property (i.e. use CornerRadius not Border.CornerRadius)

One last and final note, controls in Avalonia have a different default for VerticalAlignment and HorizontalAlignment. This caused me quite a bit of confusion when I started. It works exactly the same as WPF but in WPF the Default is "Stretch" where as in Avalonia it is "Left" and "Center" respectively, so the style below will be left and vertically centered and 180 wide on the window, it will not fill the container vertically and be horizontally centered like WPF, if you want that set VerticalAlignment to Stretch and HorizontalAlignment to Stretch or Center.

&lt;Window.Styles&gt;
	&lt;Style Selector=&quot;RadioButton.Nav&quot; &gt;
	  &lt;Setter Property=&quot;FontSize&quot; Value=&quot;6&quot;/&gt;
	  &lt;Setter Property=&quot;FontWeight&quot; Value=&quot;Bold&quot;/&gt;
	  &lt;Setter Property=&quot;BorderBrush&quot; Value=&quot;Black&quot;/&gt;
	  &lt;Setter Property=&quot;BorderThickness&quot; Value=&quot;1&quot;/&gt;
	  &lt;Setter Property=&quot;Margin&quot; Value=&quot;5 5 5 0&quot;/&gt;
	  &lt;Setter Property=&quot;HorizontalContentAlignment&quot; Value=&quot;Center&quot;/&gt;
	  &lt;Setter Property=&quot;VerticalContentAlignment&quot; Value=&quot;Center&quot;/&gt;
	  &lt;Setter Property=&quot;CornerRadius&quot; Value=&quot;12&quot;/&gt;
	  &lt;Setter Property=&quot;Width&quot; Value=&quot;180&quot;/&gt;
	  &lt;Setter Property=&quot;Template&quot;&gt;
		&lt;Setter.Value&gt;
		  &lt;ControlTemplate&gt;
			&lt;Border
			  Height=&quot;{TemplateBinding Height}&quot;
			  CornerRadius=&quot;{TemplateBinding CornerRadius}&quot;
			  Width=&quot;{TemplateBinding Width}&quot;
			  BorderThickness=&quot;{TemplateBinding BorderThickness}&quot;
			  Background=&quot;{TemplateBinding Background}&quot;
			  BorderBrush=&quot;{TemplateBinding BorderBrush}&quot;&gt;
			  &lt;ContentPresenter
				Name=&quot;PART_ContentPresenter&quot;
				Margin=&quot;{TemplateBinding Padding}&quot;
				HorizontalAlignment=&quot;{TemplateBinding HorizontalContentAlignment}&quot;
				VerticalAlignment=&quot;{TemplateBinding VerticalContentAlignment}&quot;
				Content=&quot;{TemplateBinding Content}&quot;
				ContentTemplate=&quot;{TemplateBinding ContentTemplate}&quot;
				RecognizesAccessKey=&quot;True&quot; /&gt;
			&lt;/Border&gt;
		  &lt;/ControlTemplate&gt;
		&lt;/Setter.Value&gt;
	  &lt;/Setter&gt;
	&lt;/Style&gt;
&lt;/Window.Styles&gt;

huangapple
  • 本文由 发表于 2023年5月14日 11:32:05
  • 转载请务必保留本文链接:https://go.coder-hub.com/76245701.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定