UWP - 将元素绑定到主窗口大小并随着窗口大小的变化更新值答案

【问题标题】：UWP - bind element to main window size AND also update the value as window size changesUWP - 将元素绑定到主窗口大小并随着窗口大小的变化更新值
【发布时间】：2016-12-11 07:26:42
【问题描述】：

我想将窗口的当前大小绑定到文本块。在当前的实现中，主窗口的大小是在运行时设置的，但是如果我在应用程序启动后调整窗口大小，新的大小不会在文本块中更新。

<Grid x:Name="grid" Background="#FFE8E8E8">
   <TextBox x:Name="textBoxSample" Width="300" Height="200" Text="{Binding ActualWidth, ElementName=grid}"></TextBox>
</Grid>

【问题讨论】：

标签： data-binding uwp

【解决方案1】：

您不应该绑定到 ActualWidth。 FrameworkElement.ActualWidth 文档的注释说：

虽然它有一个 ActualWidthProperty 支持字段，但 ActualWidth 不会引发属性更改通知，它应该被视为常规 CLR 属性而不是依赖属性。

出于 ElementName 绑定的目的，ActualWidth 在更改时不会发布更新（由于其异步和运行时计算的性质）。不要尝试将 ActualWidth 用作 ElementName 绑定的绑定源。如果您有需要根据 ActualWidth 进行更新的场景，请使用 SizeChanged 处理程序。

您将需要其他方法来确定窗口的大小，例如订阅 SizeChanged 事件。

【讨论】：

在 MainPage.xaml.cs 中将事件处理程序注册到网格的 SizeChanged 后，我能够正确更新新大小。我是编码初学者，有没有办法在为 SizeChanged 向网格注册事件处理程序时仍然尊重 MVVM 模式？

【解决方案2】：

在 UWP 中，Grid 控件通常会自动调整大小以适应其父容器。

但是，您的文本框有一个设置的高度和宽度，这将阻止它在调整其父网格大小时调整大小。

在您描述的场景中，我实施的一种解决方法是将 ScreenHeight 和 ScreenWidth 属性添加到我的视图模型中，这些属性会在屏幕大小更改时更新。然后，您可以将要调整大小的任何控件的高度/宽度绑定到这些属性。这是一个示例实现：

您的 XAML 文件：

<Page x:Name="mainPage"
    x:Class="YourApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vm="using:YourApp.ViewModels"
    SizeChanged="MainPage_SizeChanged">
    <Page.DataContext>
        <vm:ViewModel x:Name="dataContext"/>
    </Page.DataContext>
    <YourControl Height="{Binding ScreenHeight}" Width="{Binding ScreenWidth}"/>
</Page>

你的视图模型

public class ViewModel: INotifyPropertyChanged
{
    private double _screenWidth;
    private double _screenHeight;

    public double ScreenWidth { get { return _screenWidth; } set { _screenWidth = value; OnPropertyChanged("ScreenWidth"); } }
    public double ScreenHeight { get { return _screenHeight; } set { _screenHeight = value; OnPropertyChanged("ScreenHeight"); } }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
}

背后的代码

private void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
    dataContext.ScreenHeight = this.ActualHeight;
    dataContext.ScreenWidth = this.ActualWidth;
}

【讨论】：