如何实时转换xaml标记？

不幸的是，ActualWidth在 UWP 中，与 WPF 不同，它是一个计算属性，并且不会发送有关其更改的消息。因此，我们必须做出一个相当复杂的决定。

首先，我们需要DependencyProperty，它将给出当前宽度的值。在页面类中（让它被调用MainPage）我们声明：

public double ComputedActualWidth
{
    get { return (double)GetValue(ComputedActualWidthProperty); }
    set { SetValue(ComputedActualWidthProperty, value); }
}

public static readonly DependencyProperty ComputedActualWidthProperty =
    DependencyProperty.Register("ComputedActualWidth", typeof(double), typeof(MainPage),
                                new PropertyMetadata(0.0));

并在构造函数中

public MainPage()
{
    InitializeComponent();
    SizeChanged += (o, args) => ComputedActualWidth = ActualWidth;
    ComputedActualWidth = ActualWidth;
}

现在你可以绑定：

<Rectangle Name="Line" Height="1.5"
           Width="{Binding ComputedActualWidth,
                           ElementName=Root,
                           Converter={StaticResource OneFourthConverter}}"
           ... />

将转换器声明为

class OneFourthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object p, string language) =>
        (double)value / 4;

    public object ConvertBack(object value, Type targetType, object p, string language) =>
        (double)value * 4;
}

并投入可用资源：

<Page.Resources>
    <local:OneFourthConverter x:Key="OneFourthConverter"/>
</Page.Resources>

为页面命名Root。

从工作代码中提取：

<Page
    x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test"
    xmlns:i="using:Microsoft.Xaml.Interactivity"
    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:media="using:Microsoft.Xaml.Interactions.Media"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Name="Root">
    <Page.Resources>
        <local:OneFourthConverter x:Key="OneFourthConverter"/>
        <Style x:Key="Autorize_Button" TargetType="Button">
            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
            <Setter Property="Padding" Value="8,4,8,4"/>
            <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="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Rectangle Name="Line" Height="15"
                                       Width="{Binding ComputedActualWidth,
                                                       ElementName=Root,
                                                       Converter={StaticResource OneFourthConverter},
                                                       Mode=OneWay}"
                                       Fill="Red" Opacity="1" VerticalAlignment="Bottom"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>
    <Grid Background="Gray">
        <Button Style="{StaticResource Autorize_Button}" Height="30" Width="300"/>
    </Grid>
</Page>

我将不透明度更改为 1 以使线条可见。