UWP - bind element to main window size AND also update the value as window size changes

问题

I want to bind to a text block the current size of the window. In the current implementation the size of the main window is set at run time BUT if I resize the window after the application has launched the new size is not updated in the text block.

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

回答1:

In UWP, the Grid controls normally automatically resize to fit its parent container.

Your Textbox however has a set Height and Width, this will prevent it from resizing when its parent grid is resized.

In the scenario you described, a workaround that I've implemented was adding ScreenHeight and ScreenWidth properties to my view model that are updated when the screen size is changed. Then, you can bind the height/width of whatever control you are wanting to be resized to those properies. Here is a sample implementation:

Your XAML File:

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

Your ViewModel

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

Your Code Behind

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

回答2:

You shouldn't bind to ActualWidth. The remarks of the FrameworkElement.ActualWidth documentation says:

Although it has an ActualWidthProperty backing field, ActualWidth does not raise property change notifications and it should be thought of as a regular CLR property and not a dependency property.

For purposes of ElementName binding, ActualWidth does not post updates when it changes (due to its asynchronous and run-time calculated nature). Do not attempt to use ActualWidth as a binding source for an ElementName binding. If you have a scenario that requires updates based on ActualWidth, use a SizeChanged handler.

You will need some other way of determining the size of the window, such as by subscribing to the SizeChanged event.

来源：https://stackoverflow.com/questions/40525260/uwp-bind-element-to-main-window-size-and-also-update-the-value-as-window-size

标签

data-binding

uwp