How to do the conversion in the xaml markup in real time?

Unfortunately, ActualWidth in UWP, unlike WPF, is a calculated property, and does not send messages about its change. Therefore, we have to make a rather complicated decision.

First, we need a DependencyProperty , which will give the value of the current width. In the class of the page (let it be called MainPage ) we declare:

 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)); 

and in the constructor

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

Now you can put a binding:

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

Converter declare as

 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; } 

and put in the available resources:

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

The page gives the name Root .

Excerpt from working code:

 <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> 

I changed the Opacity to 1 so that the line was visible.