按钮控件样式模板和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>