按钮控件样式模板和 BackgroundSizing 属性

Question

按钮样式模板有一些问题。
当鼠标悬停在按钮上时，我尝试更改按钮背景。
当我通过在 xaml 设计查看器上右键单击鼠标为其创建样式表时 - 单击复制模板。

成功，我得到了一个按钮控件的控件模板“资源字典”。
但是当我编译它时收到一条错误消息。我可以在不定义样式表的情况下编译它。我可以找到带有 BackgroundSizing 属性的错误消息。

<Style x:Key="ButtonStyle1" TargetType="Button">
    <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
    <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
    <Setter Property="Padding" Value="{StaticResource ButtonPadding}"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="FocusVisualMargin" Value="-3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BackgroundSizing="{TemplateBinding BackgroundSizing}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                    <VisualStateManager.VisualStateGroups> 
<---omitted---->

第一个是另一个问题，第二个，第三个，第四个，第五个是按钮控件模板的问题。

我删除了一个 BackgroundSizing 属性。然后我没有收到任何错误消息，但应用程序停止。所以当我以调试模式运行应用程序时，我会发现这个错误。

当我设置目标版本 1809 时，所有问题都解决了......

但我听说某些设备可能需要针对较低版本（？）..

如何解决 BackgroundSizing 属性错误？

Answer 1

BackgroundSizing 实际上是在 Windows 10 版本 1809 中引入的（引入了 v10.0.17763.0），所以这就是为什么它在 1809 构建而不是在低于它的构建版本上工作。你可以参考这个MSDN 文档。

为了解决这个问题，你必须使用条件 Xaml。

您可以创建这样的样式：

BaseButtonStyle

 <Style x:Key="BaseButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource ButtonBackground}"/>
        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="Padding" Value="{StaticResource ButtonPadding}"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin" Value="-3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BackgroundSizing="{TemplateBinding BackgroundSizing}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups> 
<---omitted---->

ButtonStyle1

 <Style x:Key="ButtonStyle1" TargetType="Button" BasedOn={StaticResource BaseButtonStyle}>
    <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
 </Style>

现在你可以像下面这样使用这种风格了：

<Page
    x:Class="ConditionalTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:contract7NotPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractNotPresent(Windows.Foundation.UniversalApiContract,7)"
xmlns:contract7Present="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract,7)">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Button contract7Present:Style="{StaticResource ButtonStyle1}"
                contract7NotPresent:Style="{StaticResource BaseButtonStyle}"/>
    </Grid>
</Page>