英文:
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
<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>
And then, I used it on my radiobutton
<RadioButton Classes="Nav" Content="Dashboard"/>
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="{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 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.
<Window.Styles>
<Style Selector="RadioButton.Nav" >
<Setter Property="FontSize" Value="6"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Margin" Value="5 5 5 0"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="CornerRadius" Value="12"/>
<Setter Property="Width" Value="180"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border
Height="{TemplateBinding Height}"
CornerRadius="{TemplateBinding CornerRadius}"
Width="{TemplateBinding Width}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter
Name="PART_ContentPresenter"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
RecognizesAccessKey="True" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Styles>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论